새로운 세계 7대 불가사의

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 35번째.

챌린지

쉬움

세계 7대 불가사의에 관한 페이지의 HTML이 제공됩니다. 당신의 작업:

<strong>.dark-mode</strong> 클래스 생성
1. 그 안에 다음 CSS 변수들을 정의하세요: bg-color (#1a1a1a), text-color (#f5f5f5), accent-color (#66ccff), card-bg (#2a2a2a)
2. 페이지가 다크 테마로 전환되도록 <body>에 .dark-mode 클래스를 추가하세요.
또 다른 불가사의 카드 추가
1. Great Wall of China를 위한 새로운 카드를 만드세요.
2. 다음 제목을 사용하세요: Great Wall of China
3. 다음 텍스트를 사용하세요: A series of fortifications built across China’s northern borders, stretching over 21,000 km.
4. 다음 이미지 소스를 사용하세요: https://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg

직접 해보기

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