عجائب الدنيا السبع

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 34 من 35.

التحدي

سهل

لقد تم تزويدك بكود HTML لصفحة معلومات مصغرة حول عجائب الدنيا السبع. مهمتك هي:

تنسيق الشريط الجانبي (sidebar):
- قم بتعيين عرضه إلى 220px.
- امنحه أي لون خلفية تفضله.
- أضف بعض الحشو (padding) في الداخل.
تنسيق روابط الشريط الجانبي (وسوم <strong>a</strong>):
- قم بتغيير اللون الأزرق الافتراضي إلى لون يتناسب مع خلفية الشريط الجانبي.
- أضف تأثير الحوم (hover effect) بظل مختلف قليلاً.
إضافة قائمة منسدلة (dropdown menu):
- بعد زر القائمة المنسدلة، أضف div بالفئة dropdown-content.
- بداخله، أضف الروابط: History، و Maps، و Gallery.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Seven Wonders</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f9f9f9;
    }

    /* Notification Banner */
    .notification {
      background-color: #4CAF50;
      color: white;
      padding: 12px;
      text-align: center;
      font-weight: bold;
    }

    /* Layout */
    .container {
      display: flex;
      min-height: 100vh;
    }

    .sidebar h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .sidebar a {
      display: block;
      text-decoration: none;
      margin: 6px 0;
      padding: 5px;
      border-radius: 4px;
    }

    .sidebar a:hover {
      background: #444;
    }

    /* Dropdown in sidebar */
    .dropdown {
      margin-top: 15px;
    }

    .dropdown-btn {
      cursor: pointer;
      padding: 5px;
      display: block;
      background: #444;
      border-radius: 4px;
    }

    .dropdown-content {
      display: none;
      margin-top: 5px;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content a {
      padding-left: 15px;
      font-size: 14px;
    }

    /* Content */
    .content {
      flex: 1;
      padding: 30px;
      background: white;
    }

    .content h1 {
      margin-top: 0;
    }

    .content img {
      max-width: 100%;
      border-radius: 8px;
      margin: 15px 0;
    }

    /* Tooltip */
    .tooltip {
      position: relative;
      border-bottom: 1px dotted #333;
      cursor: help;
      color: #0077cc;
    }

    .tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: #33fbe6;
      color: #333;
      text-align: center;
      padding: 6px;
      border-radius: 6px;
      position: absolute;
      left: 105%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
    }
  </style>
</head>
<body>
  <!-- شريط الإشعارات -->
  <div class="notification">
    New wonder discovered!
  </div>

  <div class="container">
    <!-- الشريط الجانبي -->
    <div class="sidebar">
      <h2>Seven Wonders</h2>
      <a href="#">Great Wall of China</a>
      <a href="#">Petra</a>
      <a href="#">Christ the Redeemer</a>
      <a href="#">Machu Picchu</a>
      <a href="#">Chichen Itza</a>
      <a href="#">Colosseum</a>
      <a href="#">Taj Mahal</a>

      <div class="dropdown">
        <span class="dropdown-btn">More Resources ▼</span>
        <!-- أضف dropdown-content هنا -->
        
      </div>
    </div>

    <!-- المحتوى الرئيسي -->
    <div class="content">
      <h1>The Mausoleum at Halicarnassus</h1>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Mausoleum_at_Halicarnassus_by_Ferdinand_Knab_%281886%29_cropped.png" alt="Mausoleum">
      <p>
        The <span class="tooltip">Mausoleum
        <span class="tooltip-text">A grand tomb built for Mausolus, satrap of Caria.</span>
        </span> at Halicarnassus was one of the Seven Wonders of the Ancient World, built around 350 BCE in modern-day Turkey. It stood approximately 45 meters high and combined Greek, Egyptian, and Lycian architectural styles.
      </p>
    </div>
  </div>
</body>
</html>