The Winner

Voting is over, and Sunday Nap, Anna's photo, has won! We've added a badge for it: a span at the start of its card. For now, the badge is in the way: it pushes the photo down.

• The winning card stands out: its border is at least 2 px wide and has another color than the borders of the other cards, for example amber.
• The 🏆 Winner badge sits over the photo, in the top left corner of the card, 12 px from its top and left edges. The photo starts at the top of the card again, as if the badge weren't there.
• Eva has withdrawn her photo, Snow Queen, from the contest. Its card is faded, to at most 60% opacity, so that you can still see it, but it no longer draws attention. The other cards stay as they are.

A tip: remember the "New" badge on Oscar's card in the lesson on flexbox, grid and position: the badge needs a position, and so does the element that its offsets are measured from.

That's the whole gallery. With what you've learned in the last two lessons, you've turned plain photos into cards with borders, rounded corners and shadows, laid them out in a grid and put a badge right where you wanted it. In the next lesson, Hover, Focus and Other States, you'll make buttons like the vote button react when the mouse pointer is over them or when they're clicked.