kutemba0580 / markup-task-6

Задача «Мурмаркет для всех»

Задача «Мурмаркет для всех»

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

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

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

⚠️ Задание необходимо выполнить не используя JS, но используя flex и grid.

Благодаря нам многие котики уже нашли новый дом.

Но вот оставшиеся все никак не найдут своего человека. Бабуленька недавно прочитала про адаптивный дизайн и теперь думает, что все дело в том, что на многих мобильных девайсах наша верстка выглядит не очень.

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

Написать стили для различных устройств можно используя @media (для разных размеров экрана).

• За мобильные устройства взять диапазон от 375px до 730px;
• За планшеты - от 730px до 1200px;
• Все, что больше 1200px - считать за десктоп.

Ниже мы прикладываем три макета, как это должно выглядеть:

• для мобильных

• для планшетов

• для десктопов

Описание для десктопов:

• карточки котиков, размещенные в ряд, имеют одинаковую высоту.
• линия, разделяющая карточку, находится для всех карточек на одном уровне
• фотографии всегда одинакового размера
• если высота фото меньше, чем размер верхней части, она выравнивается по верхнему краю (+отступ)
• фильтр с указанием возраста просто свертстать
• фильтр по породам (можно выбрать только одну) должен работать: при выборе породы, карточки с котиками других пород перестают отображаться (или проявите свою фантазию и придумайте какое-нибудь более эффектное решение ;)

⚠️ Обратите внимание, что во всех вариантах футер выглядит по-разному