Skip to content

MegaBulkOrg/blanchard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

Верстка большого ленда со множеством функций

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

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

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

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

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

Инструкция по развертыванию на локальном компьютере:

  • Установить GIT
  • В командной строке склонировать репозиторий командой: git clone https://github.com/MegaBulkOrg/blanchard.git
  • Перейти в папку склонированного проекта и открыть в браузере файл index.html

Верстка сделана полностью мною