Footer en laatste details

Ik laat je zien: een footer

Een footer sluit de pagina af. Die is meestal donkerder, rustig, en blijft onderaan:

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 */
}

Een footer hoort te bevatten: wie de website maakte, het jaar, en contactinfo (verzin het gerust of gebruik die van de school – zet nooit je thuisadres of telefoonnummer op een website).

Ik laat je zien: kleine details die je als pro laten lijken

Drie kleine dingen die bijna niemand kent, maar een enorm verschil maken:

/* 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) vergroot een element tot 103%, en transition zegt: “Maak veranderingen soepel over 0,2 seconden.” Ga met je muis over een foto – zie je dat zachte liftje? Dat doen moderne websites precies zo.

Nu jij 💪

1. Style je footer volgens het voorbeeld (pas de kleur gerust aan je header aan) en controleer dat hij bevat: wie de website maakte + het jaar.

2. Voeg de drie pro-details uit het voorbeeld toe.

3. Een grote controle van je hele website. Loop deze checklist door:

   • Het menu werkt van elke pagina naar elke pagina.
   • Alle afbeeldingen zijn zichtbaar en hebben alt ingevuld.
   • Maak het venster telefoonbreed – alles past, niets loopt horizontaal over.
   • De footer heeft geen thuisadres, telefoonnummer of volledige school-/klasinfo (veiligheid!).
   • De <title> klopt op elke pagina.

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

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);
}

Wat neem je mee uit deze les

• Een footer: donkere achtergrond, lichte tekst, text-align: center, margin-top.
• transition + transform = soepele micro-animaties, net als pro-websites.
• Controleer je inhoud altijd dubbel door de ogen van een ouder voordat je publiceert – persoonlijke informatie hoort niet op internet.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden