Unit 2 · Stage 4

Image Boxes

We added an image box to each card. Right now the pictures spill out and look messy. You will style the boxes so every image fits its space perfectly. (pause on a highlighted word to see what it does)

1 Give each image a box

Each card now has a <div class="image-box"> at the top with an image inside. You will size that box and hide anything that spills past its edges.

Native youth in tech: these are placeholder photos for now. Later you can swap them for images of your community, your land, or your own art.

2 The image-box rule

A few properties shape the box that holds each picture.

What this code means

height: How tall the box is. 180px keeps every card's image the same size.
overflow: hidden trims anything that sticks out past the box, so images never spill over.
border-radius: Rounds the box corners to match the card.
margin-bottom: Space under the box, between the image and the heading below it.

🎮 Try it: add an .image-box rule with height: 180px;, overflow: hidden;, background-color: #DCE2F0;, border-radius: 6px;, and margin-bottom: 16px; then press ▶ Run.

🤔 Quick check before you go on

What object-fit value fills the box and crops the extra? Type it, then press Submit to unlock the next steps.

3 Make the image fill the box

Now style the image itself so it fills its box neatly, no matter its shape.

What this code means

width and height: Set both to 100% so the image stretches to fill its box.
object-fit: cover fills the whole box and neatly crops the extra, so the image never looks squished.

🎮 Try it: add an .image-box img rule with width: 100%;, height: 100%;, and object-fit: cover; then Run.

4 Make it yours

The photos come from a free placeholder service. When you are ready, you can change the web address inside each <img> tag to any image you want.

🎨 Try it later: swap a picsum web address for a photo that means something to you, then Run to see it appear in the card.

✓ Finish this stage

To complete Stage 4, your images need object-fit: cover and your .image-box needs overflow: hidden. Press Check my work when you are ready. This opens Stage 5 and lets your teacher see that you finished.

YOUR CODE

PREVIEW