Сверстать лендинг

Цена договорная
21 февраля 2022, 12:06 • 11 откликов • 139 просмотров
Макет в аттаче.

Описание

  • Лендинг будет встроен в текущий сайт, поэтому шапку и подвал верстать не нужно. http://joxi.ru/EA4X5w0CXw4DKA?d=1, http://joxi.ru/DmBzkdKCqw3NBm?d=1

  • Шапка. http://joxi.ru/vAWLwGET318kdr?d=1. На фоне короткое видео с превью или просто фото с эффектом зум. Пример: https://cool-smile.ru/uslugi/. Между видео (фоном) и текстом - полупрозрачный оверлэй. Видео с автоплэй, без звука, зациклено. Изображение: http://joxi.ru/J2bDLZdiqXzXyr?d=1 идет отдельно. Кнопка - плавный скрол до блока с формой.

  • Иконки: http://joxi.ru/L21XYwgCw8lGKm?d=1, http://joxi.ru/D2P3p7Nhwpndym?d=1 - SVG, спрайт.

  • Табы: http://joxi.ru/nAybj5li9YPZdr?d=1, менются проекты ниже. При переключении табов - в урле добавляется решетка # с указание названия таба (spa, sauna, bath, hammam). По урлу с решеткой возможен переход сразу на указанный таб.

  • Кнопка - просто ссылка: http://joxi.ru/xAeva3ZHMpdROr?d=1

  • Блок с самолетом. http://joxi.ru/MAjbXknid4pxqA?d=1. Может масштабироваться по высоте, в зависимости от контента (строк в колонках), поэтому изображение справа больше высоты блока и зарезается.

  • Слайдер. http://joxi.ru/p27bdwpiLoPN6m?d=1. В слайдере могут быть фото и видео. При клике в модалке открывается большое изобаржение или видео. Видео - автоплэй, при закрытии окна
  • прекращение произведения.

  • Форма. http://joxi.ru/eAORjy8HvxO6V2?d=1. Проверка полей: все обязательные, формат телефона и почты. Поле телефон - маска. После успешной отправки - смена состояния.



Технические требования

  • HTML, CSS, JS, JQuery

  • SASS/SCSS

  • Gulp. Импорт текущего css, отдельный .scss для этой страницы со своими стилями. Импорт текущего JS + свой код. Автопрефикс, медиа-запросы, сжатие, спрайт.

  • Галлерея: swiper

  • Плавный скрол, табы, проверка полей - JS/JQuery, без отдельных плагинов.

  • Адаптив. Есть отдельный моб. макет



В отклике:

  • Начать с фразы "Я изучил ТЗ" (спам-фильтр)

  • 3-4 последние работы (показывайте именно верстку)

  • стоимость работы и сроки

Файлы
Поделиться