Unit 3 · Stage 6

Footer and Polish

Every edition closes with a footer. You will add one that matches the masthead, so your paper feels finished, top and bottom. (pause on a highlighted word to see what it does)

1 A footer to match the masthead

We added a <footer class="paper-footer"> at the bottom. Style it dark like the masthead, with the red line on top this time so the page is framed above and below.

What this code means

background-color and color: The same dark and cream tones as your masthead, tying the top and bottom together.
border-top: A line along the top edge. 5px solid #b8232f mirrors the red rule under your masthead.
padding and font-size: A little space inside and smaller text, the way fine print sits at the bottom of a real paper.

Native youth in tech: the footer names who made the paper. Put your name and your Nation there. This edition exists because you built it.

🎮 Try it: add a .paper-footer rule with background-color: #1a1a1a;, color: #cfc8bd;, text-align: center;, padding: 20px;, font-size: 14px;, and border-top: 5px solid #b8232f; then press ▶ Run.

🤔 Quick check before you go on

What property puts a colored line on just the top edge of a box? Type it, then press Submit to unlock the last step.

2 Step back and look

Scroll your preview from top to bottom: masthead, hero photo with a headline on it, three story cards, and a matching footer. That is a full editorial layout, and you built every piece.

🎨 Make it yours: the red #b8232f is one choice. Try a color from your Tribal Nation on both the masthead border and the footer border to brand your paper.

✓ Finish this stage

To complete Stage 6, your .paper-footer needs a background color and the red border-top. Press Check my work when you are ready. This opens Stage 7 and lets your teacher see that you finished.

YOUR CODE

PREVIEW