- Название сайта: Нёрдс
- Домен: пока нет
- Общие технические требования
- 1.1 Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
- 1.2 Сетка: определена в макете.
- 1.3 Адаптивность вёрстки: нет.
- 1.4 Используемые фреймворки: нет.
- 1.5 Кроссбраузерность: IE10+, Chrome, Firefox, Opera, Safari.
- 1.6 Типографика: частично определена в макете (прочее — на усмотрение разработчика).
- 1.7 Используемый шрифт: Roboto (есть в папке с макетом и на Google Fonts).
- 1.8 С макетом предоставлен
styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.
- Пояснения для учащихся
- 2.1 В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
- 2.2 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
- 2.3 Ниже в разделе «Обязательные требования» описано поведение блоков, которое должно быть реализовано для получения допуска. Требования из раздела «Дополнительные требования» можно реализовать по желанию для выполнения дополнительных критериев.
- Обязательные требования
Все макеты:
- 3.1 Контентная область центрируется и не может быть уже макетной ширины.
- 3.2 Логотип — это ссылка на главную страницу.
- 3.3 Блок карты — достаточная реализация — обычное изображение.
- 3.4 Вёрстка модального окна обязательна (смотрите папку слоёв «write us»).
nerds-index.psd:
- 3.5 Карусель под основной навигацией: слайдер. Вёрстка всех слайдов обязательна. Оживление слайдера необязательно, принцип оживления описан в 4 разделе.
nerds-catalog.psd:
- 3.6 Фильтр (блоки «Сетка», «Особенности») верстать с помощью формы, кнопка «Показать» отвечает за отправку формы.
- 3.7 Блок «Стоимость» — при наведении на любой из маркеров появляется указатель
cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна. - 3.8 Карточка товара: название товара является ссылкой, клик по нему открывает модальное окно с демонстрацией товара (макета нет, модальное окно не делать).
- 3.9 Карточка товара: при наполнении текстом блок с текстом не должен вылезать за границы изображения, кнопка покупки не должна пропадать.
- 3.10 Количество товаров в правом блоке может быть любым, оно не должно ломать страницу.
- Дополнительные требования
Все макеты:
- 4.1 Блок карты — реализация по желанию — интерактивная карта (карты Google или Яндекса), высота карты постоянная, ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер, центр карты соответствует центру блока в макете. Допустимо использовать как стандартный, так и кастомный маркер.
- 4.2 По клику на кнопку «Напишите нам» возникает модальное окно с формой отправки сообщения (смотрите папку слоёв «write us» в nerds-index.psd), окно позиционируется относительно вьюпорта, а не страницы.
nerds-index.psd:
- 4.3 Карусель под основной навигацией: оживление слайдера. Cмена слайдов мгновенная, без промежуточных переходов.
nerds-catalog.psd:
- 4.4 Фильтр (блоки «Сетка», «Особенности»): при выключенном JavaScript кнопка «Показать» должна осуществлять переход на отдельную страницу (отдельную страницу верстать не нужно).