Footer og siste finpudsning

Færdiggjør din nettsides udseende: en footer, små detaljer, der gjør et stort indtryk, og en siste tjek.

En footer afslutter siden. Den er normalt mørkere, rolig og forblir 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 nettsiden, året og kontaktinfo (du kan gjerne finde på noe eller bruke skolens – sett aldrig din hjemmeadresse eller telefonnummer på en nettside).

Jeg viser deg: små detaljer, der får deg til at ligne en professionel

Tre små ting, nesten ingen kjenner til, men de gjør en enorm 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: “Gjør endringer glat over 0,2 sekunder.” Hold musen over et bilde – ser du den blide lille løft? Det er nøyaktig det, moderne nettsider gør.

Nå er det din tur 💪

Style din footer etter eksemplet (du kan gjerne matche fargen til din header) og tjek, at den indeholder: hvem lavede nettsiden + året.
Legg til de tre profesjonelle detaljer fra eksemplet.
En stor sjekk af hele din nettside. Gå igjennom denne sjekkliste:
- Menuen fungerer fra hver side til hver side.
- Alle bilder vises og har alt fyll utt.
- Gjø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 fargerne)

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 neste leksjon kommer din nettside ud på det ekte internettet, hvor alle kan se den. Så den må aldrig indeholde: din nøyaktige hjemmeadresse, telefonnummer, e-mail, fuldt skolenavn med klasse eller bilder, som du eller folk på dem ikke ville være komfortable med. Gå igjennom nettsiden med en forelder og sjekk den sammen.

✅

Sjekk deg selv: Din nettside har en header med menu, indhold i en pæn kolonne, kort, bilder, en footer – og ting bevæger sig blidt, når du holder musen over dem. Den ligner en ekte nettside. Fordi det er en! Ét siste trin mangler: at vise den til verden.

Dette tar du med deg fra leksjonen

En footer: mørk baggrund, lys tekst, text-align: center, margin-top.
transition + transform = glatte mikroanimationer, som profesjonelle nettsider.
Sjekk altid ditt indhold gjennom en forelders øjne, før du publicerer – personlige opplysninger hører ikke hjemme på internettet.

Jeg viser deg: en footer

Jeg viser deg: små detaljer, der får deg til at ligne en professionel

Nå er det din tur 💪

Dette tar du med deg fra leksjonen