New Seven Wonders

Part of the Practical Frontend section of Coddy's HTML journey. Lesson 35 of 35.

Challenge

Easy

You are given the HTML for a page about the New Seven Wonders of the World. Your task:

Create a <strong>.dark-mode</strong> class
1. Define these CSS variables inside it: bg-color (#1a1a1a), text-color (#f5f5f5), accent-color (#66ccff), card-bg (#2a2a2a)
2. Add the .dark-mode class to the <body> so the page switches to Dark Theme.
Add Another Wonder Card
1. Create a new card for the Great Wall of China.
2. Use this heading: Great Wall of China
3. Use this text: A series of fortifications built across the northern borders of China, stretching over 21,000 km.
4. Use this image source: https://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg

Try it yourself

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