Адаптивная верстка сайта Турагентства Pero Travel
Была задача
Необходимо сделать адаптивную верстку сайта турагентства по предоставленному макету Figma.
Описание проекта
Работа сделана на HTML, CSS, JS по методологии БЭМ. При работе над проектом использовал Flexbox и Grid. Иконки в этом проекте сделал с помощью SVG-спрайтов. Также сделал несколько слайдеров, кастомное поле для ввода даты с календариком, кастомные чекбокс и радио кнопки, ползунки выбора диапазона цен на экскурсии, табы и несколько спойлеров. На странице обзора экскурсии сделал календарь путешествий на JS. Сделал адаптив до 320 пикселей ширины окна браузера.
Ссылка на проект:
Стадии разработки
✅ Для начала я сделал дубликат необходимого мне макета и открыл его в Figma.
✅ Далее я открыл свой заранее подготовленный стартовый шаблон для начала работы.
✅ Далее я разметил макет напрвляющими линиями с помощью линейки для определения ограничивающего контейнера, а также Header и Footer.
✅ Следующий шаг - определение шрифтов используемых в макете. Это я сделал с помощью плагина Font Fascia. Когда все шрифты были определены я их установил и подключил в свой проект.
✅ Далее я начал разработку Header и Footer.
✅ Далее я сделал верстку страниц сайта.
Результаты
В итоге получился адаптивный, надежный, кроссбраузерный и удобный сайт турагентства, готовый к посадке на любую CMS.