Projet 1 — Landing page (Niv. ⭐)

⏱️ TL;DR — Construire une landing page responsive d’une seule page : navbar, hero, section « fonctionnalités » en 3 cartes, section tarifs, formulaire de contact, footer. Objectif : maîtriser grille + composants + utilitaires sans JS.

🎯 Cahier des charges

1. Navbar collante avec marque à gauche, liens à droite, menu burger sur mobile.
2. Hero : titre display, sous-titre lead, deux boutons (primaire + outline), pleine hauteur d’écran.
3. Fonctionnalités : 3 cartes de hauteur égale (1/2/3 colonnes selon l’écran), chacune avec une icône, un titre, un texte.
4. Tarifs : 3 cartes, la centrale mise en avant (bordure + badge « Populaire »).
5. Contact : formulaire prénom/email/message dans un container étroit.
6. Footer sombre avec liens et copyright.

🔍 Endroits à visiter

Jalons

• La navbar se replie en burger sous lg.
• Le hero occupe toute la hauteur au chargement.
• Les 3 cartes fonctionnalités ont la même hauteur.
• La carte tarif centrale se distingue visuellement.
• Tout est lisible et aligné sur mobile.

<nav class="navbar navbar-expand-lg sticky-top bg-body-tertiary">…</nav>
<header class="d-flex align-items-center min-vh-100 text-center">
  <div class="container">
    <h1 class="display-3 fw-bold">…</h1>
    <p class="lead">…</p>
    <a class="btn btn-primary btn-lg">…</a>
    <a class="btn btn-outline-secondary btn-lg">…</a>
  </div>
</header>
<section class="container my-5">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col"><div class="card h-100">…</div></div>
  </div>
</section>

Pour aller plus loin

• Ajoutez un dark mode (bouton + data-bs-theme, voir 9.3).
• Animez l’apparition des cartes au scroll (scrollspy ou une petite lib).

Projet suivant : Projet 2 — Dashboard admin