Задача к лекции «Flex» – «Бабуленькины котятки»

🆘 Как создать Pull Request
⚠️ Codestyle для HTML
⚠️ Codestyle для CSS
⚠️ При создании PullRequest'а не забудьте указать ваши имя и фамилию.

Общие требования

Мы очень хотим, чтобы код вы написали сами на чистом CSS и HTML, а не пользовались внешними библиотеками, пост и препроцессорами.

Прежде чем отправлять решение, проверьте его на соответствие требованиям к HTML коду
и требованиям к CSS.

Когда вы создадите или обновите пулл-реквест, он частично будет проверен автоматически. Результаты вы увидите внизу:

Если всё хорошо:

Если всё плохо:

Проверить HTML и CSS можно и вручную:

# Устанавливаем проверяльщик
npm install

# Проверяем
npm test

# В результате выведутся ошибки, если они есть.
# Если какие-либо ошибки будут не понятны – смело спрашиваем у ментора.

В помощь вам мы разместили файл .editorconfig. Этот файл содержит базовые правила оформления кода (codestyle), понятные для большинства редакторов. Прочитайте о нём подробнее.

Задача

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

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

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

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

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

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

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

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

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

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

Необязательное задание (+10 к гибкости)

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

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

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