Stage 6: Polish & Shadows

UNIT

STEP 1

Review: Typography is Set

Your cards now have styled headings, readable paragraph text, and your real content. In this stage, we're adding the final finishing touches that professional web designers use to make cards feel polished: shadows, borders, and spacing refinements.

✨ The "One More Thing" Stage

Stage 6 is where good designs become great ones. These small additions - shadows, subtle color accents - are what separate a beginner project from something that looks professionally built.

STEP 2

Add box-shadow to Cards

box-shadow adds a soft shadow underneath an element, making it appear to "float" above the page. It's how you make cards look 3D and clickable.

No shadowbox-shadow: none

Soft0 2px 8px

Strong0 8px 24px

👉 Add box-shadow to your .card rule: .card {
  background-color: white;
  border-radius: 8px;
  width: 320px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

box-shadow takes four values in a specific order:

0 (horizontal offset) - how far the shadow shifts left or right. Zero keeps it centered directly beneath the card.
4px (vertical offset) - how far the shadow shifts downward. A positive number pushes the shadow below the card, making it look like light is coming from above - the most natural direction.
12px (blur radius) - how soft or sharp the shadow edge is. A small number (like 2px) creates a tight, sharp shadow. A larger number (like 12px) creates a soft, diffused glow. Soft shadows feel more realistic and modern.
rgba(0,0,0,0.12) (color + opacity) - rgba is like rgb but with a fourth value for transparency, from 0 (invisible) to 1 (fully opaque). 0.12 is very light - just a whisper of shadow - which looks elegant against a light page.

STEP 3

Add a Top Color Border to Cards

A colored top border gives each card a bold accent line that ties back to your color palette. The border-top shorthand takes three values: thickness (4px - solid enough to be visible but not heavy), style (solid - a continuous line, as opposed to dashed or dotted), and color (your hex code). Because it only applies to the top edge, not all four sides, the card gets a subtle pop of color without feeling boxed in.

border-top: 4px solid #50586C

border-top: 4px solid #ec65f8

👉 Add this to your .card rule: border-top: 4px solid #50586C;

🎨 Match Your Colors

Try #ec65f8 for a pink top border, or pick any hex color. Some designers give each card a different accent color - try that by adding the rule directly to each <section> with an inline style.

STEP 4

Style the Page Footer

Add a simple footer to the page - beneath the <main> element - so the page has a clean ending.

👉 Add this HTML after your closing </main> tag: <footer>
<p>Created by [Your Name] • Relentless Feather • 2026</p>
</footer>

👉 Add this CSS rule: footer {
  background-color: #50586C;
  color: #f9f7f8;
  padding: 20px;
  font-size: 14px;
}

background-color: #50586C - the same dark blue-gray as your header. Using the same color at the top and bottom of the page "bookends" the design and makes it feel finished and intentional.
color: #f9f7f8 - the same warm near-white as your h1. Light text on a dark background - your footer matches the header's text treatment for consistency.
padding: 20px - same padding as the header, so both ends of the page have matching breathing room.
font-size: 14px - slightly smaller than body text, which signals that this is a secondary line of information - a credit line, not main content.

STEP 5

Final Color Review

Before Stage 7, take a few minutes to review every color on your page and make sure it feels like you:

Page background - does it feel right?
Header background + h1 color - do they contrast well?
h4 accent color - is it a color you love?
Card border-top color - does it match the rest?
Box shadow - is it subtle or bold?

/* Your complete CSS should have these rules: */
body { } header { } h1 { }
h2 { } h4 { } p { }
.container { } .card { }
.image-box { } .image-box img { }
.card-author { } footer { }

STEP 6

Make It Your Own!

This is your last chance to experiment before the final stage:

Try a stronger shadow: 0 8px 24px rgba(0,0,0,0.2)
Give each card its own unique border-top color using inline styles
Add letter-spacing: 1px to the footer text for a refined look
Try opacity: 0.9 on the header rule - subtle but classy

🌟 Stage 6 Complete!

One more stage to go! In Stage 7, you'll do a final review of everything you've built, learn a few CSS comments tricks, and celebrate completing Unit 2!

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;
    }
    h2 {
      color: #50586C;
      font-size: 20px;
      margin-top: 0;
    }
    h4 {
      color: #ec65f8;
      font-size: 18px;
    }
    p {
      color: #555;
      font-size: 15px;
      line-height: 1.6;
    }
    .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;
    }
    .image-box {
      height: 180px;
      overflow: hidden;
      background-color: #DCE2F0;
      border-radius: 6px;
      margin-bottom: 16px;
    }
    .image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .card-author {
      font-size: 13px;
      color: #ec65f8;
      font-style: italic;
      margin-top: 12px;
    }
  </style>
</head>
<body>

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

<main class="container">
    <section class="card">
      <div class="image-box">
        <img src="https://picsum.photos/seed/tech/320/180" alt="My future in tech">
      </div>
      <h2>My Future in Tech</h2>
      <p>I want to learn how to build apps that help my community stay connected to our language and culture.</p>
      <p class="card-author">- [Your Name]</p>
    </section>

<section class="card">
      <div class="image-box">
        <img src="https://picsum.photos/seed/code/320/180" alt="When I learn to code">
      </div>
      <h2>When I Learn to Code</h2>
      <p>When I learn to code, I see myself building websites for Tribal businesses and nonprofits.</p>
      <p class="card-author">- [Your Name]</p>
    </section>

<section class="card">
      <div class="image-box">
        <img src="https://picsum.photos/seed/community/320/180" alt="Helping my community">
      </div>
      <h2>Helping My Community</h2>
      <p>I want to use technology to help preserve our language and make services easier for elders.</p>
      <p class="card-author">- [Your Name]</p>
    </section>
  </main>

</body>
</html>

Live Preview