Требуется верстка одного шаблона сайта. Ниже представлены макеты для 3-х рарешений одной страницы и 2-х всплывашек на этой странице: поиска и «сториз» (истории).
Макеты будут предоставлены в 3 версиях в Figma:
1. desktop – 1600px и шире (названия макетов без цифр)
2. table – 1600-960 (названия макетов с 960)
3. mobile – меньше 960px (названия макетов с 375)
Требования к верстке:
Всё указывать только в px (не в em или в rem). Некоторые свойства можно в % или vw|vh.
Верстка близко к pixel perfect.
Подвал верстать НЕ нужно. Для примера поставить черное поле.
Весь необходимый JS код на Jquery. Для слайдеров использовать библиотеки.
Все hover состояния показаны в макетах символом руки.
Не использовать глобальные селекторы: *, div, header и т. п. Чтобы не переопределить уже существующие стили.
Использовать только имена классов уникальные для этой страницы, желательно БЭМ, чтобы не попасть на конфликты с существующими именами классов. Например: main_page → main_page_slider_main → main_page_slider_main_head
Все векторные картинки размещать как svg. Все растровые как webp, использовать компрессию. Для мобильной версии использовать картинки 2х.
Для появляющихся всплывашек, меню и смены состояний (кнопок, форм) использовать анимацию css.
Пример календаря есть на сайте:
Ajax запросы/ответы нигде реально не делать (например в поиске), но предусмотреть в комментариях.
Верхнее меню position: fixed.
Про всплывашку поиск:
при открытии показывается одно состояние (макет «открытие окно поиска»). Когда начинается ввод, оно меняется на другое (макет «поиск ввод»). Если ничего не найдено показывается состояние «Поиск не найдено»
Про вплывашку сториз (истории):
При показы всплывашки показывается макет «главная сториз». Механизм листания показа в макете «сториз пролистывание».
У одной истории могут быть подыстории (они меняются по таймеру). Меняется картинка, тексты, кнопки. Пример есть в макете: «главная сториз пролистывание». Там 3 подыстории. При клике на стрелку «следующая» подказываем след подысторию (если она есть).
Просмотренные квадраты сториз уходят в конец списка (можно сразу, можно при закрытии всплывашки).