🆘 Как создать Pull Request
Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.
Прежде чем отправлять решение, проверьте его на соответствие требованиям к HTML коду
и требованиям к CSS.
Когда вы создадите или обновите пулл-реквест, он частично будет проверен автоматически. Результаты вы увидите внизу:
Если всё хорошо:
Если всё плохо:
Проверить HTML и CSS можно и вручную:
# Устанавливаем проверяльщик
npm install
# Проверяем
npm test
# В результате выведутся ошибки, если они есть.
# Если какие-либо ошибки будут не понятны – смело спрашиваем у ментора.В помощь вам мы разместили файл .editorconfig. Этот файл содержит базовые
правила оформления кода (codestyle), понятные для большинства редакторов.
Прочитайте о нём подробнее.
У моей бабуленьки очень много котиков (=^･ｪ･^=), обычно она как-то «справлялась» с этим, но потом доброта взяла верх: она подошла к внучку с просьбой помочь. И так как «яжпрограмист», я предложил ей запустить интернет-магазин добрых котиков.
Название-то нашлось сразу – «Мяндекс.Муррркет». А вот с вёрсткой проблемы, да и дизайнера нет. Макеты дизайна я решил взять с одного известного магазина (картинки кликабельны).
На среднем экране:
На большом:
Эти макеты демонстрируют поведение блоков-карточек котиков. При растягивании экрана количество вмещаемых в строку котиков увеличивается, при уменьшении, соответственно, уменьшается.
Плюс возможность посмотреть в виде списка:
Будет любезно с вашей стороны помочь бабуленьке сверстать магазинчик по этим макетам. Только не забывайте, что магазин о котиках (=｀ω´=), а значит нужно найти картинки с котиками и информацию о них (не меньше 10 котиков).
Карточка должна содержать фоточку и некоторую информацию о котике:
- Имя котика (ссылка)
- Категория котика (понятия не имеем что это)
- Уровень доброты котика по 5-бальной шкале (как звёздочки на макетах)
- Стоимость котика (и старая стоимость, если она есть)
- Описание котика
От вас дополнительно требуется:
- Обрезать длинные имена котиков (=^ ◡ ^=)
- Реализовать переключатель вывода котиков: плитками или списком
- Реализовать эффекты при наведении на имя котика, фото, категорию, и плитку в целом
Внимательные верстальщики заметили, что в макете используется интересное выравнивание по нижней линии фоточки котика <(￣︶￣)> . То есть все карточки выровнены так, что нижние границы их изображений находятся на одной линии друг относительно друга. Будет здорово, если вы реализуете и это поведение.
А еще будет ощутимо фантастически, если вы сможете научить шкалу доброты работать так: при наведении курсора на шкалу, пользователь выбирает количество звезд, которые он хочет поставить (обратите внимание, что есть оценка в ползвезды), а по клику шкала запоминает его оценку.
