ArtyMgn / webdev-task-4

Задача «Тим слишком занят»

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Задача «Тим слишком занят»

Перед выполнением задания внимательно прочитайте:

Основное задание

⚠️ Задание необходимо решить без использования внешних библиотек

Билли вернулся из путешествия и привез с собой сувениры. Слишком много сувениров... Поэтому он решил продать все это добро, а чтобы ускорить процесс ему пришла в голову идея создать интернет магазин "Билли.Маркет".

В своих путешествиях Билли заметил, что окружающие его люди не выпускают из рук свои телефоны. Поэтому он решил, что его магазин будет удобен для использования на всевозможных устройствах. Билли подумал: "Кто разбирается в мобилках лучше, чем Тим, мой старый друг!" Билли решил обратиться за помощью к нему. Но Тим слишком занят своим проектом "XI" и поэтому Билли просит вас помочь.

Требования

На странице присутствует пять основных блоков: шапка, навигация, список популярных сувениров, блок с карточками предлагаемых сувениров и форма заказа сувенира. В шапке расположены логотип Билли.Маркета и поле для ввода поискового запроса. На макетах представлено расположение этих блоков на десктопах, планшетах и мобильных устройствах.

На десктопах (большой экран):
  • Содержимое сервиса разбито на три колонки
  • Блок предлагаемых сувениров и форма заказа расположены в центральной колонке, меню - в левой, а список популярных сувениров - в правой
На планшетах (средний экран):
  • Поле для ввода поискового запроса появляется при нажатии на иконку "Поиск", а при потере фокуса пропадает
  • Меню сервиса расположено над блоком с предлагаемыми сувенирами
  • Список популярных сувениров смещен под блок с сувенирами
  • Форма заказа сувенира находится внизу страницы
  • Меню, список предлагаемых сувениров и список популярных сувениров растянуты на ширину экрана
  • Допускается наличие отступов от края экрана
На мобильных устройствах (маленький экран):
  • В шапке находится логотип сервиса и "бутерброд"
  • Список популярных сувениров находится над блоком с предлагаемыми сувенирами
  • Карточки предлагаемых сувениров расположены в одну колонку
  • После карточек предлагаемых сувениров нужно разместить форму заказа сувенира
  • Меню появляется в двух случаях:
    • при нажатии на "бутерброд"
    • при свайпе справа налево
  • Меню имеет фиксированное расположение
  • При открытом меню содержимое страницы не скроллится
  • Список популярных сувениров и блок с предлагаемыми сувенирами растянуты на ширину экрана (Отступы с краев допускаются)
  • Поиск должен находиться в шапке, под логотипом магазина

Timothy

About

Задача «Тим слишком занят»


Languages

Language:CSS 46.1%Language:HTML 38.7%Language:JavaScript 15.2%