Техническое задание

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

• 1.1. Сетка: определена в макете.
• 1.2. Адаптивность сетки: мобильная, планшетная и десктопная версии («фикс» или «резина»).
• 1.3. Адаптивность графики: ретинизация, векторные изображения.
• 1.4. Используемая методология: БЭМ.
• 1.5. Используемый препроцессор: Less или Sass.
• 1.6. Используемый инструмент автоматизации: Gulp.
• 1.7. Используемые библиотеки: нет.
• 1.8. Кроссбраузерность: Chrome, Firefox, Safari.
• 1.9. Типографика: частично определена в макете (прочее — наусмотрение разработчика).
• 1.10. Используемый шрифт: Oswald, Arial.

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

• 2.1. Обязательными к вёрстке являются все 3 страницы (главная страница, страница с формой, страница каталога).
• 2.2. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.

Требования к поведению блоков

3. Все макеты

• 3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
• 3.2. При фиксированной сетке контентная область центруется и не может быть уже макетной ширины. Фоны, которые упираются в края макета должны тянуться на всю страницу.
• 3.3. Логотип на внутренних страницах — это ссылка на главную страницу.
• 3.4. Мобильное меню может быть реализовано двумя способами:
  1. * реализация без JS;
  2. * реализация с использованием JS.
• 3.5. При реализации без использования JS главное меню в мобильной версии должно быть открыто, а иконка с крестиком — скрыта. Должны быть предусмотрены классы для скрытого и открытого состояний меню.
• 3.6. При реализации с использованием JS блок с главным меню в мобильной версии должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.
• 3.7. Все состояния элементов при наведении и нажатии указаны в стайлгайде. Состояние ошибки должно быть реализовано только для обязательных полей формы (в макете они помечены звёздочкой).
• 3.8. Логотип и текст HTML Academy в футере являются ссылкой на лендинг интенсива «HTML и CSS. Адаптивная вёрстка и автоматизация»

4. Главная

Мобильная версия (Index > Mobile):

• 4.1. Логотип состоит из упрощённой иконки и названия магазина «Кэт энерджи».
• 4.2. Кнопка «Подобрать программу» должна вести на страницу формы для подбора программы.
• 4.3. В блоках «Похудение» и «Набор массы» ссылкой должна быть строка, начинающаяся со слова «Каталог». При нажатии должен осуществляться переход на соответствующие разделы каталога. Страницы разделов реализовывать не нужно.
• 4.4. В блоке «Живой пример» достаточно вёрстки, соответствующей макету. По желанию можно сделать «Было» и «Стало» кнопками переключения фотографий кота.
• 4.5. Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.

Планшетная версия (Index > Tablet):

• 4.6. Блоки меняют размеры и расположение согласно макету.
• 4.7. В состав иконки логотипа добавляются новые элементы.
• 4.8. Главное меню всегда открыто вне зависимости от его состояния на мобильной версии.
• 4.9. В блоке «Живой пример» котов становится двое. Логику слайдера реализовывать не обязательно.

Десктопная версия (Index > Desktop):

• 4.10. Блоки меняют размеры и расположение согласно макету.
• 4.11. В составе логотипа добавляются новые элементы.
• 4.12. Фон первого блока под шапкой тянется на всю ширину экрана и состоит из двух равных частей: левая — с белым фоном, правая — с зелёным фоном и изображением кота, которое упирается в правую границу экрана.

5. Форма

Мобильная версия (Form > Mobile):

• 5.1. Должны быть реализованы кастомные элементы форм.
• 5.2. У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.

Планшетная версия (Form > Tablet):

• 5.3. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (Form > Desktop):

• 5.4. Блоки меняют размеры и расположение согласно макету.

6. Страница каталога

Мобильная версия (Catalog > Mobile):

• 6.1. Изображение и название товара — ссылки на страницу с описанием товара. Страницу с описанием товара реализовывать не нужно.
• 6.2. Кнопка «Заказать» открывает страницу оформления заказа.
• 6.3. Кнопка «Показать все» показывает новые товары. При отключенном JS должен осуществляться переход на страницу новых товаров. Показ новых товаров и их страницу реализовывать не нужно.

Планшетная версия (Catalog > Tablet):

• 6.4. Блоки меняют размеры и расположение согласно макету.

Десктопная версия (Catalog > Desktop):

• 6.5. Блоки меняют размеры и расположение согласно макету.