The Most Popular Plan

Most people choose Daily care, and the page should say so. We've added a label to its card: a span with the class badge, whose look is already in style.css. The card also has a new class, popular.

The label sits on the top edge of the card, partly above the card and partly in it, in the right half of the card. It takes up no space in the card, so the heading and the rest of the content are where they are in the other cards.

The whole card is also 8px higher than the others, so that it stands out. The other cards don't move.

The finished page looks like this (smaller):

A tip: in the lesson Display and Position, you put an element in the corner of another element. The same property can move the card itself, too.

That's the whole project. You've laid out a whole page: a navigation bar, cards that adapt to the width of the screen, buttons aligned at the bottom and a label exactly where it belongs. In the next lesson, CSS Grid, you'll learn to lay out elements in rows and columns at once.