Elementor #9031 - Info Fusion Hub

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

.main-card {
border-radius: 50px;
overflow: hidden;
background: white;
box-shadow: 0 50px 100px rgba(0,0,0,0.2);
}

.yellow-bg {
background-color: #FFB300;
border-top-left-radius: 150px;
position: relative;
overflow: hidden;
}

.orange-bg {
background-color: #F8941E;
border-top-right-radius: 120px;
}

/* Image Styling */
.travel-img {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
}

/* Overlay for better text visibility */
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, rgba(255,179,0,0.7), rgba(0,0,0,0.3));
z-index: 5;
}
</style>
</head>

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

<!– 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
src=”https://images.unsplash.com/photo-1507525428034-b723cf961d3e”
alt=”Tropical beach travel destination”
class=”travel-img”
/>

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

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

<!– 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>
</div>

</body>
</html>