The Cat Cards

The header and the hero are ready. In the editor, you'll find our version; if you copied your own, paste it over ours. Now comes the most important part of the page: the cats.

The section Our Cats (id="cats") has a heading and a div with four cards. Each card is an article with a picture and a div with the name, the age, the description and the button. Oscar's card also has a span with the badge "New". A few reminders from the earlier lessons:

• Columns for each width. Classes without a prefix apply at every width, sm: from 640 px, md: from 768 px and lg: from 1024 px up. One column for phones, two for tablets and four for computers: grid gap-6 sm:grid-cols-2 lg:grid-cols-4.
• Cropped pictures. object-cover makes the picture fill its box and cuts off what doesn't fit, so that the cat isn't squashed. The box needs a size: w-full and a ratio (aspect-video, aspect-square) or a fixed height (h-48). A ratio crops the picture the same way at every width.
• Rounded corners. When a card has rounded corners and the picture reaches its edges, the square corners of the picture stick out. overflow-hidden on the card cuts them off.
• A badge on the picture. The card gets relative, and the badge absolute and a position such as top-3 left-3, measured from the corner of the card.
• Buttons at the same height. The descriptions aren't equally long, so the buttons would end up at different heights. Make the card and its div flex columns (flex flex-col), let the div fill the rest of the card (flex-1), and let the description grow too (flex-1): it pushes the button down to the bottom.

Switch the preview to 375, 768 and 1280 px now and then: the grid should have one, two and four columns.

The checks can't move the mouse over a button, so for hover: (and for focus: in the next exercise), they look at the classes in the HTML. If you make your own class for the buttons with @apply, as in the previous lesson, keep the hover: class in the HTML anyway.