Pied de page et finitions · Code avec Martin

Termine le look de ton site web : un pied de page, de petits détails qui font grande impression, et une vérification finale.

Montre-moi : un pied de page

Un pied de page clôt la page. Il est généralement plus sombre, calme, et reste en bas :

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 pied de page devrait inclure : qui a fait le site web, l’année, et des coordonnées (tu peux inventer ou utiliser celles de l’école – ne mets jamais ton adresse personnelle ou ton numéro de téléphone sur un site web).

Montre-moi : de petits détails qui font pro

Trois petites choses que presque personne ne connaît, mais qui font une énorme différence :

/* 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) agrandit un élément à 103 % de sa taille, et transition dit : « Fais les changements en douceur sur 0,2 seconde. » Passe ta souris sur une photo – tu vois ce petit soulèvement doux ? C’est exactement ce que font les sites web modernes.

À toi 💪

Stylise ton pied de page en suivant l’exemple (tu peux faire correspondre la couleur à ton en-tête) et vérifie qu’il inclut : qui a fait le site web + l’année.
Ajoute les trois détails pro de l’exemple.
Une grande vérification de tout ton site web. Parcours cette checklist :
- Le menu fonctionne de chaque page vers chaque page.
- Toutes les images s’affichent et ont alt rempli.
- Réduis la fenêtre à la largeur d’un téléphone – tout tient, rien ne déborde sur les côtés.
- Le pied de page n’a pas d’adresse personnelle, numéro de téléphone, ou infos complètes école/classe (sécurité !).
- Le <title> a du sens sur chaque page.

Solution complète du pied de page (ajuste les couleurs)

HTML (pareil sur chaque page) :

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

⚠️

La sécurité d’abord : dans la prochaine leçon, ton site web va sur le vrai internet, où tout le monde peut le voir. Il ne doit donc jamais inclure : ton adresse exacte, numéro de téléphone, e-mail, nom complet de l’école avec la classe, ou des photos dont toi ou les personnes dessus ne seriez pas à l’aise. Parcours le site web avec un parent et vérifiez ensemble.

✅

Vérifie : Ton site web a un en-tête avec un menu, du contenu dans une jolie colonne, des cartes, des photos, un pied de page – et les choses bougent doucement quand tu passes la souris dessus. Il ressemble à un vrai site web. Parce que c’en est un ! Il ne reste qu’une dernière étape : le montrer au monde.

Ce que tu retiens de cette leçon

Un pied de page : fond sombre, texte clair, text-align: center, margin-top.
transition + transform = micro-animations fluides, comme les sites web pro.
Vérifie toujours ton contenu avec les yeux d’un parent avant de publier – les informations personnelles n’ont pas leur place sur internet.