phil9l/markup-task-4

Задача «Про котиков»

Задача «Про котиков»

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

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

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

⚠️ Задание необходимо решить без использования JS и flex/grid (если вы знаете, что это)

У моей бабуленьки очень много котиков (=^･ｪ･^=), но бабуленька уже в возрасте, и ей тяжело. Нужно помочь ей найти котикам новый дом. Что справится с этой задачей лучше, чем сайт, где можно подобрать себе идеального котика, без регистрации и смс?

Сайт должен выглядеть примерно так:

Этот макет демонстрирует поведение блоков-карточек котиков. При растягивании экрана количество вмещаемых в строку котиков увеличивается, при уменьшении, соответственно, уменьшается.

Плюс должна быть возможность посмотреть на котиков в виде списка, с более полной информацией о каждом из них:

Будет любезно с вашей стороны помочь бабуленьке сверстать сайт по этим макетам. Только не забывайте, что сайт о котиках (=｀ω´=), а значит нужно найти картинки с котиками и информацию о них (не меньше 10 котиков).

Каждая карточка должна содержать фоточку и некоторую информацию о котике:

• Имя котика (ссылка)
• Краткое описание котика (для плиток)
• Подробное описание котика (для списка)

Также от вас требуется:

• Обрезать длинные имена котиков (=^ ◡ ^=)
• Реализовать переключатель вывода котиков: плитками или списком
• Реализовать эффекты при наведении на имя котика, фото, категорию, и плитку в целом
• Фоточки котиков в плитках должны быть одного размера, чтобы блоки выглядели аккуратно <(￣︶￣)>