Требуется сверстать сайт согласно макету используя gulp + webpack4:
- При верстке используем html5 (header, section, main, footer)
- Минимизировать использование js (не используем библиотеки типа jquery и подобных)
- Навешиваем vue 3 только на форму (можно обсудить и без него).
- Поддерживаем все последние популярные версии браузеров + ие11 (только хромиум движок)
- Используем scss
- Иконки пережимаем в font
- Lazyload юзаем нативный
- Пережимаем картинки в webp (автоматом) и используем picture + source (webp) + img (jpg, png)
- На первом экране картинка товара так же подгружается от разрешения через source (если требуется)
- Верстку делим на компоненты (кнопка, секция, базовый элементы form + input,select)
- Желательно использовать BEM подход (это не значит, что каждый визуальный блок имеет свое название и свой контейнер с отдельным названием)
- Для шаблонизации желательно использовать pug или альтернативы
- Верстку делаем mobile-fisrt (те основной класс должен быть для мобил - 320)
- Верхнее меню фиксится на 1915+ и больше не тянется, дальше только центрируется
- Сам контент с фиксированными контейнерами:
.container - 1400px, разрешение экрана - 1430+
.container - 1140px, разрешение экрана - 1200-1429
.container - 1000px, разрешение экрана - 1020-1199
.container - 735px, разрешение экрана - 768-1019
.container - 604px, разрешение экрана - 640-767
.container - 100%, разрешение экрана - 320-639
- По hover уточнить:
HoverRed = #FF545A
HoverGray = #e0e0e0
https://take.ms/3U4PN - все черные и красные элементы в шапке без подчеркивания становятся HoverRed
https://take.ms/c2TAh - наша продукция и красная кнопка становятся HoverRed, а все серые элементы HoverGray
https://take.ms/fp7ln - при наведении кнопка инвентируется, становится красной а текст белым
https://take.ms/7MrXn - серая кнопка становится более серой HoverGray
https://take.ms/YboAx - О компании просто текст становится красным "Скачать каталог с товарами"
https://take.ms/Z4NTv - все красные ссылки и кнопки HoverRed, там где подчеркивание его убираем
А стрелочки влево вправо, становятся тоже HoverRed
https://take.ms/kl8H1 - белую кнопку инвертируем, а все черные и красные элементы при наведении HoverRed
HoverRed - все элементы при наведении HoverRed, там где есть подчеркивание оно убирается

- Не забыть что на мобильных появляется плавающее меню
- Дизайн будет приниматься с pixel perfect в разумных пределах, грубо говоря если обговорили что у заголовков отступы такие, а дизайнер везде вкорячил разные, то принимаем наши
Аналогично отступ для параграфов и межстрочный интервал
- Картинки на первом экране и у плитки "наша продукция" все делаем под один размер, только подсталяем саму картинку в нужное место, чтобы она выглядела как в макете
- Карту, слайдер и прочие библиотеки подключаем через npm, и загрузку карты и слайдера просьба повесить на scroll
- Просьба подключить media-queries-combine или аналогичный (чтобы после сборки из sass он объединял их в одном месте)


Шаблон: https://disk.yandex.ru/d/Wen0nnzqKWhYfg
https://www.figma.com/file/g5g20usXMyuhgBeSTcSh2Y/...