Cartes et galerie photo · Code avec Martin

Construis les deux éléments les plus populaires des sites web modernes : des cartes de contenu et une grille de photos.

Montre-moi : une carte

Une carte est un rectangle blanc avec une ombre qui regroupe une image et du texte. Tu les connais de YouTube, Netflix et des boutiques en ligne. Une carte n’est qu’une boîte avec quelques propriétés :

<div class="card">
  <img src="images/photo.jpg" alt="Photo description">
  <h3>Card heading</h3>
  <p>Short text for the card.</p>
</div>

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Deux nouvelles choses ici :

<div> est une boîte vide sans signification propre – juste un « paquet » pour regrouper des choses qui vont ensemble.
box-shadow est une ombre : les nombres signifient décalage à droite, décalage vers le bas, flou et couleur (ici, noir à 10 % d’opacité). L’ombre est ce qui transforme un rectangle plat en carte.

Montre-moi : des cartes côte à côte

Maintenant un truc que tu connais déjà – flexbox. Enveloppe les cartes dans une boîte et mets-la en flex :

<div class="cards">
  <div class="card">…</div>
  <div class="card">…</div>
  <div class="card">…</div>
</div>

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;             /* cards fairly share the available space */
  min-width: 200px;    /* but none will ever be narrower than 200px */
}

flex-wrap: wrap + min-width = sur un ordinateur les cartes sont côte à côte, sur un téléphone elles s’empilent. Tu viens de construire un site web responsive – qui s’adapte à n’importe quel écran.

À toi 💪

Ajoute une section avec des cartes à ton site web – au moins trois côte à côte. Ce qu’elles contiennent dépend de ton projet :

🏫 Site web d'école – solution (cartes des professeurs)

<h2>Our Teachers</h2>
<div class="cards">
  <div class="card">
    <h3>Ms. Turner</h3>
    <p>4th grade homeroom. Teaches English and art. Loves cats.</p>
  </div>
  <div class="card">
    <h3>Mr. Bennett</h3>
    <p>Math and P.E. Runs the floorball club.</p>
  </div>
  <div class="card">
    <h3>Principal Adams</h3>
    <p>Running the school for 10 years. Plays the piano.</p>
  </div>
</div>

🙋 Site web personnel – solution (cartes des hobbies)

<h2>My Hobbies</h2>
<div class="cards">
  <div class="card">
    <img src="images/soccer.jpg" alt="Me during a match">
    <h3>Soccer</h3>
    <p>I play forward for the youth team. 12 goals this year!</p>
  </div>
  <div class="card">
    <img src="images/minecraft-build.jpg" alt="My castle in Minecraft">
    <h3>Minecraft</h3>
    <p>I build huge castles. This one took a month.</p>
  </div>
  <div class="card">
    <h3>Coding</h3>
    <p>I'm building this very website right now. And this is just the start.</p>
  </div>
</div>

🌍 Journal de voyage – solution (cartes des voyages)

<h2>Our Trips</h2>
<div class="cards">
  <div class="card">
    <img src="images/mountains.jpg" alt="View from the summit">
    <h3>The Mountains</h3>
    <p>A three-day hike. Best part: wild berries and the lookout tower.</p>
  </div>
  <div class="card">
    <img src="images/sea.jpg" alt="A bay in Greece">
    <h3>Greece</h3>
    <p>A week at the beach. We saw dolphins!</p>
  </div>
  <div class="card">
    <img src="images/dc.jpg" alt="View from a monument in Washington, D.C.">
    <h3>Washington, D.C.</h3>
    <p>Museums, monuments, and way too much walking.</p>
  </div>
</div>

⚽ Site web de club – solution (cartes des joueurs)

<h2>Roster</h2>
<div class="cards">
  <div class="card">
    <h3>Jake · goalkeeper 🧤</h3>
    <p>Team captain. 5 clean sheets this season.</p>
  </div>
  <div class="card">
    <h3>Owen · midfield ⚡</h3>
    <p>Fastest player on the team. 8 assists.</p>
  </div>
  <div class="card">
    <h3>Tom · forward 🎯</h3>
    <p>Top scorer. 14 goals this season.</p>
  </div>
</div>

Le même CSS fonctionne pour chaque projet :

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;
  min-width: 200px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Bonus : une galerie photo

Tu as beaucoup de photos ? Une grille de photos est encore plus simple – utilise juste aspect-ratio et object-fit pour les garder toutes de la même taille :

<div class="gallery">
  <img src="images/p1.jpg" alt="…">
  <img src="images/p2.jpg" alt="…">
  <img src="images/p3.jpg" alt="…">
  <img src="images/p4.jpg" alt="…">
</div>

.gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery img {
  width: 180px;
  aspect-ratio: 1;      /* a square */
  object-fit: cover;    /* the photo fills the square and gets cropped, not squished */
}

✅

Vérifie : Ton site web a des cartes avec des ombres côte à côte. Réduis la fenêtre de ton navigateur à la largeur d’un téléphone – les cartes s’empilent. Ça s’appelle le design responsive, et tu viens de le réussir.

Ce que tu retiens de cette leçon

<div> est une boîte d’emballage pour des choses qui vont ensemble.
Une carte = fond + border-radius + padding + box-shadow.
Flexbox avec flex-wrap et min-width = une mise en page qui fonctionne sur ordinateur et téléphone.