The Photo Card

Time for another project! This checkpoint puts the last two lessons to work: borders, shadows and images, and the layout with flexbox, grid and position. As in the first checkpoint, the exercises describe the result, and the classes are up to you. Where the description doesn't give an exact size or color, choose your own.

The project. A cat magazine runs a photo contest, and its readers vote for the best photo. Over three exercises, you'll turn a photo into a card, lay out a gallery of cards and announce the winner. The colors and the text of the page are ready, so you can focus on the cards and the layout. As before, change only the classes, not the elements, and each exercise starts with a finished page from the previous one.

At the end, the top of the gallery will look like this:

🏆 Winner

Sunday Nap

📷 Anna♥ 128

Box Inspector

📷 Tom♥ 96

The photo card. In the editor, there's the first entry: an article with a photo and a div with the photo's title, the name of its author and a vote button with the number of votes. Make it a card:

• The card is white, with a light border (not in the dark color of the text), rounded corners and a shadow.
• The photo fills the whole width of the card and is a square. It isn't squashed: what doesn't fit into the square is cut off.
• The photo's top corners are rounded together with the card's, so they don't stick out.
• The vote button is a pill: its ends are half circles.