- Название сайта: Нёрдс
- Домен: пока нет
- Общие технические требования
- 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 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
- Пожелания к поведению блоков
Все макеты:
- 3.1 Контентная область центрируется и не может быть уже макетной ширины.
- 3.2 Логотип — это ссылка на главную страницу.
- 3.3 Блок карты — достаточная реализация — обычное изображение.
- 3.4 Блок карты — реализация по желанию — интерактивная карта (карты Google или Яндекса), высота карты постоянная, ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер, центр карты соответствует центру блока в макете.
- 3.5 Блок карты: по клику на кнопку «напишите нам» возникает модальное окно с формой отправки сообщения (смотрите папку слоёв «write us» в nerds-index.psd), окно позиционируется относительно вьюпорта, а не страницы.
nerds-index.psd:
- 3.6 Карусель под основной навигацией: смена слайдов мгновенная, без промежуточных переходов.
nerds-catalog.psd:
- 3.7 Блок «Стоимость» — при наведении на любой из маркеров появляется указатель
cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна. - 3.8 Фильтр (блоки «Сетка», «Особенности») верстать с помощью формы, кнопка «Показать» отвечает за отправку формы, при выключенном JavaScript должен осуществляться переход на отдельную страницу (отдельную страницу верстать не нужно).
- 3.9 Карточка товара: название товара является ссылкой, клик по нему открывает модальное окно с демонстрацией товара (макета нет, модальное окно не делать).
- 3.10 Карточка товара: при наполнении текстом блок с текстом не должен вылезать за границы изображения, кнопка покупки не должна пропадать.
- 3.11 Количество товаров в правом блоке может быть любым, оно не должно ломать страницу.