Задача «Бабуленькины котятки»
Перед выполнением задания внимательно прочитайте:
- О всех этапах проверки задания
- Как отправить пулл
- Как пройти тесты
- Правила оформления JavaScript, HTML и CSS кода
Основное задание
Задание необходимо решить без использования JS и с использованием Flex
Благодаря «Мяндекс.Муррркет» бабуленькины котятки продаются на ура! Всё больше людей приобретают маленькие пушистые комочки тепла и уюта в свои дома.
Настало время улучшить наш интернет-магазин и сверстать к нему красивую «витрину».
На макете слева выводится меню по породам котиков, по центру – карточки котиков, а справа рейтинг пород котиков (породы выводятся по алфавиту).
Подвал должен быть прибит к нижней границе окна браузера, если котики влезают в один экран.
Фотки котиков должны располагаться строго по шаблону, указанному в макете. (если фоток больше 8, то шаблон повторяется).
Левая колонка с меню всегда подстраивается под высоту контейнера с фотками, а правая (рейтинг) - по контенту внтури нее.
Для вёрстки необходимо использовать Flex!
Помимо вёрстки, давайте обогатим макет следующими возможностями:
- Возможость сортировки рейтинга по убыванию баллов при помощи чекбокса
- Возможность выбрать породу в меню и отфильтровать котиков только этой породы
- По наведению на фотку котика, выводить плашку с именем и возрастом котика
- Цвет рейтинга должен зависеть от его значения
Необязательное задание (+10 к гибкости)
Задание необходимо решить без использования JS и с использованием Flex
Если гибкие коробки вам по плечу, то вы наверняка сможете реализовать всё при помощи CSS3 Grid.
