Верстка интернет-магазина по продаже часов

HTML-верстка
13 просмотров
03.11.2024
2880×14441 МБ
denisvip777.github.io_watch-shop_index.html (1).png

Была задача

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

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

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

Верстка сделана на HTML, CSS, JS, Flexbox, Grid. Для иконок сформировал иконочный шрифт. Сделал Popup на странице спасибо, несколько слайдеров Swiper, кастомные checkbox и radio кнопки, табы, и несколько спойлеров. Добавил видео с превью-картинкой. Сделал меню бургер и адаптив под мобильные устройства до 320px, также сайт подстраивается под большое количество контента - редактируйте как вам удобно не боясь что сайт сломается.

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

Главная

Страница 404

Вариативный продукт

Оформление заказа

Legal Pages (Страница спасибо или Политика конфиденциальности)

Авторизация/создание аккаунта

Аккаунт пользователя

Связь с поддержкой

Страница товара

Страница магазина

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

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

✅ Я скопировал и открыл свой стартовый шаблон, чтобы начать работу.

✅ Далее я скачал все иконки из макета дизайна в формате SVG и создал из них иконочный шрифт с помощью сервиса icomoon.io

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

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

✅ После того, как все было подготовлено, я приступил к разработке Header и Footer.

✅ Далее я приступил к разработке страниц сайта.

Результаты

Результат — надежный, кроссбраузерный, адаптивный интернет-магазин, готовый к посадке на любую современную систему управления контентом.

Делал работу 7 дней. Примерная стоимость 600$.