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

جزء من قسم 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>