Specification.md

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

• Название сайта: Седона
• Домен: пока нет

---

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

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

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

2.1. Обязательными к вёрстке являются все 3 страницы (главная страница, страница с формой, страница с фото и видео).
2.2. В макетах есть скрытые слои со всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены зелёным цветом.
2.3. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.
2.4. Готовить ретиновую и векторную графику для проекта не нужно, она будет добавлена в проект на этапе перехода к планшетной версии.

Пожелания к поведению блоков

3. Все макеты

3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.
3.2. При фиксированной сетке контентная область центрируется и не может быть уже макетной ширины.
3.3. Логотип на внутренних страницах — это ссылка на главную страницу.
3.4. Блок с главным меню в мобильной версии открывается при нажатии на инонку «гамбургера», появляясь над шапкой сайта (в блоке слоёв фотошопа выделены красным цветом). При этом иконка «гамбургера» заменяется на иконку «креста». Реализация по желанию.
3.5. При нажатии на иконку «креста» меню должно закрываться. Реализация по желанию.
3.6. Реализация открытия/закрытия должна быть выполнена на JS и может быть сделана на любом этапе интенсива. Реализация по желанию.
3.7 Все состояния элементов при наведении и нажатии указаны в макете sedona-styleguide.psd
3.8. Логотип Академии и ссылка `HTML Academy` в футере ведут на [лендинг интенсива «Продвинутый HTML и CSS»](https://htmlacademy.ru/intensive/adaptive).

4. Главная

Мобильная версия (sedona-index-mobile.psd):

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

Планшетная версия (sedona-index-tablet.psd):

4.4. Блоки меняют размеры и расположение согласно макету.
4.5. В составе логотипа добавляются новые элементы.
4.6. Главное меню открыто всегда вне зависимости от его состояния на мобильной версии.

Десктопная версия (sedona-index-desktop.psd):

4.7. Блоки меняют размеры и расположение согласно макету.
4.8. В составе логотипа добавляются новые элементы.

5. Форма

Мобильная версия (sedona-form-mobile.psd):

5.1. Должны быть реализованы кастомные элементы форм.
5.2. Поля для ввода телефона и почты должны быть сделаны с верным типом для удобного заполнения с телефона.
5.3. При попытке отправить форму, в которой поля для ввода телефона или почты заполнены данными в неподходящем формате, появляется встроенный в браузер сообщение об ошибке.

Планшетная версия (sedona-form-tablet.psd):

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

Десктопная версия (sedona-form-desktop.psd):

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

6. Страница с фото и видео

Мобильная версия (sedona-photo-mobile.psd):

6.1. Все изображения являются ссылками на полноразмерный вариант (открытие полноразмерного изображения реализовывать не нужно).
6.2. Работу плеера для проигрывания видео реализовывать не нужно, только вёрстка элементов интерфейса.

Планшетная версия (sedona-photo-tablet.psd):

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

Десктопная версия (sedona-photo-desktop.psd):

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