# Техническое задание на вёрстку
- Название сайта: Барбершоп «Бородинский»
- Домен: пока нет
- Общие технические требования
- 1.1 Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
- 1.2 Сетка: определена в макете.
- 1.3 Адаптивность вёрстки: нет.
- 1.4 Используемые фреймворки: нет.
- 1.5 Кроссбраузерность: IE10+, Chrome, Firefox, Opera, Safari.
- 1.6 Типографика: частично определена в макете (прочее — на усмотрение разработчика).
- 1.7 Используемый шрифт: PT Sans Narrow (есть в папке с макетом и на Google Fonts).
- 1.8 С макетом предоставлен
styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.
- Пояснения для учащихся
- 2.1 Часть макетов не включена в задание, дабы не усложнять его. Когда упомянуты страницы или элементы, отсутствующие в макетах, даны пояснения «макета нет, не делать». Такие элементы (модальное окно с фотографией, страница новостей и прочие) верстать не нужно.
- 2.1 В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены красным цветом.
- 2.1 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
- Пожелания к поведению блоков
Все макеты:
- 3.1 Контентная область центрируется и не может быть уже макетной ширины.
- 3.2 По клику на ссылку «вход» открывается модальное окно авторизации (смотрите папку слоёв «log in form» в
barbershop-index.psd). - 3.3 В блоке с хлебными крошками активная страница (последний пункт) не является ссылкой и не реагирует на наведение.
- 3.4 В пагинации активная страница не является ссылкой и не реагирует на наведение.
- 3.5 Нижняя часть страницы: предусмотрите появление ещё одной социальной кнопки.
- 3.6 Все кнопки в покое чёрные, по наведению меняют фоновый цвет — смотрите
styleguide.psd.
barbershop-index.psd:
- 3.7 Логотип не является ссылкой.
- 3.8 Новостей может быть больше двух.
- 3.9 Картинки в фотогалерее — это ссылка, по клику открывается модальное окно с фотографией (макета нет, не делать).
barbershop-price.psd:
- 3.10 Добавление текста в контентные блоки не должно ломать страницу.
barbershop-shop.psd:
- 3.11 Фильтр (блоки «Производители» и «Группы товаров») верстать с помощью формы, кнопка «Показать» отвечает за отправку формы, при выключенном JavaScript должен осуществляться переход на отдельную страницу (отдельную страницу верстать не нужно).
- 3.12 Количество товаров в правом блоке может быть любым, оно не должно ломать страницу.
- 3.13 Карточка товара: изображение товара — это ссылка на страницу товара.
- 3.14 Карточка товара: название товара — это ссылка на страницу товара (название состоит из двух строк, но по сути является одним блоком).
- 3.15 Карточка товара: кнопка «Купить» — по клику товар добавляется в корзину (макета корзины нет, не делать).
barbershop-item.psd:
- 3.17 При клике по миниатюре в галерее изображений большая фотография меняться не должна.