Концепт: вёрстка интернет-магазина керамики ручной работы «Глина»

Используемые навыки CSS3 Ecommerce Верстка Интернет магазин Мобильные сайты

Описание

Сделать концепт интернет-магазина керамики ручной работы «Глина» без реального заказчика: разработать дизайн и адаптивную вёрстку двух ключевых страниц на HTML и CSS — каталога и карточки товара. Обе страницы используют общий файл стилей и корректно отображаются на ПК, планшете и телефоне.

Решение

— Разработала дизайн и адаптивную вёрстку двух ключевых страниц на HTML и CSS — каталога и карточки товара.
— Сверстала каталог: хлебные крошки, фильтры слева (категории со счётчиками, цвет глазури, диапазон цены, наличие), выбранные фильтры плашками, сортировка, сетка товаров с метками «Новинка» и «Набор», кнопка «в избранное», старая и новая цена, кнопка «Показать ещё».
— Сверстала карточку товара: галерея с миниатюрами, рейтинг и отзывы, цена, выбор высоты и глазури, счётчик количества и кнопка «В корзину», три преимущества (отправка, доставка, возврат), раскрывающиеся блоки «Уход», «Материалы», «Доставка и оплата», блок «С этим берут».
— Написала общий CSS-файл для обеих страниц.
— Сделала адаптивную вёрстку: ПК, планшет, телефон; на телефоне каталог в 2 колонки, фильтры скрываются, галерея с миниатюрами под фото, кнопка покупки во всю ширину; шапка закреплена при прокрутке.

Результат

Готовый концепт интернет-магазина керамики ручной работы — две адаптивные страницы (каталог и карточка товара) на HTML и CSS с общим файлом стилей. Корректно отображается на ПК, планшете и телефоне; на телефоне каталог в две колонки, фильтры скрываются, кнопка покупки во всю ширину. Концепт без реального заказчика и метрик.