Требуется верстка лендинга строго pixel perfect!!! за исключением возможных ошибок в дизайне с выравниваем.

Макеты в Figma:

www.figma.com/file/SWU4gF...

В figma представлены 2 варианта дизайна, ориентироваться на следующие параметры ширины экрана:

- до 767 px (смартфон версия макета, тянуть макет до 768 px)
- 768 – выше (desktop)

Сжатие от desktop вниз до моб версии – на усмотрение верстальщика.

все иконки и пиктограммы ставить как SVG. Если чего-то не хватает в макете – просьба спрашивать, все будет предоставлено.

Использовать верстку на классах без фреймворков. Без Float и position absolute (только если в исключительных случаях).

Весь JS как vanilla или через Jquery (за исключением каруселей и прочего). Блоки JS желательно прокомментировать глобально. Не минифицировать.
На 1 экране фон – видео, НЕ картинка.

Карусель 1 (ролики):

При клике на видео в карусели 1: открывать видео в плеере во всплывашке. Для примера взять любое видео. Анимация карусели показана тут:

www.figma.com/proto/SWU4g...

Карусель 2 с партнерами: предусмотреть большое число партнеров (можно сделать повторяющиеся лого).

Меню сделать как fixed, ссылки с пунктов меню – плавный скролл в нужному фрагмену страницы. Меню отрисовано отдельно в Figma.

Все hover и clicked классы прописаны в figma, переход в ним делать через небольшой transition (не резко).

Карта – поставить реальную google или Yandex с точкой с адресом на карте.

Форма: собирать все поля, проверять на заполненность (подсвечивать если не заполнено и не отправлять),проверять корректность телефона, и отправлять куда угодно через ajax (ответ сервера не проверять, просто включать всплывашку, что все ок)

Ссылки на ролики:

mos.signalserver.ru/index...
Moscow Night Sport

mos.signalserver.ru/index...
BMX

mos.signalserver.ru/index...
Архитектура

mos.signalserver.ru/index...
Графика

Фоновое видео для 1 слайда: signal-tv.com/bgvideo.mp4

Опубликовано 2 года назад