lukoie

А можно например по детальке узнать?
Если у .lvl9 голубой фон, тогда зачем нужен .lvl9-scroll .bg-blue5 ?

И относительно вот этих .dqq.t6 .bdq .dq1 - сразу на себя внимание обратили. Почему выбрали именно такой способ именования? Ведь оно ниразу не информативно, и не логично(ну, только для Вас, и то - только сейчас, а если кому то надо будет что-то править?). Ведь например .backsquares.right > .square.blue.top.right читалось бы куда гармоничней, и в стилях проще описать логику размещения этих блочков, и если вдруг надо переместить - не надо искать стили, а сразу понятно что надо писать.

А, ну и если решили писать комментарии в коде(Вы его значит не собираете пока) то <!--end lvl --> после каждого блока - такие себе по информативности комментарии...

по моему, как раз тут вообще все просто - две дивки, в первой свг фон:

проще всего - нарисовать эти блоки в Иллюстраторе, и экспортировать в свг

прождал загрузки секунд 20
закрыл нафик
не делайте такой ховер эффект

А что, в коде сайта не нашли какой они использовали?

фигово код выложил. в jsfiddle выложи
и у #myvideo высоту поменяй

Что мешает у обоих блоков сделать одинаковый градиент, а под картинкой подложить другой градиент, чтоб он просто не залазил на хеддер?

Это смотря в каких случаях и для чего там это делается.

По вопросу вообще не понятно что именно Вам нужно.
Вот представьте что мы вообще не можем прочесть Ваши мысли на что именно нужно обратить внимание на скрине, и объясните чем этот скрин такой уникальный?

и чтобы при наведение полоска была во всю высоту области просмотра
а не как сейчас

<div class="section"> перенесите на первую строку
Да, и красить в красный надо на ховере, а не наоборот, вообще то!
так что убирайте дисплей нан в первом стиле,а во второй перенесите бекграунд колор ред.

upd а где у Вас лежат стили, по какому пути? Пробовали прописать абсолютный путь к шрифту?

Посмотрите в другом браузере, как минимум. Может Ваш не может почему-то отобразить этот формат.
Нужно с фолбеком указывать шрифты, если что.

@font-face {
    font-family: 'font, Arial, sans-serif';
    src:  url('fonts/font.otf') format('otf'),
            url('fonts/font.woff') format('woff'),
            url('fonts/font.woff2') format('woff2'),
            url('fonts/font.ttf') format('ttf');
}

Вы перенесли проект куда-то? Пропишите полный путь вместо относительного ../ и так поймете в чем ошибка.
Мы ж не знаем где у Вас эти стили вообще прописаны.

Дык на :after вешайте фон

Надо фону задать точные ширину и высоту.
Вот тут смотрите: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-...

Можно!
Не знаю по этой теме и конструктору, но начните с нажатия на "Настроить / виджеты"

Вы знаете что такое инспектор в хроме? Можете глянуть там очередность загрузки и время загрузки скриптов?

Погодите, с чего Вы решили что она должна падать "внутри паддинга"???
Во первых, у Вас паддинг указан у элемента без ховера.
Во вторых, если хотите тень вокруг картинки, надо обернуть в дивку, и тень у нее делать.
ЗЫЖ не ralative а relative