Skip to content

Latest commit

 

History

History
53 lines (40 loc) · 6.21 KB

Specification.md

File metadata and controls

53 lines (40 loc) · 6.21 KB
Raw

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

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

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

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

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

  • С макетом предоставлен иконочный шрифт, сгенерированный автоматически. Демонстрацию работы иконок можно посмотреть в файле symbols-sedona/demo.html.
  • В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены синим цветом.
  • Макеты верстаются постепенно, не нужно сразу выполнять все требования.

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

Все макеты:

  • Контентная область центрируется и не может быть уже макетной ширины. – Внутренние отступы слева и справа для главного меню и для внутренней страницы — по 6% от ширины всей контентной области.
  • Логотип — это ссылка на главную страницу.
  • Главное меню: четыре ячейки по 20% ширины. Для первых двух пунктов выравнивание по левому краю, для двух последних — по правому.
  • Ссылки в главном меню: кликабельным должен быть только текст.
  • При достижении 1200px сетка перестаёт масштабироваться дальше, и слева и справа от неё появляется серый фон, на который сайт бросает лёгкую тень.
  • В трёх блоках футера контент расположен по центру.

sedona-index.psd:

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

sedona-hotels.psd:

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