Fußzeile und Feinschliff · Code mit Martin

Vervollständige das Aussehen deiner Website: Fußzeile, kleine Details mit großer Wirkung und eine finale Kontrolle.

Zeig mir das: eine Fußzeile

Eine Fußzeile schließt die Seite ab. Sie ist meist dunkler, ruhig und bleibt unten:

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

Eine Fußzeile sollte enthalten: wer die Website gemacht hat, das Jahr und Kontaktinfo (darf erfunden sein oder von der Schule – niemals deine Heimadresse oder Telefonnummer auf eine Website).

Zeig mir das: kleine Details, die dich wie ein Profi aussehen lassen

Drei winzige Dinge, die fast niemand kennt, aber einen riesigen Unterschied machen:

/* 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) vergrößert ein Element auf 103 %, und transition sagt: „Mach Änderungen sanft über 0,2 Sekunden.” Fahr mit der Maus über ein Foto – siehst du das sanfte Anheben? Genau das machen moderne Websites.

Jetzt du 💪

Style deine Fußzeile nach dem Beispiel (Farbe darf zur Kopfzeile passen) und prüfe: Wer hat die Website gemacht + das Jahr?
Füge die drei Profi-Details aus dem Beispiel hinzu.
Eine große Kontrolle deiner ganzen Website. Geh diese Checkliste durch:
- Das Menü funktioniert von jeder Seite zu jeder Seite.
- Alle Bilder werden angezeigt und haben ausgefülltes alt.
- Verkleinere das Fenster auf Handybreite – alles passt, nichts quillt seitlich über.
- In der Fußzeile steht keine Heimadresse, Telefonnummer oder volle Schul-/Klasseninfo (Sicherheit!).
- Der <title> ergibt auf jeder Seite Sinn.

Komplette Fußzeilen-Lösung (Farben anpassen)

HTML (auf jeder Seite gleich):

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

⚠️

Sicherheit zuerst: In der nächsten Lektion kommt deine Website ins echte Internet, wo sie jeder sehen kann. Deshalb darf sie niemals enthalten: deine genaue Heimadresse, Telefonnummer, E-Mail, vollen Schulnamen mit Klasse oder Fotos, mit denen du oder die darauf abgebildeten Leute unwohl wären. Geh die Website mit einem Elternteil durch und prüft zusammen.

✅

Kontrolliere dich selbst: Deine Website hat eine Kopfzeile mit Menü, Inhalt in einer schönen Spalte, Karten, Fotos, eine Fußzeile – und Dinge bewegen sich sanft, wenn du darüber fährst. Sie sieht aus wie eine echte Website. Weil sie eine ist! Ein letzter Schritt bleibt: Sie der Welt zeigen.

Das nimmst du aus dieser Lektion mit

Eine Fußzeile: dunkler Hintergrund, heller Text, text-align: center, margin-top.
transition + transform = sanfte Mikro-Animationen, wie bei Profi-Websites.
Prüfe Inhalte immer mit den Augen eines Elternteils, bevor du veröffentlichst – persönliche Daten gehören nicht ins Internet.