Верстка лендинга

Нужно сверстать лендинг.

ТЗ

Техническое задание на верстку

Описание проекта:

Промо-сайт (лендинг) жилого комплекса.

Требования к выходному материалу:

Верстка адаптивная -корректно должна отображаться на экранах с шириной от 320px до 1920px. На мобильных устройствах за основу берем дизайн мобильной версии (прилагается), который должен отображаться от 320px до 768px. Устройства  с шириной экрана от 768px до 1920 - версия дизайна для ПК.

HTML-шаблоны не ниже xhtml 1.0 (HTML5), CSS 3

Совместимость с браузерами IE 10, Firefox 30, Safari 7, Opera 11, Chrome 56

Встроенные шрифты - Copyright House Industries, Open Sans (light,bold,regular,italic)

Плавная анимация, но не замедленная, пример плавности - http://twenty-twenty.ru/

Каждый блок подстраивается под размер экрана, минимальная высота экрана 700px.

Смена блоков слайдами, при скроле или кнопками вверх-вниз.

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

Желательно использование предзагрузки (прелоадер).

Список блоков на странице и описание элементов, действий и анимации:

• Первый экран

Появление центральной надписи после загрузки всего содержимого.

Меню раскрывается (или закрывается) при клике на ссылку с появлением слева направо.

При клике на пункт меню открывается соответствующий блок (якорь).

• Расположение

Справа вверху (текст “2 минуты до…”), смена текстового блока происходит автоматически (2 секунды), список фраз:

2 минуты до парка Островского

15 минут до центра города

10 минут до аэропорта

5 минут до школы

7 минут до детского сада

Карта гугл - активная, с расположением на ней элементов. (список предоставим дополнительно).

• Выбор квартиры

При выборе параметров можно выбрать несколько (например и 1 и 2 и 3 комнаты или несколько вариантов оплаты и т.п.), кроме блока Вид - там можно одновременно выбрать только один пункт.

Выбор этажа необходимо сделать диапазоном (т.е. ползунком можно выбрать значение От и значение ДО), как и стоимость.

Кнопка “подобрать”, для отправки формы.

При клике на кнопку “смотреть планировки” открывается (появление справа налево наплывом) блок 3.1

3.1 Планировки

Количество комнат - табы, переключение содержимого слайдера в котором отображаются планировки и листаются (3-5 шт.).

“Узнать стоимость” - всплывающее окно (модальное).

“Назад” - возвращает на п.3

Скроллинг вверх и вниз не активен.

• Преимущества ЖК

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

При клике на ссылку “5 причин купить…” открывается п.4.1.

4.1 Причины купить (5 причин слайдер).

Преимущества листаются по клике на кнопки вправо/влево.

Кнопка “Назад” - возвращает на блок п.4.

Скроллинг вверх и вниз не активен.

• Галерея - при клике открывается изображение для просмотра (галерея) и листается.

При наведении на фото происходи анимационный эффект по примеру галереи на сайте - http://twenty-twenty.ru/ (4 блок)

При клике открывается увеличенное изображение, с возможность листать.

Фотографии в галерее должны быть отцентрированы строго по центру (Т.е. превью которые отображаются изначально в галлерее должны центрироваться в поцентру исходника ) - аналогично как это сделано на сайте - http://twenty-twenty.ru/ (4 блок)

• Условия покупки - при клике на кнопки слева меняется содержимое правого блока, активный пример “ипотека”.
• Ход строительства

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

При выборе месяца отображаются соответствующие изображение в галереи.

Листать можно стрелками на странице (

“Узнать дату…” - всплывающее окно (модальное).

Готовность проекта будет выставляться вручную в итоге.

• Документы - при клике на иконку документа он должен скачиваться.
• Подвал - при прокрутке наплывает на п.8

Ссылки на дизайн -

https://drive.google.com/open?id=0B_AdWa8h6svuazlQQnotejJkUEU