Адаптивная вёрстка интернет-магазина по продаже сноубордов
Была задача
Необходимо разработать верстку интернет-магазина на основе дизайн-макета Figma.
Описание проекта
Работа сделана на HTML, CSS, JS, Flexbox, Grid. Подключил библиотеку FA-icons(добавлены иконки Fontavesome), для некоторых иконок сформировал иконочный шрифт. Сделал несколько Popup-ов, несколько слайдеров, сделал кастомные checkbox и radio кнопки, табы, и несколько спойлеров, а также ползунки цен в фильтре товаров. Добавил видео с превью-картинками. Сделал меню бургер и адаптив под мобильные устройства до 320px.
Ссылка на работу:
Карточка товара цена со скидкой
Стадии разработки
✅ Загрузил макет и открыл дубликат этого макета в Figma.
✅ Я открыл свой стартовый шаблон с подключенными CSS и JS файлами чтобы начать работу.
✅ И подключил библиотеку Fontawesome.
✅ Я также скачиваю некоторые иконки из макета дизайна в формате SVG и создаю из них иконочный шрифт с помощью сервиса icomoon.io
✅ Далее я приступил к анализу макета, используя для этого линейку. Благодаря ей я смог определить ширину ограничивающего контейнера, а также высоту Header и Footer.
✅ Далее я определил шрифты, которые используются в макете, и подключил их.
✅ После всех приготовлений я приступил к верстке Header и Footer.
✅ Далее я начал верстку страниц сайта.
Результаты
Магазин надёжный, адаптивный и кроссбраузерный, готов к посадке на любую CMS.
Делал работу 8 дней. Примерная стоимость 700$.