Sept nouvelles merveilles

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

Défi

Facile

Voici le code HTML d’une page consacrée aux New Seven Wonders of the World. Votre tâche :

Créez une <strong>.dark-mode</strong> class
1. Définissez ces variables CSS à l’intérieur : bg-color (#1a1a1a), text-color (#f5f5f5), accent-color (#66ccff), card-bg (#2a2a2a)
2. Ajoutez la class .dark-mode à <body> afin que la page passe au thème sombre.
Ajoutez une autre carte de merveille
1. Créez une nouvelle carte pour la Great Wall of China.
2. Utilisez cet en-tête : Great Wall of China
3. Utilisez ce texte : Une series de fortifications built across the northern borders of China, stretching over 21,000 km.
4. Utilisez cette source d’image : https://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>New Seven Wonders</title>
  <style>
    /* ===== Variables & Themes ===== */
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --accent-color: #0077cc;
      --card-bg: #ffffff;
    }


    body {
      font-family: Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      margin: 0;
    }

    header {
      padding: 20px;
      background-color: var(--accent-color);
      color: white;
      text-align: center;
    }

    /* ===== Wonders Grid ===== */
    .gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }

    /* ===== Cards ===== */
    .card {
      background: var(--card-bg);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      text-align: center;
      transition: background 0.3s;
    }

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

    .card h3 {
      margin: 10px 0;
      color: var(--accent-color);
    }

    .card p {
      padding: 0 12px 15px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <header>
    <h1>New 7 Wonders of the World</h1>
  </header>

  <main class="gallery">
    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Chichen_Itza_3.jpg" alt="Chichen Itza">
      <h3>Chichén Itzá</h3>
      <p>Ancient Mayan city in Mexico, known for its pyramid El Castillo.</p>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Unique_Moment_with_the_Moon_and_Christ_the_Redeemer_3.jpg" alt="Christ the Redeemer">
      <h3>Christ the Redeemer</h3>
      <p>Iconic statue in Rio de Janeiro, Brazil, overlooking the city.</p>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/Rom_%28IT%29%2C_Kolosseum_--_2024_--_0610.jpg" alt="Colosseum">
      <h3>Colosseum</h3>
      <p>Roman amphitheater in Italy, symbol of ancient Roman engineering.</p>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/80_-_Machu_Picchu_-_Juin_2009_-_edit.jpg" alt="Machu Picchu">
      <h3>Machu Picchu</h3>
      <p>Incan citadel in the Andes Mountains of Peru.</p>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Petra_Jordan_BW_36.JPG" alt="Petra">
      <h3>Petra</h3>
      <p>Ancient city in Jordan, famous for its rock-cut architecture.</p>
    </div>

    <div class="card">
      <img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Taj_Mahal%2C_Agra%2C_India_edit2.jpg" alt="Taj Mahal">
      <h3>Taj Mahal</h3>
      <p>Mausoleum in India, built by Mughal emperor Shah Jahan.</p>
    </div>

  </main>
</body>
</html>