Сергей Горячев

SVG

Ничего сложного нет.
Обычный список ul>li, выстраивается поверх всегда экрана.
Через абсолютное позиционирование сверху накладываются текстовые блоки.
Либо наоборот, список через абсолют.
Даже не знаю, как объяснить еще проще. Тут итак "школьная" программа.
Проще было набросать https://jsfiddle.net/webirus/p0af0my0/

На третьем экране, самый простой аккордион.
https://www.tn34.de/downloads/jQuery.tn34.facets.html
Демо 4 по-моему как раз выглядит похоже, только навигацию вниз перенести.

Ну, чтобы не говнокодить, сделай эту картинку через background-image.
Тогда и не придется огород городить с z-index'ами.

А gulp не проще освоить?
gulp-plumber и gulp-autoprefixer справятся.

На все пункты ответ один.
Открывай консоль разработчика и смотри, как и что сделано.
В хроме и мозилле это открывается клавишами ctrl+shift+i.

Не вижу смысла подсказывать что-то конкретно.
Всё видно в коде.

PS: Не всё там требуется JS, обычные CSS эффекты.

https://jsfiddle.net/webirus/stycx5y3/

.block {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-left: 100px;
  border: 2px solid #000;
}
.block span {
  position: relative;
  margin-left: -50px;
  font-size: 50px;
  background: #FFF;
}

href="../css.examples/code.css"
Сейчас ты пытаешься открыть папку как будто она лежит рядом с файлом.

Ну, епть, конечно же задать border-radius в px, а не в %.
https://jsfiddle.net/webirus/4qn2Lnht/5/

https://jsfiddle.net/pg6vg3xa/2/
p { display: inline-block; }

В тот момент пока блок крутится, мышь попадает ВНЕ его области.
Тут же начинается вращение обратно, так как блок думает, что мышь убрали.
И во время обратного вращения мышь опять попадает на блок, заставляя блок опять менять анимацию.
Решается еще одним блоком, я сделал .wrapper, при наведении на который работает магия.
https://jsfiddle.net/41g4yn68/4/

.header-menu-wrap {
    background: rgba(255, 255, 255, 0.5) !important;
}
.main-section-wrap {
    margin-top: -90px;
}

Вообще не понятно, что на сайте творится :)