Домашнее задание по теме CSS (3)

Сверстать макет согласно скриншотов:

• Для десктопа: https://br3t.github.io/fstk/hometask/task_4/img/layout_wide.png
• Для планшетов: https://br3t.github.io/fstk/hometask/task_4/img/layout_narrow.png
• Для мобильных телефонов: https://br3t.github.io/fstk/hometask/task_4/img/layout_mobile.png
• Видео с демонстрацией требований: https://youtu.be/tHFb_MUAhuI

Указания по выполнению задания

• Содержимое проекта: файл index.html, папки img и css. В папке css файлы wide.css, narrow.css и style.css (стили каждого layout в своем файле). В index.html подключается только style.css, остальные файлы стилей подключаются в style.css при помощи import.
• Адаптивно-резиновая верстка, контрольные точки 800px и 480px.
• Максимальная ширина макета 1024px.
• Основная палитра цветов из Material Design (Light Green): #33691E; #689F38; #AED581; #F1F8E9;
• Используемые шрифты: "Exo 2" и "FontAwesome" ("гамбургер" и кнопки соцсетей). Подключать через CDN.
• Размер базового шрифта задается в body, для элементов размер шрифта задается в em.
• Изменение фона элементов главного меню происходит с transition.
• При наведении на основное изображение происходит его увеличение (transform) с transition.
• При наведении на дополнительные изображения они становятся цветными.
• При наведении на ссылки в сайдбаре они подчеркиваются.
• При клике на кнопку "Купить" изменяется её тень. Фон у кнопки в виде градиента.
• Для блока "Также покупают" добавлена анимация: каждый из элементов последовательно подсвечивается (background). Анимация только на "десктоп"-размере.