Задача. Превратить макет из Figma в страницу, которая и на ноутбуке, и на телефоне выглядит как макет. Макет — бесплатный «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 %, и каждое отличие описано. Больше всего расхождений дают точки слайдера: в макете их больше, чем карточек.
Для вашего сайта первый этап — первый экран по вашему макету: вы проверяете его на своём телефоне, а потом я верстаю остальное.
Дизайн: Kunturi Design (CC BY 4.0), вёрстка: Flow Lab.