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

Общие технические требования

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

С макетом предоставлен иконочный шрифт, сгенерированный автоматически. Демонстрацию работы иконок можно посмотреть в файле symbols-nerds/demo.html.
В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
Макеты верстаются постепенно, не нужно сразу выполнять все требования.

Все макеты:

Контентная область центрируется и не может быть уже макетной ширины.
Логотип — это ссылка на главную страницу.
Блок карты — достаточная реализация — обычное изображение.
Блок карты — реализация по желанию — интерактивная карта (карты Google или Яндекса), высота карты постоянная, ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер, центр карты соответствует центру блока в макете.
Блок карты: по клику на кнопку «напишите нам» возникает модальное окно с формой отправки сообщения (смотрите папку слоёв «write us» в nerds-index.psd), окно позиционируется относительно вьюпорта, а не страницы.

nerds-index.psd:

Карусель под основной навигацией: смена слайдов мгновенная, без промежуточных переходов.

nerds-catalog.psd:

Блок «Стоимость» — при наведении на любой из маркеров появляется указатель cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна.
Фильтр (блоки «Сетка», «Особенности») верстать с помощью формы, кнопка «Показать» отвечает за отправку формы, при выключенном JavaScript должен осуществляться переход на отдельную страницу (отдельную страницу верстать не нужно).
Карточка товара: название товара является ссылкой, клик по нему открывает модальное окно с демонстрацией товара (макета нет, модальное окно не делать).
Количество товаров в правом блоке может быть любым, оно не должно ломать страницу.