Адаптивная вёрстка лэндинга по продаже компьютерных курсов

Была задача

Создать адаптивную под мобильные устройства верстку целевой страницы (Лендинг) для продажи компьютерных курсов с использованием дизайн макета Figma.

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

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

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

Ссылка на работу

Стадии разработки

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

✅ Открыл свой стартовый шаблон с подключенными файлами CSS и JS, чтобы начать работу над проектом.

✅ Для работы с иконками я подключил библиотеку Fontawesome.

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

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

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

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

Итоги

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

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