Мы очень хотим, чтобы код вы написали сами, а не пользовались внешними библиотеками.
У моей бабуленьки очень много котиков (=^･ｪ･^=), но бабуленька уже в возрасте, и ей тяжело. Нужно помочь ей найти котикам новый дом. Что справится с этой задачей лучше, чем сайт, где можно подобрать себе идеального котика без регистрации и смс?
Сайт должен выглядеть примерно так:
Этот макет демонстрирует поведение блоков-карточек котиков. При растягивании экрана количество вмещаемых в строку котиков увеличивается, при уменьшении, соответственно, уменьшается.
Плюс должна быть возможность посмотреть на котиков в виде списка, с более полной информацией о каждом из них:
Будет любезно с вашей стороны помочь бабуленьке сверстать сайт по этим макетам. Только не забывайте, что сайт о котиках (=｀ ω´=), а значит нужно найти картинки с котиками и информацию о них (не меньше 10 котиков).
Каждая карточка должна содержать фоточку и некоторую информацию о котике:
- Имя котика (ссылка)
- Краткое описание котика (для плиток)
- Подробное описание котика (для списка)
Также от вас требуется:
- Обрезать длинные имена котиков (=^ ◡ ^=)
- Реализовать переключатель вывода котиков: плитками или списком
- Реализовать эффекты при наведении на имя котика, фото, категорию, и плитку в целом
- Фоточки котиков в плитках должны быть одного размера, чтобы блоки выглядели аккуратно <(￣︶￣)>
Приведенные макеты являются лишь рекомендацией и вам не нужно на 100% следовать им. Вы вольны проявить фантазию. Так что самое время применить знания по UI и UX, которые вы получили на первой лекции :)
Очень-очень жаль, что у нашего сайта нет названия. К тому же, мы совершенно не позаботились о том, чтобы рассказать, куда писать, если котик приглянулся.
Будьте добры, добавьте к существующему сайту шапку с названием и футер с контактами. Примерно так:
Размер текста в шапке: 32px, шрифт: PT SansNarrow
Размер текста в футере: 14px, цвет ссылок - #4c4cd8, шрифт - Arial
Условия:
- Шапка всегда должна отображаться сверху страницы, даже при скролле.
- При высоте страницы, меньшей, чем высота окна браузера, футер должен быть прибит к нижней части окна. При высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер должен находиться сразу после контента.
Перед тем, как запускать приведенные ниже команды, необходимо установить зависимости с помощью команды
npm install
Запускаются так: npm run <command>
| Команда | Действие |
|---|---|
| lint | Проверка кода линтером |
| lint:html | Линтинг HTML |
| lint:css | Линтинг CSS |
| format | Форматирование кода |