evilPaprika / markup-task-4

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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

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

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

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

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

Плитки

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

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

Список

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

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

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

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

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

About

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


Languages

Language:HTML 87.7%Language:CSS 12.3%