Требуется верстка лендинга строго pixel perfect!!! за исключением возможных ошибок в дизайне с выравниваем.
Макеты в Figma:
В figma представлены 2 варианта дизайна, ориентироваться на следующие параметры ширины экрана:
- до 767 px (смартфон версия макета, тянуть макет до 768 px)
- 768 – выше (desktop)
Сжатие от desktop вниз до моб версии – на усмотрение верстальщика.
все иконки и пиктограммы ставить как SVG. Если чего-то не хватает в макете – просьба спрашивать, все будет предоставлено.
Использовать верстку на классах без фреймворков. Без Float и position absolute (только если в исключительных случаях).
Весь JS как vanilla или через Jquery (за исключением каруселей и прочего). Блоки JS желательно прокомментировать глобально. Не минифицировать.
На 1 экране фон – видео, НЕ картинка.
Карусель 1 (ролики):
При клике на видео в карусели 1: открывать видео в плеере во всплывашке. Для примера взять любое видео. Анимация карусели показана тут:
Карусель 2 с партнерами: предусмотреть большое число партнеров (можно сделать повторяющиеся лого).
Меню сделать как fixed, ссылки с пунктов меню – плавный скролл в нужному фрагмену страницы. Меню отрисовано отдельно в Figma.
Все hover и clicked классы прописаны в figma, переход в ним делать через небольшой transition (не резко).
Карта – поставить реальную google или Yandex с точкой с адресом на карте.
Форма: собирать все поля, проверять на заполненность (подсвечивать если не заполнено и не отправлять), проверять корректность телефона, и отправлять куда угодно через ajax (ответ сервера не проверять, просто включать всплывашку, что все ок)
Ссылки на ролики:
Moscow Night Sport
BMX
Архитектура
Графика
Фоновое видео для 1 слайда: