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

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

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

Все макеты:

3.1 Контентная область центрируется и не может быть уже макетной ширины.
3.2 Логотип — это ссылка на главную страницу.
3.3 Если пользователь сделал закладку или добавил что-то в корзину, соответствующий пункт в шапке сайта меняет цвет фона на красный (смотрите technomart-catalog.psd).
3.4 Авторизованному и неавторизованному посетителю показывается разный вид блока авторизации (смотрите technomart-catalog.psd и technomart-index.psd).
3.5 В блоке авторизованного посетителя имя и иконка пользователя являются ссылкой на профайл, а иконка выхода — на страницу деавторизации.

technomart-index.psd:

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

technomart-catalog.psd:

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

technomart-index.psd:

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

technomart-catalog.psd:

4.5 При клике на кнопку «Купить» возникает модальное окно с сообщением о добавлении в корзину (смотрите папку слоёв «cart» в technomart-catalog.psd), окно позиционируется относительно вьюпорта, а не страницы.
4.6 Фильтр: при выключенном JavaScript кнопка «Показать» должна осуществлять переход на отдельную страницу (отдельную страницу верстать не нужно).

Provide feedback