inkShio

все остальное в таком же духе.

в кратце

.parent
  .child__img
  .child__hover
    .title
      | my title
    .desc
      | my description

.parent{
  position: relative;
}
.child__img{
  тут код для картинки
}

.child__hover{
  display: none;
}
.parent:hover .child__hover {
  display: block;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: #ccc;
}
.title{
  стиль заголовка
}
.desc{
  стиль описания
}

swiper slider

Такой вариант, подсказали на альтернативном сайте. Работает как надо.

$(function() {
  var $togglers = $(".js-deps-popup");

  return $togglers.on("click", function(e) {
    var $this = $(this),
      $item = $this.next(".dep"),
      $active = $(".dep_show");

    $item.toggleClass("dep_show");
    $active.removeClass("dep_show");
    e.stopPropagation();
  });
});

$(function() {
  $(document).click(function(e) {
    var $togglersPopup = $(".dep__popup");
    if (!$togglersPopup.is(e.target) &&
      $togglersPopup.has(e.target).length === 0
    ) {
      $(".dep").removeClass("dep_show");
    }
  });
});

Так если делаешь составную цель, получится
цель 1
-кнопка футер
-кнопка отправки

цель 2
-кнопка хейдер
-кнопка отправки

При клике на кнопку в футере и потом отправить, будет достигнута цель 1, а цель 2 нет.
На кнопке в футере onclick="yaCounterXXX.reachGoal('clickButtonFooter'); return true;"
На кнопке в хейдере onclick="yaCounterXXX.reachGoal('clickButtonHeader'); return true;"
Ну а кнопке отправить onclick="yaCounterXXX.reachGoal('clickButtonSubmit'); return true;"

https://codepen.io/inkshio/pen/OGeqqO

Если по гуглить, то все можно найти

Песочница, на скорую руку

"shape": {
  "id": {
    "separator": "-"
  }
}

на выходе будет sprite.svg где id будут folder-icon_name

gulp-autoprefixer,
gulp-clean,
gulp-clean-css,
gulp-concat,
gulp-css-globbing,
gulp-csscomb,
gulp-data,
gulp-group-css-media-queries,
gulp-if,
gulp-imagemin,
gulp-notify,
gulp-plumber,
gulp-pug,
gulp-rename,
gulp-replace,
gulp-sass,
gulp-svg-sprite,
gulp-svgmin,
gulp-svgo,
gulp-uglify,
imagemin-pngquant

в общем гугли, как выше написали этот вопрос не один раз мусолили уже.
даже на тостере

Смотри песочницу яндекс карт

Каждому блоку задать стиль.

просто набросок, для примера. тут уже пишешь на флексах, что и как растянуть и кому какой ордер.

@media (width: 1024px) {
  .box-1,
  .box-2 {
    width: 50%;
  }
  .box-3 {
    width: 100%;
  }
  .box-4,
  .box-5 {
    width: 50%;
  }
}

@media (width: 768px) {
  .box-1 {
    width: 100%;
  }
  .box-2, .box-3, .box-4 {
    width: 33%;
  }
  .box-5 {
    width: 100%;
  }
}

yandex, google: парсер новостей php