Сверстать 2 страницы

Доброе утро, нужно сверстать 2 страницы. 

Страницы должны быть адаптивные (макеты приложу: sm как должно выглядеть на мобилках, десктоп lg, также есть макеты на планшет) на всех разрешениях сайт должен отображаться правильно. Элементы не должны разъезжаться или выглядеть не так как на макетах. Верстка должна быть пиксель перфект или очень близко к этому.

Под размером sm понимается вид на всех актуальных мобильных устройствах

Под размером lg-xl десктоп версии сайта вплоть до разрешения fullhd

Ширину сайта (рабочей зоны) можно увеличивать до 1200px, если так будет лучше. Макеты делал не суперпрофессионал.

1.       1.“Популярные категории”, на главной странице, можно сверстать в четыре колонки одинакового размера, в два ряда

2.       При клике на кнопку “открыть промокод” должно всплывать диалоговое окно и в нем отображаться данные именно этого купона. Макет окна прилагаю. Диалоговое окно не должно выходить за ширину сайта на любых разрешениях.

3.       Текст на главной должен быть оформлен в виде аккордеона, то есть сворачиваться – разворачиваться по клике на иконку

4.       В футере после окна подписки должны быть 3 колонки (lg, md) и одна колонка на sm размерах

5.       Меню см. картинка “меню” должно быть анимированными и появляться слева направо

6.       В разделе меню – магазины и категории должны быть оформлены аккордеоном.

7.       При клике на неактивную область меню должно скрываться, анимацией справа налево

8.       При клике на неактивную область в модальном окне или на иконку закрытия окна, окно должно скрываться

9.       Для lg, md/ См. картинка “Категории десктоп планшет”, при наведении на выпадающий пункт меню (Категории, Магазины) должен появляться второй уровень меню и исчезать в течении 1 секунды, после покидания активной области курсором мыши

10.   На странице категории, элемент выставления рейтинга должен быть оформлен https://ruschema.org/AggregateRating

11.   Хлебные крошки не должны показываться на sm экранах

12.   Использовать только один h1. http://prntscr.com/k7xod6 не должны быть заголовками, оформить как span или другое.

13.   Поиск в хедере на маленьких экранах должна работать как тут https://utro.ru/promocode/shops/adidas

14.   Не использовать логотип и тексты из макета, изменить на рыбу и использовать другой логотип схожего размера.

15.   Иконки должны быть в svg

16.   http://prntscr.com/k994uo данная кнопка разворачивает/сворачивает весь текст, длиннее 2 строк.

17.   Размер лого должно быть статично одного размера http://prntscr.com/k995ed

18.   В верстке вставить несколько разных лого, любых магазинов для наглядности