<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel The World</title>

  <!-- Tailwind -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Font -->
  

  
</head>

<body class="flex items-center justify-center min-h-screen">

  <!-- MAIN CONTAINER -->
  <div class="w-[95%] max-w-6xl bg-[#f5f5f5] border border-gray-300">

    <!-- NAVBAR -->
    <div class="flex justify-between items-center px-8 py-6">
      
      <div class="flex gap-6 font-semibold text-[#0f5c57]">
        <span class="bg-[#0f5c57] text-white px-4 py-2">HOME</span>
        <span>ABOUT US</span>
        <span>DESTINATIONS</span>
        <span>CONTACT US</span>
      </div>

      <div class="text-right text-[#0f5c57] font-bold">
        DESIGN <br> ART STUDIO
      </div>

    </div>

    <!-- HERO SECTION -->
    <div class="grid md:grid-cols-2 gap-6 px-8 py-10 items-center">

      <!-- LEFT -->
      <div>
        <h1 class="text-6xl font-extrabold text-[#0f5c57] leading-tight">
          Travel
        </h1>

        <p class="tracking-[6px] text-gray-600 mt-2">
          THE WORLD
        </p>

        <p class="mt-6 text-gray-500 max-w-md text-sm">
          Pellentesque sed nisi at nisi scelerisque iaculis. Phasellus orci. Nulla adipiscing. 
          Suspendisse et leo vel elit ullamcorper gravida. Proin tempor, ligula ut.
        </p>

        <button class="mt-6 border-2 border-[#0f5c57] px-6 py-2 text-[#0f5c57] font-semibold hover:bg-[#0f5c57] hover:text-white transition">
          BOOK NOW
        </button>
      </div>

      <!-- RIGHT IMAGES -->
      <div class="flex gap-6 justify-center">

        <!-- IMAGE 1 -->
        <div class="w-40 h-72 card-shadow overflow-hidden">
          <img decoding="async" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" class="w-full h-full object-cover" alt="Photo 1507525428034 B723cf961d3e" title="Elementor #9601">
        </div>

        <!-- IMAGE 2 -->
        <div class="w-40 h-80 card-shadow overflow-hidden mt-10">
          <img decoding="async" src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" class="w-full h-full object-cover" alt="Photo 1501785888041 Af3ef285b470" title="Elementor #9601">
        </div>

        <!-- IMAGE 3 -->
        <div class="w-40 h-72 card-shadow overflow-hidden">
          <img decoding="async" src="https://images.unsplash.com/photo-1493558103817-58b2924bce98" class="w-full h-full object-cover" alt="Photo 1493558103817 58b2924bce98" title="Elementor #9601">
        </div>

      </div>

    </div>

    <!-- FOOTER -->
    <div class="bg-[#0f5c57] text-white px-8 py-4 flex justify-between items-center">

      <div>@FOLLOW US</div>

      <div class="flex gap-4">
        <div class="w-8 h-8 bg-white text-[#0f5c57] flex items-center justify-center">f</div>
        <div class="w-8 h-8 bg-white text-[#0f5c57] flex items-center justify-center">i</div>
        <div class="w-8 h-8 bg-white text-[#0f5c57] flex items-center justify-center">in</div>
        <div class="w-8 h-8 bg-white text-[#0f5c57] flex items-center justify-center">t</div>
      </div>

    </div>

  </div>

</body>
</html>