Вёрстка интернет-магазина «TangoShoes.ru»

В хедере стандартные элементы интернет-магазина, а также адаптивное мега-меню с интересной отработкой и анимациями, особенно на мобильных разрешениях.

В футере стандартный для интернет-магазина: дублирующие ссылки, контакты, форма подписки и копирайт.

Выполнены несколько слайдеров в различных вариациях, рекламный блок с акциями и другие стандартные секции для интернет-магазина.

На странице каталога свёрстаны: секция фильтров; карточки товаров; пагинация и сортировка товаров.

Отдельно стоить отметить, что при наведении на каждый товар появляется ссылка на быстрый просмотр и выбор цвета товара.

После нажатия на кнопку быстрого просмотра всплывает модальное окно с подробной информацией о товаре — слайдер с фотографиями и другие элементы, рассказывающие о выбранном продукте.

На странице карточки товара находится слайдер с возможностью увеличения изображения — работает по двойному клику мышью.

При нажатии на количество магазинов, в которых присутствует товар всплывает модальное окно с данными об этих магазинах (адрес, телефон, время работы).

В нижней части страницы табы с общей информацией о товаре и отзывы.

На странице контактов размещены реквизиты компании и контактная информация.

Из интересного реализована кастомная яндекс-карта в двух вариантах, размещённых во вкладках.

Стандартные страницы, с описанием релевантным названиям. Особо интересных элементов нет, поэтому проще посмотреть и всё.

На странице профиля использованы вкладки для переключения между разделами.

В разделе «Мои заказа» используются спойлеры для размещения информации о каждом заказе. Присутствует сортировка по типам заказов: доставленные; в ходе выполнения; отменённые; все.

В разделе «Список желаемого» размещены карточки товаров, с возможностью загрузить дополнительные и удаления всего списка.

В разделе «Мои отзывы» размещаются отзывы, оставленные от товаров с возможностью их сортировки.

На странице корзины проверяется заказ. Предусмотрены возможности: увеличить / уменьшить количество выбранных и удалить товар из заказа; выбрать способ доставки и оплатить заказанные товары.

Сайт верстался с применением сетки bootstrap. Из фреймворка подключалась только сетка, чтобы избежать избыточности кода.

Вёрстка адекватно работает во всех браузерах, полностью адаптивная и валидная, с применением семантических тегов.

Во время вёрстки сразу сделал первичную сео-оптимизацию элементов. Также сделана микроразметка OpenGraph.

Как и любой интернет-магазин этот проект изобилует интерактивными элементами.

Слайдеры, вкладки, фильтры, элементы сортировки, корзина, карточки товаров и множество других.

Если интересно, то проще посмотреть, чем перечислять их все, так что милости прошу к просмотру.

На сайте сделаны мягкие, приятные для глаз анимации, сопутствующие множеству интерактивных элементов.

Меню, фильтры, кнопки, вкладки, спойлеры —— все эти элементы имеют собственные анимации, срабатывающие по различным событиям — клику или наведению.