Демо: вёрстка лендинга по макету Figma, сверка наложением

Используемые навыки CSS Figma HTML JavaScript

Описание

Демонстрационный проект, заказчика нет. Макет: бесплатный «Travel Landing Page» из Figma Community (Kunturi Design, лицензия CC BY 4.0), бренд вымышленный.
Задача: сверстать лендинг так, чтобы он выглядел как макет и на компьютере, и на телефоне.

Решение

Что сделано:
— вёрстка на HTML, CSS и JavaScript без конструкторов, версия для компьютера и версия для телефона по макету;
— меню на телефоне, слайдер отзывов и форма поиска работают;
— страница проверена на 9 ширинах экрана, от 390 до 1512 px: ошибок и горизонтальной прокрутки нет;
— вёрстку наложили на макет и сравнили попиксельно: на 1512 px расходится 5,4 % пикселей, на 390 px 9,3 %. Каждое отличие описано: в основном это точки слайдера, в макете их больше, чем карточек.

Результат

Демо открывается в браузере, ссылка в работе.
Для вашего сайта первый этап — первый экран по вашему макету: вы проверяете его на своём телефоне, потом я верстаю остальное.
Design: Kunturi Design (CC BY 4.0), coded by Flow Lab.
Сделано с использованием ИИ-инструментов; задача, проверка и доработка мои.