Stage 4: Image Boxes

UNIT

STEP 1

Review: Three Cards, Side by Side

Your Flexbox layout is working - three white cards sit side by side. Now we want to add a visual image area to the top of each card, so you can eventually drop in your own photos or artwork.

In this stage, you'll add a <div class="image-box"> inside each card and style it with CSS.

🔢 Reminder: Two-Value Shorthand

From Stage 3, your .container uses padding: 40px 20px. When padding has two numbers, the first number sets the top and bottom (40px each side), and the second number sets the left and right (20px each side). It's a shortcut so you don't have to write four separate values!

STEP 2

Add Image Boxes to Your HTML

Inside each <section class="card">, add a <div class="image-box"> before the <h2>. Do this for all three cards.

// 👉 Update each card to look like this: <section class="card">
  <div class="image-box"></div>
  <h2>My Future in Tech</h2>
  <p>I want to learn everything...</p>
</section>

Add the <div class="image-box"></div> line to all three cards. Right now the div is empty - when you add the CSS in Step 3, it will turn into a visible colored box at the top of each card.

STEP 3

Style the .image-box

Now let's give that empty div some size and color so it becomes a visible, fixed-height box.

// 👉 Add this CSS rule after your .card rule: .image-box {
  height: 180px;
  overflow: hidden;
  background-color: #DCE2F0;
  border-radius: 6px;
  margin-bottom: 16px;
}

Here's what each line does and why:

height: 180px - sets a fixed height of 180 pixels. Without this, an empty <div> has zero height and would be completely invisible. The px stands for pixels - the tiny dots that make up your screen.
overflow: hidden - think of the image-box like a picture frame. If the photo is bigger than the frame, overflow: hidden clips it so only what fits inside shows. Without it, the image would spill out past the edges of the box.
background-color: #DCE2F0 - a soft blue-grey placeholder. Before any image is loaded, you'll see this color fill the box so you know the space is there. Once you add an image, it will cover this color completely.
border-radius: 6px - softens the corners of the image-box. Your card already has border-radius: 8px, so using 6px here makes the image-box sit just inside the card's rounded corners - a little less round so it doesn't look like it's breaking out of the card.
margin-bottom: 16px - adds 16 pixels of space below the image box, so the heading underneath has room to breathe. Think of margin like personal space around an element - it pushes other elements away.

STEP 4

Add an Image Tag

Let's put an actual image inside the first card's image-box. For now, use a free placeholder image from the web.

// 👉 Update the first card's image-box like this: <div class="image-box">
<img src="https://picsum.photos/seed/tech/320/180" alt="Tech image">
</div>

picsum.photos is a free service that gives you random placeholder photos. The two numbers at the end (320/180) set the image width and height in pixels - 320 wide, 180 tall. The word after seed/ is just a label that picks a specific random photo - change it to anything you like.

📸 Your Own Images

Later, you can swap the src value for a photo that's meaningful to you - your community, your art, your land. The image-box will hold whatever you give it.

STEP 5

Style the Image with object-fit

Right now the image might not fill the box perfectly - it could be the wrong size or leave white gaps. object-fit: cover fixes that by making the image fill its container completely, without stretching or squishing.

// 👉 Add this CSS rule after .image-box: .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Notice the selector .image-box img - that space between the two words means "any img that is inside a .image-box." This keeps your style from affecting images elsewhere on the page.

Image fills box, cropped to fit

object-fit: cover ✓

Image squeezed / stretched

no object-fit ✗

object-fit: cover is like choosing "Fill" when you set a desktop wallpaper - the image fills the whole frame and any overflow is hidden outside the edges.

STEP 6

Make It Your Own!

Add images to all three cards, then experiment:

Try different picsum seeds: picsum.photos/seed/nature/320/180 or picsum.photos/seed/river/320/180
Change height: 180px to 220px - how does a taller box feel?
Give each card a different image that represents its topic
Try changing the placeholder background-color to a color from your Tribal nation's palette

🌟 Stage 4 Complete!

You've added image boxes with controlled sizing using object-fit: cover. In Stage 5, we'll style the text inside the cards - headings, paragraphs, and typography!

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>This Is Me In Tech</title>
  <style>
    body {
      background-color: #DCE2F0;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    header {
      background-color: #50586C;
      padding: 20px;
    }
    h1 {
      font-size: 50px;
      color: #f9f7f8;
      font-weight: bold;
    }
    h4 {
      color: #ec65f8;
      font-size: 18px;
    }
    .container {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      padding: 40px 20px;
    }
    .card {
      background-color: white;
      border-radius: 8px;
      width: 320px;
      padding: 20px;
      text-align: left;
    }
  </style>
</head>
<body>

<header>
    <h1>This Is Me In Tech</h1>
    <h4>[Your Name] • Relentless Feather</h4>
  </header>

<main class="container">
    <section class="card">
      <h2>My Future in Tech</h2>
      <p>I want to learn everything about technology...</p>
    </section>

<section class="card">
      <h2>When I Learn to Code</h2>
      <p>When I learn to code, I can see myself...</p>
    </section>

<section class="card">
      <h2>Helping My Community</h2>
      <p>I want to use my skills to help...</p>
    </section>
  </main>

</body>
</html>

Live Preview