Footer and final touches

Finish off your website's look: a footer, small details that make a big impression, and a final check.

A footer closes out the page. It’s usually darker, calm, and stays at the bottom:

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

A footer should include: who made the website, the year, and contact info (feel free to make it up or use the school’s – never put your home address or phone number on a website).

Show me: small details that make you look like a pro

Three tiny things almost nobody knows about, yet they make a huge difference:

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) grows an element to 103% size, and transition says: “Make changes smoothly over 0.2 seconds.” Hover your mouse over a photo – see that gentle little lift? That’s exactly what modern websites do.

Your turn 💪

Style your footer following the example (feel free to match the color to your header) and check that it includes: who made the website + the year.
Add the three pro details from the example.
A big check of your whole website. Go through this checklist:
- The menu works from every page to every page.
- All images show up and have alt filled in.
- Shrink the window to phone width – everything fits, nothing overflows sideways.
- The footer has no home address, phone number, or full school/class info (safety!).
- The <title> makes sense on every page.

Complete footer solution (adjust the colors)

HTML (the same on every page):

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

Safety first: in the next lesson, your website is going onto the real internet, where anyone can see it. So it must never include: your exact home address, phone number, email, full school name with class, or any photos that you or the people in them wouldn’t be comfortable with. Go through the website with a parent and check it together.

✅

Check yourself: Your website has a header with a menu, content in a nice column, cards, photos, a footer – and things move gently when you hover over them. It looks like a real website. Because it is one! One last step remains: showing it to the world.

What to take away from this lesson

A footer: dark background, light text, text-align: center, margin-top.
transition + transform = smooth micro-animations, just like pro websites.
Always double-check your content through a parent’s eyes before publishing – personal information doesn’t belong on the internet.

Show me: a footer

Show me: small details that make you look like a pro

Your turn 💪

What to take away from this lesson