Адаптивная верстка лендинга GROVEMADE

Была задача

Необходимо сделать верстку лендинга GROVEMADE по предоставленному макету Figma. Лендинг должен быть адаптивным (мобильный, планшет, десктоп). Адаптивного макета нет.

Ссылка на макет

Описание проекта

Работа сделана на HTML 5, SCSS, JS по методологии БЭМ. Для сформирования надежной структуры лендинга и качественного адаптива использовал Flexbox и Grid сетку. Там, где возможно, увеличил площадь нажатия на ссылки для большего удобства пользователя. Работа довольно простая. Адаптируется до 320 пикселей ширины окна браузера, также сделал меню бургер.

Ссылка на проект

Этапы разработки

✅ Я открыл макет и сгенерировал дубликат дизайн макета в Figma.

✅ Далее я скопировал и открыл свой стартовый шаблон который подготовил заранее.

✅ Далее я разметил макет с помощью линейки для определения ограничивающего контейнера, а также Header и Footer.

✅ Далее я использовал плагин Font Fascia спомощью которого определил шрифты используемые в макете, а затем скачал и подключил их в своём проекте.

✅ Далее я приступил к верстке Header и Footer.

✅ Далее я сделал верстку контента страницы.

Результат

Работа готова к посадке на любую CMS. 👍