Unit 2 · Stage 6

Polish and Shadows

Your profile works. Now add the polish that makes it look professional: a soft shadow to lift the cards, a color accent on top, and a footer to close the page. (pause on a highlighted word to see what it does)

1 Lift the cards with a shadow

Two finishing touches make a card look like it floats: a soft drop shadow, and a colored strip across the top.

What this code means

box-shadow: A soft shadow behind the card. The numbers set how far it drops and how blurry it is, and the last value is a faint black.
border-top: A colored line across the top edge of the card. 4px solid #50586C matches your header.

✍️ Inside your existing .card rule, just before its closing }, add the two lines below. Not sure how it should look? Use the example below, then press ▶ Run.

box-shadow: 0 4px 12px rgba(0,0,0,0.12);
border-top: 4px solid #50586C;

🤔 Quick check before you go on

What property adds a soft shadow under a box? Type it, then press Submit to unlock the next steps.

2 Add a footer

We added a <footer> to the bottom of your HTML. Style it to match your header so the page feels complete, top and bottom.

What this code means

background-color and color: The same dark slate and near-white as your header, so the top and bottom of the page match.
padding: Space inside the footer so the text does not hug the edges.

Native youth in tech: a footer is where you claim the work. Your name, your Nation, the year. This page exists because you built it.

✍️ Add a footer rule at the end of your <style>, just above </style>. Use the example below if you need it, then press ▶ Run.

footer {
  background-color: #50586C;
  color: #f9f7f8;
  padding: 20px;
  font-size: 14px;
}

✓ Finish this stage

To complete Stage 6, your .card needs a box-shadow and you need a footer rule. Press Check my work when you are ready. This opens Stage 7 and lets your teacher see that you finished.

YOUR CODE

PREVIEW