Footer og sidste finpudsning

Færdiggør din hjemmesides udseende: en footer, små detaljer, der gør et stort indtryk, og en sidste tjek.

En footer afslutter siden. Den er normalt mørkere, rolig og forbliver nederst:

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

En footer bør indeholde: hvem lavede hjemmesiden, året og kontaktinfo (du må gerne finde på noget eller bruge skolens – sæt aldrig din hjemmeadresse eller telefonnummer på en hjemmeside).

Vis mig: små detaljer, der får dig til at ligne en professionel

Tre små ting, næsten ingen kender til, men de gør en kæmpe forskel:

/* 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) forstørrer et element til 103% størrelse, og transition siger: “Gør ændringer glat over 0,2 sekunder.” Hold musen over et foto – ser du den blide lille løft? Det er præcis det, moderne hjemmesider gør.

Nu er det din tur 💪

Style din footer efter eksemplet (du må gerne matche farven til din header) og tjek, at den indeholder: hvem lavede hjemmesiden + året.
Tilføj de tre professionelle detaljer fra eksemplet.
En stor tjek af hele din hjemmeside. Gå igennem denne tjekliste:
- Menuen virker fra hver side til hver side.
- Alle billeder vises og har alt udfyldt.
- Gør vinduet til telefonbredde – alt passer, intet flyder ud til siden.
- Footeren har ingen hjemmeadresse, telefonnummer eller fuld skole-/klasseinfo (sikkerhed!).
- <title> giver mening på hver side.

Komplet footer-løsning (juster farverne)

HTML (det samme på hver side):

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

⚠️

Sikkerhed først: i næste lektion kommer din hjemmeside ud på det rigtige internet, hvor alle kan se den. Så den må aldrig indeholde: din præcise hjemmeadresse, telefonnummer, e-mail, fuldt skolenavn med klasse eller fotos, som du eller folk på dem ikke ville være trygge ved. Gå igennem hjemmesiden med en forælder og tjek den sammen.

✅

Tjek dig selv: Din hjemmeside har en header med menu, indhold i en pæn kolonne, kort, fotos, en footer – og ting bevæger sig blidt, når du holder musen over dem. Den ligner en rigtig hjemmeside. Fordi det er en! Ét sidste trin mangler: at vise den til verden.

Det tager du med fra denne lektion

En footer: mørk baggrund, lys tekst, text-align: center, margin-top.
transition + transform = glatte mikroanimationer, ligesom professionelle hjemmesider.
Tjek altid dit indhold gennem en forælders øjne, før du publicerer – personlige oplysninger hører ikke hjemme på internettet.