Seven Wonders

Part of the Practical Frontend section of Coddy's HTML journey — lesson 34 of 35.

Challenge

Easy

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

Style the sidebar:
- Set its width to 220px.
- Give it any background color you like.
- Add some padding inside.
Style the sidebar links (<strong>a</strong> tags):
- Change the default blue color to a color that fits your sidebar background.
- Add a hover effect with a slightly different shade.
Add a dropdown menu:
- After the dropdown button, add a div with class dropdown-content.
- Inside it, add links: History, Maps, and Gallery.

Try it yourself

<!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>
  <!-- Notification Banner -->
  <div class="notification">
    New wonder discovered!
  </div>

  <div class="container">
    <!-- Sidebar -->
    <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>
        <!-- Add the dropdown-content here -->
        
      </div>
    </div>

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