Grille de galerie de chocolats

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 33 sur 35.

Défi

Facile

On vous donne le HTML pour une galerie de produits chocolatés. Votre tâche est de compléter le CSS pour que la galerie soit esthétique et fonctionne sur toutes les tailles d'écran. Actuellement, elle est configurée comme une grille avec 1 colonne (approche mobile-first).

Votre tâche :

Configurez CSS Grid pour la mise en page en utilisant grid-template-columns :
1. 2 colonnes sur les tablettes (min-width: 600px)
2. 3 colonnes sur les ordinateurs de bureau (min-width: 900px)
Ajoutez un badge à l'une des cartes indiquant “Best Seller” et positionnez-le dans le coin supérieur droit. Utilisez un <div> avec la classe badge placé à l'intérieur de la carte.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Chocolate Gallery Grid</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f8f5f2;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #4e342e;
    }

    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    /* Tablet layout */
  
    /* Desktop layout */

    .card {
      position: relative;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.2s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
    }

    .card h3 {
      margin: 0 0 10px;
      color: #3e2723;
    }

    .card p {
      font-size: 14px;
      color: #555;
      margin-bottom: 15px;
    }

    .card button {
      padding: 10px 15px;
      border: none;
      background: #6d4c41;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .card button:hover {
      background: #4e342e;
    }

    /* Badge */
    .badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ff7043;
      color: white;
      font-size: 12px;
      font-weight: bold;
      padding: 5px 8px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <h1>Chocolate Gallery</h1>

  <div class="gallery">
    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/7/71/Ritter_Sport_dark_chocolate.jpg" alt="Dark Chocolate">
      <div class="card-content">
        <h3>Dark Chocolate</h3>
        <p>Rich and intense flavor, perfect for true chocolate lovers.</p>
        <button>Buy Now</button>
      </div>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Milka_Alpine_Milk_Chocolate_bar_100g.jpg" alt="Milk Chocolate">
      <div class="card-content">
        <h3>Milk Chocolate</h3>
        <p>Creamy and sweet, the classic favorite for all ages.</p>
        <button>Buy Now</button>
      </div>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/White_chocolate_with_rose_petals.jpg" alt="White Chocolate">
      <div class="card-content">
        <h3>White Chocolate</h3>
        <p>Smooth and buttery, with a delicate vanilla flavor.</p>
        <button>Buy Now</button>
      </div>
    </div>
  </div>
</body>
</html>