Skip to content

Latest commit

 

History

History
55 lines (42 loc) · 6.36 KB

Specification.md

File metadata and controls

55 lines (42 loc) · 6.36 KB
Raw

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

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

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

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

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

  • В макетах есть скрытые слои с всплывающими окнами. Такие слои в блоке слоёв фотошопа выделены красным цветом.
  • Макеты верстаются постепенно, не нужно сразу выполнять все требования.

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

Все макеты:

  • Контентная область центрируется и не может быть уже макетной ширины. – Внутренние отступы слева и справа для обоих страницы — по 2.3% от ширины всей контентной области.
  • Отступы между колонками сетки одинаковые — по 2.2% от ширины всей контентной области.
  • При достижении 1200px сетка перестаёт масштабироваться дальше.
  • Главное меню — при наведении на пункт меню «Каталог» появляется подменю (смотрите папку слоёв «Ховеры» в gllacy-index.psd).
  • Главное меню — пункт подменю «Сливочное» должен вести на внутреннюю страницу (gllacy-catalog.psd).
  • Шапка — при наведении на кнопку поиска появляется форма для ввода текста (смотрите папку слоёв «Ховеры» в gllacy-index.psd).
  • Шапка — при наведении на кнопку «Вход» появляется форма для авторизации (смотрите папку слоёв «Ховеры» в gllacy-index.psd).
  • Шапка — Если пользователь добавил что-то в корзину, соответствующий пункт в шапке страницы меняет цвет фона на белый. При наведении на этот пункт появляется форма с товарами (смотрите папку слоёв «Ховеры» в gllacy-index.psd).
  • Если пользователь сделал закладку или добавил что-то в корзину, соответствующий пункт в главной навигации меняет цвет фона на красный

gllacy-index.psd:

  • Логотип не является ссылкой.
  • Карусель под шапкой страницы: смена слайдов мгновенная, без промежуточных переходов. При смене слайдов происходит смена фонового цвета на всей странице (смотрите папку слоёв «Фон» в gllacy-index.psd).
  • Блок карты — достаточная реализация — обычное изображение.
  • Блок карты — реализация по желанию — интерактивная карта, которая также масштабируется на 100% ширины, на карте размещён маркер.
  • Блок карты — по клику на кнопку «форма обратной связи» возникает модальное окно с формой отправки сообщения (смотрите папку слоёв «Ховеры» в gllacy-index.psd), окно позиционируется относительно вьюпорта, а не страницы. При вводе текста в поле формы, «плейсхолдер» должен отобразиться над полем (смотрите папку слоёв «Фидбек» в styleguide.psd). Достаточно реализации с обычными плейсхолдерами.

gllacy-catalog.psd:

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