Вёрстка сайта по бронированию квартир dormis.com

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

Для front-end разработки второй версии использовал препроцессор less, сборщик проектов TARS, методологию BEM. Помогал back-end разработчику в натяжке верстки на ZF3 (Zend Framework 3). Вёрстка адаптирована под все разрешения, от десктопа, до планшетов и мобильников (иконки адаптированы под retina экраны).

dormis mobile

Чистый и валидный код, проверено валидатором w3c.

dormis w3c validator

Главная страница второй версии.

dormis home

Макет главной страницы прошлой версии.

dormis home old

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

dormis search

Стартовая посадочная страница.

dormis start listing

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

dormis flat

Макет страницы просмотра бронирования.

dormis

Страница добавления квартиры. Первый этап из трех.

dormis add flat