code-solo.html

<!DOCTYPE html>
<html>
<head>
    <title>Code Solo</title>
</head>
<body>
    <div class="navbar">
        <a href="index.html">Do Now</a>
        <a href="code-along.html">Code Along</a>
        <a href="code-solo.html">Code Solo</a>
      </div>
    

     <h1>My Dream Travel Destinations</h1>
     <section>
     
     <!-- 1. Create an unordered list (<ul>) to list the dream travel destinations -->
        
        <!-- 2. Add 3 list items (<li>), one for each dream travel destination. -->

            <!-- 3. Add an anchor tag (<a>) for the link to more information. 
                NOTE: the anchor tag will be nested in the list item. -->
       <ul>
         <li>
           <img src="https://sweden.se/_next/image?url=https%3A%2F%2Fcms.sweden.se%2Fapp%2Fuploads%2F2021%2F04%2Fswedish-parliament-building.jpg&w=1200&q=75">
           <a href="https://sweden.se/">Sweden</a>
         </li>
         <li>
           <img src="https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcQJ3_Mh2fnUJUlNijTeZf_XsxD-ZRbgA1TLphVpbbjBeQDYNoLdeO-8b6qfGiM4naMNWHcuMY31-SIWsLDNVtlIYOGm0w72tNmozyWTkQ">
           <a href="https://european-union.europa.eu/principles-countries-history/country-profiles/france_en">France</a>
         </li>
         <li>
           <img src="https://images.nationalgeographic.org/image/upload/t_edhub_resource_key_image/v1638881301/EducationHub/photos/dry-valleys.jpg">
           <a href="https://education.nationalgeographic.org/resource/antarctica/">Antartica</a></li>
       </ul>

            <!-- 4. Add an image (<img>) for the destination.
                NOTE: the image tag will be nested in the list item. -->

                
    </section>
</body>
</html>


<!-- The code below styles the page. DO NOT EDIT. -->
<style>
     .navbar {
      overflow: hidden;
      background-color: #333;
    }
  
    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
  
    .navbar a:hover {
      background: #ddd;
      color: black;
    }

    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }

    h1 {
        text-align: center;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 20px 0;
        display: flex;
        justify-content: space-around;
    }

    li {
        text-align: center;
        width: 200px;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        transition: transform 0.3s ease-in-out;
    }

    li:hover {
        transform: scale(1.05);
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto;
        border-radius: 5px;
    }

    a {
        color: #0066cc;
        text-decoration: none;
        font-weight: bold;
    }
</style>