Верстка макетов сайта

Необходимо сверстать макеты сайта.

Технические моменты:

1). Предпочтительна flex-верстка, без использования Bootstrap и прочих библиотек. Использование LESS – гут.

2). Верстка адаптивная. Макеты сделаны для основных размеров (4 шт.). В промежуточных размерах браузера верстка также должна быть адаптивна и подгоняться под размеры экрана.

3). JS – jQuery. Для окна "Оставить заявку" использовать Fancybox. Для слайдеров либо slick, либо Swiper.

4). Большинство иконок в макетах – SVG. В этом же формате их надо использовать в верстке.

5). Все, что можно, надо делать через CSS (к примеру, скругления, круглые элементы и пр.).

Пояснения по макетам сайта:

6). В каждом PSD показано две разных страницы: главная и страница продукции. Они отделены друг от друга полоской меню. Подвал у обеих страниц одинаковый (тот, что в самом низу макетов). Верстать их надо как две разные страницы.

7). Верхнее меню при прокрутке трансформируется в то, что разделяет две страницы в макете. При этом видоизмененное меню "прилипает" к верхней части экрана и остается всегда видимым.

8). Меню каталога имеет одну выпадающую часть и дублируется в двух местах: в меню шапки и на страницах каталога слева.

9). Строка поиска имеет выпадающий блок live-preview с результатами. В шапке input часть строки поиска должна анимировано появляться по нажатию на иконку поиска.

10). Окно "Оставить заявку" показано в макете размера "М".