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

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

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

Благодаря «Мяндекс.Муррркет» бабуленькины котятки продаются на ура! Всё больше людей приобретают маленькие пушистые комочки тепла и уюта в свои дома.

Настало время улучшить наш интернет-магазин и сверстать к нему красивую «витрину».

На макете слева выводится меню по породам котиков, по центру – карточки котиков, а справа рейтинг пород котиков (породы выводятся по алфавиту).

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

Фотки котиков должны располагаться строго по шаблону, указанному в макете. (если фоток больше 8, то шаблон повторяется).

Левая колонка с меню всегда подстраивается под высоту контейнера с фотками, а правая (рейтинг) - по контенту внтури нее.

Для вёрстки необходимо использовать Flex!

Помимо вёрстки, давайте обогатим макет следующими возможностями:

• Возможость сортировки рейтинга по убыванию баллов при помощи чекбокса
• Возможность выбрать породу в меню и отфильтровать котиков только этой породы
• По наведению на фотку котика, выводить плашку с именем и возрастом котика
• Цвет рейтинга должен зависеть от его значения

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

Если гибкие коробки вам по плечу, то вы наверняка сможете реализовать всё при помощи CSS3 Grid.

⚠️ При написании этого задания, ни один котик не остался без молочка.