Художественная галерея Blanchard

Основные характеристики:

• В названиях классов HTML-элементов использована методология БЭМ
• Резиновая верстка (flexbox)
• Адаптивная верстка для любых устройств
• Верстка pixel perfect всех элементов на всех макетах
• Блоки сверстаны с учетом использования большого количества текста (переполняемость)
• Реализованы внешние виды всех активных элементов для состояний hover, focus, и active
• Реализована возможность “хождения” по сайту с клавиатуры
• Реализована возможность пользоваться сайтом с помощью скринридера
• Кроссбраузерность
• Минимизация "веса" изображений

Макет включает в себя:

• Прелоадер
• Шапку сайта у которой в мобильной версии все элементы меняют свое место и некоторые из них свой вид
• Нижнее меню с выпадающими списками (блоками с набором элементов и кастомным скроллом)
• Обычный слайдер с эффектом приближения и удаления
• Кастомный селект
• Слайдер в две строки, который в мобильной версии трансформируется в однострочный
• Всплывающие окна
• Систему "табов": переключение информации при нажатии на нужные ссылки
• Аккордеон
• "Плитку" элементов (с возможностью посмотреть все элементы), которая в мобильной версии превращается в слайдер
• Список кастомных чекбоксов, который в мобильной версии превращается в выпадающий список, где по дефолту отображаются лишь выбранные элементы
• Кастомный фильтр по цене
• Слайдер, который в мобильной версии превращается в "плитку" элементов
• Тултипы в тексте: значки, при нажатии на которые появляется поясняющий текст
• Карусель логотипов
• Форму обратной связи с валидацией и AJAX отправкой письме
• Интерактивную карту с черно-белой цветовой гаммой, стилизованным маркером и отключенным зумом при прокрутке страницы

ДИСКЛЕЙМЕР: В данной верстке картинки в слайдере реализованы через CSS свойство background-image. Я прекрасно понимаю все минусы этого подхода и, что, если бы эту верстку дальше начали бы натягивать на движок, backend-разработчик "сказал бы мне большое спасибо" за то, какую медвежью услугу я ему оказал. В данном случае причиной выбора такого подхода к созданию слайдера стали требования в ТЗ.

Исходный код представлен в GitHub репозитории.