Footer och sista finluren

Avsluta din webbplats utseende: en footer, små detaljer som gör stort intryck och en sista kontroll.

En footer avslutar sidan. Den är oftast mörkare, lugn och stannar längst ner:

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 ska innehålla: vem som gjort webbplatsen, året och kontaktinfo (hitta på eller använd skolans – lägg aldrig din hemadress eller telefonnummer på en webbplats).

Jag visar: små detaljer som får dig att se ut som ett proffs

Tre små saker som nästan ingen känner till, men som gör enorm skillnad:

/* 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) förstorar ett element till 103 % storlek, och transition säger: “Gör ändringar mjukt under 0,2 sekunder.” Håll musen över ett foto – ser du den milda lilla lyftningen? Det är precis vad moderna webbplatser gör.

Nu är det din tur 💪

Styla din footer efter exemplet (matcha gärna färgen med din header) och kolla att den innehåller: vem som gjort webbplatsen + året.
Lägg till de tre proffsdetaljerna från exemplet.
En stor kontroll av hela din webbplats. Gå igenom den här checklistan:
- Menyn funkar från varje sida till varje sida.
- Alla bilder syns och har alt ifyllt.
- Krymp fönstret till telefonbredd – allt passar, inget rinner ut åt sidan.
- Footern har ingen hemadress, telefonnummer eller full skol-/klassinfo (säkerhet!).
- <title> är vettig på varje sida.

Komplett footer-lösning (justera färgerna)

HTML (samma på varje sida):

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

⚠️

Säkerhet först: i nästa lektion hamnar din webbplats på det riktiga internet, där vem som helst kan se den. Så den får aldrig innehålla: din exakta hemadress, telefonnummer, e-post, fullständigt skolnamn med klass, eller foton som du eller personerna i dem inte skulle vara bekväma med. Gå igenom webbplatsen med en förälder och kolla tillsammans.

✅

Kolla själv: Din webbplats har en header med meny, innehåll i en snygg kolumn, kort, foton, en footer – och saker rör sig mjukt när du håller musen över dem. Den ser ut som en riktig webbplats. För det är den! Ett sista steg återstår: visa den för världen.

Det här tar du med dig från lektionen

En footer: mörk bakgrund, ljus text, text-align: center, margin-top.
transition + transform = mjuka mikroanimationer, precis som proffswebbplatser.
Dubbelkolla alltid ditt innehåll genom en förälders ögon innan publicering – personlig information hör inte hemma på internet.

Jag visar: en footer

Jag visar: små detaljer som får dig att se ut som ett proffs

Nu är det din tur 💪

Det här tar du med dig från lektionen