Skip to content

Latest commit

 

History

History
67 lines (49 loc) · 8.26 KB

Specification.md

File metadata and controls

67 lines (49 loc) · 8.26 KB
Raw

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

  • Название сайта: Седона
  • Домен: пока нет
  1. Общие технические требования
  • 1.1 Стандарты вёрстки: HTML5, CSS3, прогрессивное улучшение.
  • 1.2 Сетка: три колонки равной ширины (33%), стоящие вплотную друг к другу без отступов.
  • 1.3 Два варианта вёрстки:
    • под фиксированную ширину 768px или 1200px: с центровкой основного контента, с некоторыми блоками, которые тянутся на всю ширину;
    • с дополнительной резиновостью (необязательный вариант): диапазон ширин от 768px до 1200px (смотрите макеты с суффиксом «-768», папка слоёв «Guides»).
  • 1.4 Используемые фреймворки: нет.
  • 1.5 Кроссбраузерность: IE10+, Chrome, Firefox, Opera, Safari.
  • 1.6 Типографика: частично определена в макете (прочее — на усмотрение разработчика).
  • 1.7 Используемый шрифт: PT Sans (есть в папке с макетом и на Google Fonts).
  • 1.8 С макетом предоставлен styleguide.psd, содержащий прорисовку состояний элементов интерфейса. При любых расхождениях с макетами он должен иметь наивысший приоритет.
  1. Пояснения для учащихся
  • 2.1 В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
  • 2.2 Макеты верстаются постепенно, не нужно сразу выполнять все требования.
  • 2.3 Ниже в разделе «Обязательные требования» описано поведение блоков, которое должно быть реализовано для получения допуска. Требования из раздела «Дополнительные требования» можно реализовать по желанию для выполнения дополнительных критериев. Некоторые размеры описаны в процентной ширине. Если вы выбрали вариант вёрстки с дополнительной резиновостью, то следуйте указанным процентам. Если вы выбрали вёрстку с фиксированной шириной, то проценты помогут вам высчитать правильные размеры блоков в пикселях.
  1. Обязательные требования

Все макеты:

  • 3.1 Контентная область центрируется и не может быть уже макетной ширины.
  • 3.2 Внутренние отступы слева и справа для главного меню и для внутренней страницы — по 6% от ширины всей контентной области.
  • 3.3 Логотип — это ссылка на главную страницу.
  • 3.4 Логотип — не пункт меню. Размечать отдельным элементом.
  • 3.5 Главное меню: пункт "Информация" не является ссылкой на главную страницу.
  • 3.6 Главное меню: четыре ячейки по 20% ширины. Для первых двух пунктов выравнивание по левому краю, для двух последних — по правому.
  • 3.7 Ссылки в главном меню: кликабельным должен быть только текст.
  • 3.8 При достижении 1200px сетка перестаёт масштабироваться дальше, и слева и справа от неё появляется серый фон, на который сайт бросает лёгкую тень.
  • 3.9 В трёх блоках футера контент расположен по центру.

sedona-index.psd:

  • 3.10 Крупное фото: фотография занимает 100% ширины, в её нижней части есть белая маска, которая также масштабируется на 100% ширины, но в отличие от фотографии меняет свои пропорции (то есть высота остаётся постоянной, а ширина — 100%).
  • 3.11 Фотографии, занимающие по две трети ширины вставляются так, чтобы обрезаться сверху и снизу при увеличении размера (ширина 66%, высота подстраивается под ширину, чтобы не нарушать пропорций, но фото не выходит за отведённую для него зону).
  • 3.12 По умолчанию, форма поиска гостиницы должна быть открыта.
  • 3.13 Кнопка «Поиск гостиницы в Седоне» управляет отображением формы поиска гостиницы. Вёрстка модального окна обязательна (смотрите папку слоёв «search form»).
  • 3.14 Иконка календаря в поле ввода даты должна быть добавлена отдельным элементом для того, чтобы в будущем на неё программист мог повесить событие нажатия для открытия календаря с возможностью выбора даты.
  • 3.15 Блок карты — достаточная реализация — обычное изображение.

sedona-hotels.psd:

  • 3.16 Главное меню и футер совпадают с главной страницей.
  • 3.17 Фоновое фото другое (размытое и меньшей высоты), но также масштабируется на 100% ширины.
  • 3.18 Фильтр: верстать с помощью формы, кнопка «Показать» отвечает за отправку формы, при выключенном JavaScript должен осуществляться переход на отдельную страницу (отдельную страницу верстать не нужно).
  • 3.19 Блок «Стоимость в сутки» — при наведении на любой из маркеров появляется указатель cursor: pointer, делать маркеры подвижными не обязательно, цена меняться не должна.
  1. Дополнительные требования

sedona-index.psd:

  • 4.1 По умолчанию, форма поиска гостиницы должна быть открыта. При включённом JS, на форму вешается класс скрывающий её.
  • 4.2 Кнопка «Поиск гостиницы в Седоне» управляет отображением формы поиска гостиницы (смотрите папку слоёв «search form»), необходимо дополнить анимацией «выезда» сверху вниз.
  • 4.3 Блок карты — реализация по желанию — интерактивная карта, которая также масштабируется на 100% ширины.

sedona-hotels.psd:

  • 4.4 Фильтр: при выключенном JavaScript кнопка «Показать» должна осуществлять переход на отдельную страницу (отдельную страницу верстать не нужно).