Верстка внутренних страниц

42 000 руб. за проект
13 августа 2021, 10:18 • 10 откликов • 69 просмотров
Требуется сверстать сайт согласно макету используя 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/...

Отзывы
R50 a9a19972c331e00adbf5cb136d4b6b74
Заказчик
Евгений, отличный исполнитель. Работаю с ним уже не первый раз. Всем рекомендую. Качество, всегда на связи, гарантировано.
~ 1 год назад
R50 69b385eeb904b619959e25cb281db431
Фрилансер
Не первая работа с клиентом. И как всегда все отлично. Грамотное и понятное ТЗ, разумные сроки и с оплатой все ок. Буду работать дальше.
~ 1 год назад