Piè di pagina e rifiniture finali

Te lo mostro: un piè di pagina

Un footer chiude la pagina. Di solito è più scuro, calmo, e resta in basso:

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

Un footer dovrebbe includere: chi ha fatto il sito web, l’anno e informazioni di contatto (inventate pure o usa quelle della scuola – non mettere mai il tuo indirizzo di casa o numero di telefono su un sito web).

Te lo mostro: piccoli dettagli che ti fanno sembrare un professionista

Tre piccole cose che quasi nessuno conosce, eppure fanno un’enorme differenza:

/* 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) ingrandisce un elemento al 103%, e transition dice: “Fai i cambiamenti in modo fluido in 0,2 secondi.” Passa il mouse su una foto – vedi quel piccolo sollevamento? È esattamente quello che fanno i siti moderni.

Ora tocca a te 💪

1. Stila il footer seguendo l’esempio (adatta pure il colore all’header) e verifica che includa: chi ha fatto il sito + l’anno.

2. Aggiungi i tre dettagli da professionista dell’esempio.

3. Un grande controllo di tutto il sito web. Passa in rassegna questa checklist:

   • Il menu funziona da ogni pagina a ogni pagina.
   • Tutte le immagini si vedono e hanno alt compilato.
   • Riduci la finestra alla larghezza di un telefono – tutto sta dentro, niente fuoriesce lateralmente.
   • Il footer non ha indirizzo di casa, telefono o informazioni complete su scuola/classe (sicurezza!).
   • Il <title> ha senso su ogni 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);
}

Cosa porti via da questa lezione

• Un footer: sfondo scuro, testo chiaro, text-align: center, margin-top.
• transition + transform = micro-animazioni fluide, come i siti dei professionisti.
• Controlla sempre i contenuti con occhi di genitore prima di pubblicare – le informazioni personali non stanno su internet.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti