Mini-site « Carte de lieu » responsive + mode sombre

Consignes & Ressources

Consignes

Choisis un lieu (ville, monument, musée, parc…).
Dans l’onglet HTML :
- Structure la page : <header>, <main> avec sections Héro et Galerie, puis <footer>.
- Ajoute un titre clair et une courte description (2–4 phrases).
- Insère au moins 2 images via la zone Pièces jointes puis le bouton Insérer.
- Chaque image a un alt descriptif pertinent.
Dans l’onglet CSS :
- Utilise des variables CSS pour les couleurs.
- Crée une grille .gallery responsive (2 ou 3 colonnes selon la largeur).
- Prévois un style mode sombre (classe .dark sur la racine).
Dans l’onglet JS :
- Le bouton « Mode sombre » doit toggle la classe dark sur la page.
- Affiche dans la console un message lors du basculement.
Teste l’Aperçu (ou « Ouvrir dans un onglet ») et corrige les erreurs console si besoin.
Quand c’est ok, clique Enregistrer pour sauvegarder ton brouillon. Clique Envoyer quand tu as fini.

Critères d’évaluation

HTML clair et sémantique ; attributs alt présents (25 %)
CSS variables + grille responsive + lisibilité (35 %)
JS mode sombre fonctionnel + messages console (25 %)
Autonomie, soin, respect des consignes (15 %)

Conseils

Commence simple, puis améliore.
Utilise les Pièces jointes pour ajouter images/PDF. Le bouton Insérer colle directement le code <img> ou le lien dans l’HTML.

Ressources

HTML de base : MDN — HTML basics
Texte alternatif des images : MDN — img & alt
Variables CSS : MDN — var()
CSS Grid : MDN — Grid
Media queries : MDN — Media queries
JS — évènements & classes : MDN — classList, addEventListener

Astuce : pour les images personnelles, ajoute-les en Pièces jointes puis utilise le bouton Insérer pour les coller dans l’HTML.

Aller plus loin (facultatif)

Ajouter un bouton « Retour en haut » avec défilement doux.
Sauvegarder le choix du mode sombre dans localStorage.
Créer un filtre de galerie (boutons « Tous / Architecture / Nature ») en JS.

HTML

<header class="container">
  <h1>Carte de lieu</h1>
  <button id="toggle-dark" type="button" class="btn">Mode sombre</button>
</header>

<main class="container">
  <section class="hero">
    <h2>Mon lieu</h2>
    <p>Décris ici en quelques phrases ce qui rend ce lieu intéressant.</p>

</section>

<section>
    <h3>Galerie</h3>
    <p>Ajoute 2–4 images ou documents. Chaque image avec un <code>alt</code> descriptif.</p>
    <div class="gallery">
      
      
    </div>
  </section>
</main>

<footer class="container">
  <small>&copy; Votre nom — Projet scolaire</small>
</footer>

CSS

:root{
  --bg:#0f1320; --fg:#e8eef7; --card:#161b22; --line:#273349;
  --accent:#4da3ff; --paper:#ffffff; --ink:#111;
  --gap:14px; --radius:14px;
}
:root.dark{
  --paper:#0e1116; --ink:#f1f5ff;
  --bg:#0b0e16; --fg:#e6ecf8; --card:#121824; --line:#22304a; --accent:#7ab6ff;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--fg)}
img{max-width:100%;display:block;border-radius:10px}
.container{max-width:980px;margin:auto;padding:16px}
.btn{background:var(--accent);color:#001427;border:none;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}

header.container{display:flex;align-items:center;justify-content:space-between}

.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:12px 0}
.gallery{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);margin-top:10px}
.gallery figure{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.gallery figcaption{opacity:.9;margin-top:6px;font-size:.95rem}

footer.container{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
}

Pièces jointesGlisser-déposer, puis “Ajouter”

Aucune pièce jointe pour le moment.

Aperçu

Console

Ctrl+S: brouillon local · Ctrl+Entrée: régénérer l’aperçu