/markup-task-4

Задача «Мяндекс.Муррркет»

Primary LanguageHTML

Задача «Мяндекс.Муррркет»

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

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

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

У моей бабуленьки очень много котиков (=^・ェ・^=), обычно она как-то «справлялась» с этим, но потом доброта взяла верх: она подошла к внучку с просьбой помочь. И так как «яжпрограмист», я предложил ей запустить интернет-магазин добрых котиков.

Название-то нашлось сразу – «Мяндекс.Муррркет». А вот с вёрсткой проблемы, да и дизайнера нет. Макеты дизайна я решил взять с одного известного магазина (картинки кликабельны).

На среднем экране:

На большом:

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

Плюс возможность посмотреть в виде списка:

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

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

  • Имя котика (ссылка)
  • Категория котика (понятия не имеем что это)
  • Уровень доброты котика по 5-бальной шкале (как звёздочки на макетах)
  • Стоимость котика (и старая стоимость, если она есть)
  • Описание котика

От вас дополнительно требуется:

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

Дополнительное задание (+54 к мурчанию)

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

Внимательные верстальщики заметили, что в макете используется интересное выравнивание по нижней линии фоточки котика <( ̄︶ ̄)> . То есть все карточки выровнены так, что нижние границы их изображений находятся на одной линии друг относительно друга. Будет здорово, если вы реализуете и это поведение.

А еще будет ощутимо фантастически, если вы сможете научить шкалу доброты работать так: при наведении курсора на шкалу, пользователь выбирает количество звезд, которые он хочет поставить (обратите внимание, что есть оценка в ползвезды), а по клику шкала запоминает его оценку.