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

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