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.

🎮 Try it: inside your existing .card rule, before the closing }, add box-shadow: 0 4px 12px rgba(0,0,0,0.12); and border-top: 4px solid #50586C; then press ▶ Run.

🤔 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.

🎮 Try it: add a footer rule with background-color: #50586C;, color: #f9f7f8;, padding: 20px;, and font-size: 14px; then Run.

✓ 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