Footer & Polish

Almost There - Time to Polish

Your newspaper has a masthead, a hero image with overlay text, and three styled article cards. In this stage you'll finish the footer, tighten up a few CSS details, and give the page that final professional feel.

Fill In the Footer HTML

Real newspaper footers show the publication website and the author's name. Update your empty <footer>:

Style the Footer

The footer should look like the mirror of the masthead - a top border that echoes the header's bottom border, with the website on the left and your name on the right using Flexbox.

• margin-top: 20px - adds a gap between the last article card and the footer, so the page doesn't feel crowded at the bottom.
• border-top: 1px solid black - draws a thin black line across the top of the footer. This is the mirror of the header's thick bottom border: the masthead is bookended by a bold 3px line, the footer by a quieter 1px line. Thinner at the bottom signals "end of content" without competing with the masthead for attention.
• display: flex - arranges the website URL and the author name side by side in a row.
• justify-content: space-between - pushes the website URL to the far left and the author credit to the far right - the same layout as the date and issue number in the masthead. This symmetry at both ends of the page creates a sense of structure.
• padding: 10px 20px - shorthand for 10px top/bottom, 20px left/right. A smaller padding than the header (which uses 30px) because the footer is secondary information - it should feel lighter and less prominent.
• margin: 0 on footer p and footer h4 - removes the default vertical spacing browsers add above and below headings and paragraphs. In a Flexbox footer row, you want the text sitting flat without extra gaps pushing items up or down.

Add a Divider Between Hero and Articles

To visually separate the hero section from the article cards, add a thin horizontal rule using an <hr> tag between them in the HTML. (You learned this element back in Unit 1!)

The inline style on the <hr> limits its width to match the article container so it doesn't stretch edge to edge. The three properties work together: max-width: 1000px caps the line at the same width as the hero image; margin: 0 auto centers it horizontally; and border-color: #ccc makes the line light gray instead of the default dark color - subtle enough to be a visual separator without being a visual interruption.

Final Content Check

Before Stage 7, go through every part of your page and replace all placeholder text:

• ✅ <title> - your newspaper's real name
• ✅ <h1> - same real name in the masthead
• ✅ Date and Issue number in .header-info
• ✅ Hero overlay text - a real front-page caption
• ✅ Photo credit - your name or a real source
• ✅ All three article <h2> headlines - real stories
• ✅ All three article <p> bodies - real writing
• ✅ Footer website URL and your name

Make It Your Own!

• Try font-family: Georgia, serif on h1 - classic newspaper look
• Try letter-spacing: 2px; text-transform: uppercase on h1 for a bold masthead feel
• Change the header background-color to your Tribal nation's colors
• Try adding border-bottom: 3px solid black to the header info row
• Experiment with the overlay: try a dark background with white text