Карточка с нуля
Пора собрать весь урок вместе. Между карточками Оскара и Беллы мы добавили карточку Дейзи, ласковой белой кошки, но без единого класса: стилизовать её будете вы сами. Сделайте её похожей на карточку Оскара. Заглядывать в его классы можно, когда понадобится, но сначала попробуйте вспомнить, что нужно каждой части.
Карточка Дейзи устроена так же, как у Оскара: div с id daisy — это карточка, а внутри неё картинка и ещё один div с текстами и кнопкой. Проверки смотрят на результат, а не на конкретные классы, поэтому размеры и оттенки можно выбирать самим.
Напомним, из чего состоит карточка: фон и рамка, которые выделяют её на странице (bg-white, border, rounded-*, shadow-*), картинка, обрезанная по форме (w-full, aspect-* или h-*, object-cover) и скруглённая вместе с карточкой (overflow-hidden), и тексты с достаточным пространством вокруг (p-*, mt-*).
Страница становится длинной: прокрутите превью вниз, чтобы увидеть карточку Дейзи.
Задание
- 1
Задайте карточке Дейзи белый фон и такую же максимальную ширину, как у карточки Оскара, отцентрируйте её и добавьте внешний отступ сверху, чтобы она не касалась карточки Оскара (
mx-auto mt-6 max-w-sm bg-white). - 2
Добавьте карточке светлую рамку, скруглённые углы и тень и позаботьтесь о том, чтобы картинка скруглялась вместе с ней.
- 3
Сделайте так, чтобы картинка занимала всю ширину карточки, и задайте ей форму, например такую же, как у Оскара, без искажений.
- 4
Задайте
divс текстами внутренний отступ и оформите тексты как у Оскара: крупное жирное имя, строка поменьше серого цвета с возрастом и внешний отступ над описанием. (Цветная линия рядом с описанием — на ваше усмотрение.) - 5
И наконец кнопка: во всю ширину текстов карточки, оранжевая с белым текстом, со скруглёнными углами и отступом сверху.