Nuove sette meraviglie

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 35 di 35.

Sfida

Facile

Ti viene fornito l'HTML di una pagina sulle nuove sette meraviglie del mondo. Il tuo compito:

Crea una classe <strong>.dark-mode</strong>
1. Definisci al suo interno queste variabili CSS: bg-color (#1a1a1a), text-color (#f5f5f5), accent-color (#66ccff), card-bg (#2a2a2a)
2. Aggiungi la classe .dark-mode a <body> così la pagina passerà al tema scuro.
Aggiungi un'altra scheda di una meraviglia
1. Crea una nuova scheda per Great Wall of China.
2. Usa questo titolo: Great Wall of China
3. Usa questo testo: A series of fortifications built across the northern borders of China, stretching over 21,000 km.
4. Usa questa sorgente dell'immagine: https://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg

Provalo tu

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