Nuevas siete maravillas

Parte de la sección Practical Frontend del Journey de HTML de Coddy. Lección 35 de 35.

Desafío

Fácil

Se te proporciona el HTML de una página sobre las Nuevas Siete Maravillas del Mundo. Tu tarea:

Crea una clase <strong>.dark-mode</strong>
1. Define estas variables CSS dentro de ella: bg-color (#1a1a1a), text-color (#f5f5f5), accent-color (#66ccff), card-bg (#2a2a2a)
2. Añade la clase .dark-mode a <body> para que la página cambie al tema oscuro.
Añade otra tarjeta de maravilla
1. Crea una tarjeta nueva para Great Wall of China.
2. Usa este encabezado: Great Wall of China
3. Usa este texto: Una serie de fortificaciones construidas a lo largo de las fronteras septentrionales de China, que se extienden por más de 21,000 km.
4. Usa esta fuente de imagen: https://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg

Pruébalo tú mismo

<!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>