Skip to content

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

Notifications You must be signed in to change notification settings

urfu-2016/markup-task-7

Repository files navigation

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

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

Основное задание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages