Адаптивная вёрстка сайта Aperture

Была задача

Необходимо сделать верстку сайта Aperture по дизайн-макету Figma.

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

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

Работа сделана на HTML, CSS, JS, Flexbox, Grid. Подключена библиотека FA-icons (добавлены иконки Fontavesome). Реализовал эффект паралакса с изображениями. Сделал меню бургер и адаптив под мобильные устройства до 320px. Хотел сделать анимации в моменты скролла страницы, но посчитал их неуместными на этом сайте, паралакс и так делает своё дело.

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

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

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

✅ Далее я подготовил стартовый шаблон, чтобы начать работу над проектом.

✅ Для работы с иконками на этом сайте я решил подключить библиотеку Fontavesome.

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

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

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

✅ Затем я начал делать тело страницы.

Результаты

Сайт адаптивный и кроссбраузерный, готов к посадке на любую CMS.

Делал работу 1 день. Примерная стоимость 100$.