Верстка сайта для застройщика.
Многообещающий и интересный проект мы верстали для интернет-агентства. Просто о сложном - такое требование у было у заказчика. И сайт, содержащий так много динамических элементов, должен открываться даже на табуретке.
-
Строимся вместе
Пока заказчик строит дом, мы строим ему сайт! Интересный проект, интересная задача и необычный дизайн слились воедино в этом проекте. Множество типов страниц, модальные окна, формы заказов, слайдеры, карты этажей, "круглые" квартиры с фильтрами и много всего интересного.
-
Меню с логотипом и контактами, которое "следит" за пользователем. Исчезает при прокрутке и мгновенно появляется при скролле вверх. Ниже - расчудесный полноэкранный слайдер с левой навигационной панелью, эффектом Кена Бернса , стильным оверлеем и самой важной информацией для потенциальных покупателей. Дом можно осмотреть со всех сторон уже в этом блоке.
На мобильных устройствах наблюдаем Offcanvas-меню с крестиком и push-закрытием:
Далее по списку видим стилизованную под дизайн сайта Google-карту и блок с плюшками строящегося дома.
Фотоотчет со стройки нового дома. Просто дата и лайтбокс-каруселька.
Блок обратной связи и заголовок, развернутый на 90 градусов.
-
Такая яркая страница служит для выбора квартир. При наведении на круглик получаем краткую информацию о квартире и подсвечивается этаж ее расположения. По углам страницы расположены кнопки перехода на страницы фильтра и общего списка.
Кликаем по нужному кружку и получаем модальное окно с полной информацией о квартире. Подсвечен этаж, характеристики объекта, а также появляется кнопка перехода на страницу просмотра всего этажа. Уже можно выбрать вариант с отделкой или без и связаться с менеджером.
-
Страницы с контентом самые разные. В виде плитки, списка, центрированные и разноформантые
Страница новостей
-
Отдельного внимания заслуживает и фильтр: он очень большой! Он позволяет найти все необходимое быстро, удобно, в пару кликов.
Карта этажа - это большой SVG-объект.
-
Список динамических элементов на сайте тоже внушителен: несколько десятков эффектов наведения, parallax-эффекты, модальные окна, "липкое" меню, автоподсчет высоты страницы с подстановкой фонов в нужных местах в зависимости от разрешения страницы. Фотогалереи, лайтбоксы, слайдсеты - без них сейчас никуда ;)