<![CDATA[traval <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel – Discover Worldwide</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex items-center justify-center p-4 md:p-10">
<div class="max-w-6xl w-full main-card flex flex-col">
<!-- Top Half -->
<div class="flex flex-col md:flex-row min-h-[500px]">
<!-- Left Content -->
<div class="w-full md:w-1/2 p-12 flex flex-col justify-center">
<div class="text-2xl font-black italic mb-12">
TRAVEL <span class="text-orange-500 font-normal">Logo</span>
</div>
<h1 class="text-6xl font-black text-gray-900 leading-[1.1] mb-6 tracking-tighter">
DISCOVER<br>
<span class="text-gray-500 font-light uppercase">Worldwide</span>
</h1>
<p class="text-gray-400 text-xs max-w-xs leading-relaxed mb-8">
Ready for your next adventure? Explore the most beautiful places on Earth with our exclusive travel packages.
</p>
<div class="flex gap-4">
<button class="bg-[#FFB300] text-white px-10 py-3 rounded-full text-[10px] font-bold shadow-lg hover:scale-105 transition-all">
EXPLORE
</button>
<button class="border-2 border-gray-100 text-gray-400 px-10 py-3 rounded-full text-[10px] font-bold hover:bg-gray-50">
BOOK NOW
</button>
</div>
</div>
<!-- Right Side (Real Image) -->
<div class="w-full md:w-1/2 yellow-bg">
<!-- NAV -->
<div class="flex justify-center gap-8 py-8 relative z-20">
<a href="#" class="text-[11px] font-bold border-b-2 border-orange-600 pb-1 text-gray-800">HOME</a>
<a href="#" class="text-[11px] font-bold opacity-40 hover:opacity-100">ABOUT US</a>
<a href="#" class="text-[11px] font-bold opacity-40 hover:opacity-100">BOOKING</a>
<a href="#" class="text-[11px] font-bold opacity-40 hover:opacity-100">CONTACT US</a>
</div>
<!-- REAL TRAVEL IMAGE -->
<img decoding="async" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Tropical beach travel destination" class="travel-img" title="Elementor #9251">
<div class="overlay"></div>
<!-- Globe Icon -->
<div class="absolute bottom-10 left-10 z-20 bg-white p-3 rounded-full shadow-xl text-2xl">
🌍
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="flex flex-col md:flex-row min-h-[180px]">
<!-- OFF -->
<div class="w-full md:w-1/3 orange-bg p-10 text-white flex flex-col justify-center">
<h2 class="text-5xl font-black leading-none italic">
20%<br>OFF
</h2>
<p class="text-[10px] mt-4 opacity-80 uppercase tracking-widest font-bold">
Code: <span class="bg-white text-orange-500 px-2 py-1 rounded">TRAVEL2024</span>
</p>
</div>
<!-- Asian -->
<div class="w-full md:w-1/4 bg-[#FFFBF2] p-10 border-r border-yellow-100 flex flex-col justify-between">
<div>
<h3 class="font-bold text-sm text-gray-800 border-b-4 border-yellow-400 w-fit mb-4 uppercase">
Asian
</h3>
<p class="text-[10px] text-gray-500">
Visit the exotic beaches and historic temples of Asia.
</p>
</div>
<a href="#" class="text-[10px] font-black border-b-2 border-black w-fit mt-4">
READ MORE
</a>
</div>
<!-- Europe -->
<div class="w-full md:w-1/4 bg-[#FFFBF2] p-10 border-r border-yellow-100 flex flex-col justify-between">
<div>
<h3 class="font-bold text-sm text-gray-800 border-b-4 border-yellow-400 w-fit mb-4 uppercase">
Europe
</h3>
<p class="text-[10px] text-gray-500">
Discover the classic architecture and culture of Europe.
</p>
</div>
<a href="#" class="text-[10px] font-black border-b-2 border-black w-fit mt-4">
READ MORE
</a>
</div>
<!-- Book -->
<div class="w-full md:w-1/4 bg-[#FFFBF2] p-10 flex flex-col justify-center group cursor-pointer">
<h3 class="font-black text-orange-500 text-sm mb-2">BOOK NOW</h3>
<p class="text-[10px] text-gray-400">
Secure your dream vacation today with easy booking.
</p>
<div class="mt-4 text-orange-500 text-2xl group-hover:translate-x-2 transition-transform">
→
</div>
</div>
</div>
</div>
</body>
</html>]]>
