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

• Название сайта: Нёрдс

• Домен: https://zloydedd.github.io/Nerds/

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

• 1.1. Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.

• 1.2. Сетка: определена в макете.

• 1.3. Адаптивность вёрстки: нет.

• 1.4. Используемые фреймворки: нет.

• 1.5. Кроссбраузерность: IE11+, Edge, Chrome, Firefox, Opera, Safari.

• 1.6. Типографика: частично определена в макете (прочее — на усмотрение разработчика).

• 1.7. Используемый шрифт: Roboto (есть в папке с макетом и на Google Fonts).

• 1.8. С макетом предоставлен styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.

2. Пояснения для учащихся

• 2.1. В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.

• 2.2. Макеты верстаются постепенно, не нужно сразу выполнять все требования.

• 2.3. Ниже в разделе «Обязательные требования» описано поведение блоков, которое должно быть реализовано для получения допуска. Требования из раздела «Дополнительные требования» можно реализовать по желанию для выполнения дополнительных критериев.

3. Обязательные требования

Все макеты:

• 3.1. Контентная область центрируется и не может быть уже макетной ширины.

• 3.2. Блок карты — достаточная реализация — обычное изображение.

• 3.3. Вёрстка модального окна обязательна (смотрите папку слоёв «write us»).

• 3.4. Главное меню — пункт «Магазин» должен вести на внутреннюю страницу (nerds-catalog.psd)

nerds-index.psd:

• 3.5. Карусель под основной навигацией: слайдер. Вёрстка всех слайдов обязательна. Оживление слайдера необязательно, принцип оживления описан в 4 разделе.

• 3.6. Логотип Академии в блоке с партнёрами ведёт на лендинг интенсива «Профессиональный HTML и CSS, уровень 1».

nerds-catalog.psd:

• 3.7. Логотип — это ссылка на главную страницу.

• 3.8. Фильтр (блоки «Сетка», «Особенности») верстать с помощью формы, кнопка «Показать» отвечает за отправку формы.

• 3.9. Блок «Стоимость» — при наведении на любой из маркеров появляется указатель cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна.

• 3.10. Карточка товара: название товара является ссылкой, клик по нему открывает модальное окно с демонстрацией товара (макета нет, модальное окно не делать).

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

• 3.12. Количество товаров в правом блоке может быть любым, оно не должно ломать страницу.

4. Дополнительные требования

Все макеты:

• 4.1. Блок карты — реализация по желанию — интерактивная карта (карты Google или Яндекса), высота карты постоянная, ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер, центр карты соответствует центру блока в макете. Допустимо использовать как стандартный, так и кастомный маркер.

• 4.2. По клику на кнопку «Напишите нам» возникает модальное окно с формой отправки сообщения (смотрите папку слоёв «write us» в nerds-index.psd), окно позиционируется относительно вьюпорта, а не страницы.

nerds-index.psd:

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

nerds-catalog.psd:

• 4.4. Фильтр (блоки «Сетка», «Особенности»): по нажатию кнопки «Показать» осуществляется отправка формы.