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

1.1 Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
1.2 Сетка: определена в макете.
1.3 Адаптивность вёрстки: нет.
1.4 Используемые фреймворки: нет.
1.5 Кроссбраузерность: IE10+, Chrome, Firefox, Opera, Safari.
1.6 Типографика: частично определена в макете (прочее — на усмотрение разработчика).
1.7 Используемые шрифты: Gilroy, Open Sans (есть в папке с макетом и на WebFont.ru).
1.8 С макетом предоставлен styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.

2.1 В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
2.2 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
2.3 Ниже в разделе «Обязательные требования» описано поведение блоков, которое должно быть реализовано для получения допуска. Требования из раздела «Дополнительные требования» можно реализовать по желанию для выполнения дополнительных критериев.

Все макеты:

3.1 Контентная область центрируется и не может быть уже макетной ширины.
3.2 Авторизованному и неавторизованному посетителю показывается разный вид блока авторизации (смотрите device-catalog.psd и device-index.psd).
3.3 В блоке авторизованного посетителя имя и иконка пользователя являются ссылкой на профайл.
3.4 Логотип Академии в подвале ведёт на лендинг интенсива «Базовый HTML и CSS».

device-index.psd:

3.5 Блоки с названиями разделов («виртуальная реальность», «моноподы для селфи», ...) являются ссылками на разделы каталога.
3.6 Промо-слайдер: слайдер. Вёрстка всех слайдов обязательна. Оживление слайдера необязательно, принцип оживления описан в 4 разделе.
3.7 Блок «Сервисы» («доставка», «гарантии», «кредит»): слайдер. Вёрстка всех слайдов обязательна. Оживление слайдера необязательно, принцип оживления описан в 4 разделе.
3.8 Блок карты — достаточная реализация — обычное изображение, клик по ней приводит к переходу на сервис карт.
3.9 Вёрстка модального окна обязательна (смотрите папку слоёв «write us»).

device-catalog.psd:

3.10 Логотип — это ссылка на главную страницу.
3.11 Фильтр: верстать с помощью формы, кнопка «Показать» отвечает за отправку формы.
3.12 Блок «Стоимость» — при наведении на любой из маркеров появляется указатель cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна.
3.13 При наведении на карточку товара появляются кнопки «В корзину» и «Добавить к сравнению» (смотрите styleguide.psd). Ссылкой на отдельную страницу товара является только название товара (отдельную страницу верстать не нужно).
3.14 Количество товаров в правом блоке может быть любым, добавление товаров не должно ломать страницу.
3.15 У любого товара может быть метка «new».

device-index.psd:

4.1 Промо-слайдер: оживление слайдера. Смена слайдов в слайдере должна происходить мгновенно, без промежуточных состояний и анимации (некоторые слайды скрыты - смотрите слои выделенные красным цветом).
4.2 Блок «Сервисы» («доставка», «гарантии», «кредит»): оживление слайдера. Слайдер с табами работает аналогично промо-слайдеру: по клику на таб меняется слайд мгновенно.
4.3 Блок карты — реализация по желанию — часть интерактивной карты, клик на неё приводит к появлению полного размера интерактивной карты (смотрите папку слоёв «map hover»), окно позиционируется относительно вьюпорта, а не страницы.
4.4 При клике по кнопке «Напишите нам?..» возникает модальное окно (смотрите папку слоёв «write us»), окно позиционируется относительно вьюпорта, а не страницы.

device-catalog.psd:

Provide feedback