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

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

О всех этапах проверки задания
Как отправить пулл
Как пройти тесты
Правила оформления javascript, HTML и CSS кода

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

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

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

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

Требования

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

На десктопах (большой экран):

Содержимое сервиса разбито на три колонки
Блок предлагаемых сувениров и форма заказа расположены в центральной колонке, меню - в левой, а список популярных сувениров - в правой

На планшетах (средний экран):

Поле для ввода поискового запроса появляется при нажатии на иконку "Поиск", а при потере фокуса пропадает
Меню сервиса расположено над блоком с предлагаемыми сувенирами
Список популярных сувениров смещен под блок с сувенирами
Форма заказа сувенира находится внизу страницы
Меню, список предлагаемых сувениров и список популярных сувениров растянуты на ширину экрана
Допускается наличие отступов от края экрана

На мобильных устройствах (маленький экран):

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