Адаптивная вёрстка небольшой страницы с 3D моделью
Была задача
Необходимо сделать верстку небольшой страницы по макету Figma.
Описание проекта
Работа сделана на HTML, CSS, JS, Three js. В процессе верстки использовал Flexbox для создания надёжной структуры сайта и качественного адаптива. Реализовал 3D модель на сайте, изначально макетом не предусматривалась 3D модель (была просто картинка), но я решил провести такой эксперимент и попрактиковаться с интеграцией 3D модели на сайт. Если Вы захотите как-то взаимодействовать с 3D моделью, то просто кликните на неё 2 раза! Сделал меню бургер. Сайт подстраивается под мобильные устройства до 320px.
Стадии разработки
✅ Я загрузил макет дизайна и открыл дубликат этого макета в Figma.
✅ Я открыл свой стартовый шаблон, чтобы начать работу.
✅ Я использовал линейку для определения ограничивающего контейнера и высоты Header и Footer.
✅ Следующим шагом было определение шрифтов, используемых в макете, с помощью плагина Font Fascia и подключение их к моему проекту.
✅ Далее я приступил к верстке Header и Footer.
✅ Далее я приступил к верстке страницы.
Результаты
В итоге получился надёжный, кроссбраузерный, адаптивный сайт готовый к посадке на любую современную систему управления контентом.
Делал работу 1 день. Примерная стоимость 50$.