442 lines
28 KiB
HTML
442 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="dark" lang="en"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>All Tours | Fethiye Adventure Co.</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
.material-symbols-outlined {
|
||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
vertical-align: middle;
|
||
}
|
||
body {
|
||
background-color: #131313;
|
||
color: #e5e2e1;
|
||
overflow-x: hidden;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: #131313;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: #474746;
|
||
border-radius: 10px;
|
||
}
|
||
.tour-card:hover .tour-image {
|
||
transform: scale(1.05);
|
||
}
|
||
.glass-effect {
|
||
backdrop-filter: blur(12px);
|
||
background: rgba(32, 31, 31, 0.8);
|
||
}
|
||
</style>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"inverse-surface": "#e5e2e1",
|
||
"surface-bright": "#393939",
|
||
"surface": "#131313",
|
||
"surface-container": "#201f1f",
|
||
"on-tertiary-fixed": "#001d35",
|
||
"inverse-on-surface": "#313030",
|
||
"on-primary-fixed": "#351000",
|
||
"on-primary-container": "#572000",
|
||
"surface-container-high": "#2a2a2a",
|
||
"inverse-primary": "#a04100",
|
||
"on-surface-variant": "#e2bfb0",
|
||
"outline": "#a98a7d",
|
||
"on-error": "#690005",
|
||
"surface-container-lowest": "#0e0e0e",
|
||
"on-secondary-container": "#b6b5b4",
|
||
"on-background": "#e5e2e1",
|
||
"on-tertiary-fixed-variant": "#00497b",
|
||
"surface-container-highest": "#353534",
|
||
"surface-variant": "#353534",
|
||
"on-primary-fixed-variant": "#7a3000",
|
||
"error": "#ffb4ab",
|
||
"tertiary-fixed-dim": "#9ccaff",
|
||
"surface-container-low": "#1c1b1b",
|
||
"primary-fixed-dim": "#ffb693",
|
||
"tertiary-container": "#059eff",
|
||
"on-tertiary-container": "#003357",
|
||
"surface-dim": "#131313",
|
||
"on-secondary-fixed-variant": "#474746",
|
||
"outline-variant": "#5a4136",
|
||
"secondary-container": "#474746",
|
||
"secondary": "#c8c6c5",
|
||
"on-surface": "#e5e2e1",
|
||
"secondary-fixed-dim": "#c8c6c5",
|
||
"primary-fixed": "#ffdbcc",
|
||
"on-secondary": "#303030",
|
||
"on-tertiary": "#003257",
|
||
"on-error-container": "#ffdad6",
|
||
"on-secondary-fixed": "#1b1c1c",
|
||
"primary-container": "#ff6b00",
|
||
"secondary-fixed": "#e4e2e1",
|
||
"on-primary": "#561f00",
|
||
"primary": "#ffb693",
|
||
"surface-tint": "#ffb693",
|
||
"tertiary-fixed": "#d0e4ff",
|
||
"error-container": "#93000a",
|
||
"background": "#131313",
|
||
"tertiary": "#9ccaff"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.125rem",
|
||
"lg": "0.25rem",
|
||
"xl": "0.5rem",
|
||
"full": "0.75rem"
|
||
},
|
||
"spacing": {
|
||
"stack-sm": "8px",
|
||
"section-gap": "120px",
|
||
"gutter": "24px",
|
||
"margin-mobile": "20px",
|
||
"margin-desktop": "64px",
|
||
"container-max": "1280px",
|
||
"stack-md": "16px",
|
||
"stack-lg": "32px"
|
||
},
|
||
"fontFamily": {
|
||
"headline-lg-mobile": ["Montserrat"],
|
||
"headline-md": ["Montserrat"],
|
||
"body-lg": ["Inter"],
|
||
"display-lg": ["Montserrat"],
|
||
"headline-lg": ["Montserrat"],
|
||
"body-md": ["Inter"],
|
||
"label-md": ["Inter"]
|
||
},
|
||
"fontSize": {
|
||
"headline-lg-mobile": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||
"display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||
"headline-lg": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||
"body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||
"label-md": ["14px", {"lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600"}]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="bg-background text-on-surface">
|
||
<!-- TopNavBar -->
|
||
<header class="fixed top-0 w-full z-50 flex flex-col bg-surface border-b border-outline-variant">
|
||
<!-- Utility Bar -->
|
||
<div class="hidden md:flex w-full py-2 px-margin-desktop bg-surface-container-lowest text-on-surface-variant font-label-md text-[12px] justify-between border-b border-outline-variant/30">
|
||
<div class="flex gap-4">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">location_on</span> Fethiye, TR</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">call</span> +90 252 612 0000</span>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<span>English</span>
|
||
<span>USD</span>
|
||
</div>
|
||
</div>
|
||
<!-- Main Nav -->
|
||
<nav class="flex items-center justify-between py-4 px-margin-desktop max-w-container-max mx-auto w-full transition-all duration-300 ease-in-out">
|
||
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary">
|
||
Fethiye Adventure Co.
|
||
</div>
|
||
<div class="hidden md:flex gap-stack-lg items-center">
|
||
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-md text-body-md" href="#">Tours</a>
|
||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Private Charters</a>
|
||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">About Us</a>
|
||
<a class="text-on-surface hover:text-primary transition-colors font-body-md text-body-md" href="#">Contact</a>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-6 py-3 rounded-none hover:brightness-110 transition-all uppercase tracking-widest font-bold">
|
||
Book Now
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
<main class="pt-[140px] pb-section-gap px-margin-desktop max-w-container-max mx-auto">
|
||
<!-- Hero Header -->
|
||
<div class="mb-stack-lg border-l-4 border-primary pl-6">
|
||
<h1 class="font-display-lg text-display-lg uppercase mb-2">Explore Fethiye</h1>
|
||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Discover the hidden gems of the Mediterranean with our hand-picked adventure tours. From the heights of Babadağ to the crystal depths of the Blue Lagoon.</p>
|
||
</div>
|
||
<div class="flex flex-col lg:flex-row gap-gutter">
|
||
<!-- Filter Sidebar -->
|
||
<aside class="w-full lg:w-72 flex-shrink-0">
|
||
<div class="sticky top-40 bg-surface-container-high border border-outline-variant p-stack-lg space-y-stack-lg">
|
||
<div class="flex items-center justify-between pb-4 border-b border-outline-variant">
|
||
<h2 class="font-headline-md text-[20px] uppercase">Filters</h2>
|
||
<span class="material-symbols-outlined text-primary cursor-pointer">filter_list</span>
|
||
</div>
|
||
<!-- Activity Type -->
|
||
<div>
|
||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Activity Type</h3>
|
||
<div class="space-y-3">
|
||
<label class="flex items-center gap-3 cursor-pointer group">
|
||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Air Adventures</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">
|
||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Water Sports</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">
|
||
<input checked="" class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Off-Road</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 cursor-pointer group">
|
||
<input class="w-5 h-5 bg-surface-container border-outline-variant text-primary focus:ring-primary rounded-none" type="checkbox"/>
|
||
<span class="font-body-md text-on-surface-variant group-hover:text-primary transition-colors">Private Cruises</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<!-- Price Range -->
|
||
<div>
|
||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Price Range (USD)</h3>
|
||
<input class="w-full h-1 bg-outline-variant rounded-lg appearance-none cursor-pointer accent-primary" max="500" min="30" type="range" value="250"/>
|
||
<div class="flex justify-between mt-2 font-label-md text-on-surface-variant">
|
||
<span>$30</span>
|
||
<span>$500</span>
|
||
</div>
|
||
</div>
|
||
<!-- Duration -->
|
||
<div>
|
||
<h3 class="font-label-md uppercase mb-stack-md text-on-surface">Duration</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button class="px-4 py-2 border border-outline-variant text-on-surface-variant font-label-md hover:border-primary hover:text-primary transition-colors">Short</button>
|
||
<button class="px-4 py-2 border border-primary text-primary font-label-md">Full Day</button>
|
||
<button class="px-4 py-2 border border-outline-variant text-on-surface-variant font-label-md hover:border-primary hover:text-primary transition-colors">Multi-Day</button>
|
||
</div>
|
||
</div>
|
||
<button class="w-full bg-surface-container-lowest border border-outline-variant py-3 font-label-md uppercase hover:bg-primary hover:text-on-primary transition-all duration-300">
|
||
Clear All
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
<!-- Results Grid -->
|
||
<section class="flex-grow">
|
||
<div class="flex justify-between items-center mb-stack-lg">
|
||
<p class="font-body-md text-on-surface-variant"><span class="text-on-surface font-bold">12</span> adventures found in Fethiye</p>
|
||
<div class="flex items-center gap-4">
|
||
<span class="font-label-md uppercase hidden sm:inline">Sort by:</span>
|
||
<select class="bg-surface-container border border-outline-variant font-label-md py-2 px-4 focus:ring-primary focus:border-primary rounded-none">
|
||
<option>Most Popular</option>
|
||
<option>Price: Low to High</option>
|
||
<option>Price: High to Low</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!-- Bento / Grid Hybrid -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-gutter">
|
||
<!-- Card 1: Paragliding -->
|
||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A breathtaking view of a tandem paraglider soaring high above the turquoise Oludeniz Blue Lagoon in Fethiye, Turkey. The sun reflects off the crystal-clear Mediterranean water, while the lush green mountains create a dramatic backdrop. The image is captured with high-contrast, professional travel photography style, emphasizing the vibrant oranges of the paraglider and the deep blues of the sea." src="https://lh3.googleusercontent.com/aida-public/AB6AXuApXgdK3MPlpwfZ4UCJFKDSz5F2lWTw_9wgKqL_OW69UabnoUDOWIIo9WLjsJRJPa7jPYBOJmyr3UmdCMs2tApT-g3CUeoqUSKeWp3IYdG7TXkMw98sngZC50SG2njqXe0KSjfqMovabLjn_U3vxSFjtV3crU5eX5TxFquamH1EaENhjMKK_YkVl5IuOpwbD-xktckBNaMAbyM3WT9ZBrluBLM9lujF1nL1PqnnsW1YnBzZe7UZapOM_eSQnUdkm7fh7jAuVdawE_8"/>
|
||
<div class="absolute top-4 left-4 bg-primary text-on-primary font-label-md px-3 py-1 uppercase tracking-tighter">Best Seller</div>
|
||
<div class="absolute bottom-4 right-4 bg-surface/80 backdrop-blur px-3 py-1 border border-outline-variant">
|
||
<div class="flex items-center gap-1 font-label-md text-primary">
|
||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span> 4.9
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 flex flex-col flex-grow">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Oludeniz Tandem Paragliding</h3>
|
||
</div>
|
||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 2 Hours</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">air</span> Air</span>
|
||
</div>
|
||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Fly from 2000m altitude at Babadağ mountain and land on the white sands of Belcekız beach.</p>
|
||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||
<div class="flex flex-col">
|
||
<span class="text-on-surface-variant font-label-md line-through">$180</span>
|
||
<span class="text-primary font-headline-md">$149</span>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||
View Details
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2: Jeep Safari -->
|
||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A rugged open-top 4x4 jeep splashing through a shallow riverbed in the Saklikent Canyon near Fethiye. Adventurers are cheering with their hands up, surrounded by ancient limestone cliffs and dusty terrain. The lighting is intense golden hour sunlight, highlighting the spray of water and the rugged textures of the canyon walls in a bold, cinematic style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvMLuqIuZ7vfceGD61BQzx1IORruzIPXrZoS8vTllS29Y1sr6KIJLMdHaMzQkUWI_tayyUBJL5vLMCcIva0eLLRep0ktobHfLSDhZthvyh9IAvCuG7HfG0O5U8C2piXPj5Uqv6Aw3N1LNjIOfS5o9Grickq924M5AlYC-c6lGMl3gy_6duZyCFxtHfNTuLaHULV-hlwaORZ7Yo0modVmRfs8ZIpvS0pP4MSngoCKAyUlklrnhiSyuHUaznmyWaR_n1Pv44fFAYeKs"/>
|
||
<div class="absolute bottom-4 right-4 bg-surface/80 backdrop-blur px-3 py-1 border border-outline-variant">
|
||
<div class="flex items-center gap-1 font-label-md text-primary">
|
||
<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span> 4.7
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 flex flex-col flex-grow">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Tlos & Saklikent Jeep Safari</h3>
|
||
</div>
|
||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 8 Hours</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">explore</span> Adventure</span>
|
||
</div>
|
||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Explore the ancient ruins of Tlos, splash through water fights, and walk the deep Saklikent Gorge.</p>
|
||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||
<div class="flex flex-col">
|
||
<span class="text-on-surface-variant font-label-md">From</span>
|
||
<span class="text-primary font-headline-md">$45</span>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||
View Details
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3: Scuba Diving -->
|
||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A pair of scuba divers exploring a vibrant underwater cave ecosystem in the clear blue waters of Fethiye. Schools of silver fish dart between colorful sea sponges and rock formations. Sunbeams pierce through the surface of the water, creating columns of light in the deep ocean. The aesthetic is professional, clear, and high-contrast, showcasing the mysterious beauty of the Mediterranean seabed." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDV10RJ4OLJ0GYhs8O1M7Ugy6y_w66EMJAsTRh2-IdM33kDpFzQBtV7yP4cZrAhkxbxTiNh_anCxmXbNdWKPrEPOocu3_5NKaxzvS8_nSx00rdy0_R8rRSaqQDWgNAx0yA8iDtzbgMgmmcMyfxddQ7yUObQjNwW0_WYf7qhZDUAONjrDNhEjJGbNHhOSs33Qo8XVeCoBFTVdK3aZUpCvceVImZ16Pytss8h9pFTFCpr9A2YH2LQ9-1yPY9-1cMUqWpVJyinNnXShxQ"/>
|
||
</div>
|
||
<div class="p-6 flex flex-col flex-grow">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Dalyan Turtle & Cave Diving</h3>
|
||
</div>
|
||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 6 Hours</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">scuba_diving</span> Water</span>
|
||
</div>
|
||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Experience the magical underwater world of Fethiye bays with professional instructors.</p>
|
||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||
<div class="flex flex-col">
|
||
<span class="text-on-surface-variant font-label-md">From</span>
|
||
<span class="text-primary font-headline-md">$65</span>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||
View Details
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card 4: Private Charter (Asymmetric) -->
|
||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300 md:col-span-2">
|
||
<div class="flex flex-col md:flex-row h-full">
|
||
<div class="relative w-full md:w-1/2 h-64 md:h-full overflow-hidden">
|
||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A luxury sailing yacht anchored in a secluded, emerald-green bay in Göcek, near Fethiye. The deck features plush white seating and a mahogany finish. The surrounding pine-clad hills reflect in the glass-like water. The mood is opulent, serene, and exclusive, utilizing high-key lighting and a sophisticated palette of deep greens and polished whites." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB03EtScQoviYONinNtrn87Ldd4cnLsWauQ8w2CxfpLT6_KOiRAX1YwDHdAr_ZY6HP0z57aTPNy81HcUkZ2yzsanNSiN8GzIV-JV7_piiYsmD78HlBxiCQISWj1nao0W1zDJcF-jiM3CFXdF0iNnEfMDVXTY6unWSFO4PLOKqnYr-8IzhXnX1j42736qutjEWnN08D5xcwfxREJZZxkpvGNPDByHs37rIvgmtUdOVIRSsKb-UtuPGyO-i8ca0oqUqHzyWxGNO1LKdY"/>
|
||
<div class="absolute top-4 left-4 bg-tertiary text-on-tertiary font-label-md px-3 py-1 uppercase tracking-tighter">Premium</div>
|
||
</div>
|
||
<div class="p-8 flex flex-col justify-center w-full md:w-1/2">
|
||
<h3 class="font-headline-lg text-headline-md uppercase mb-4 group-hover:text-primary transition-colors">Exclusive Göcek 12 Islands Cruise</h3>
|
||
<div class="flex gap-4 mb-6 text-on-surface-variant font-label-md">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">directions_boat</span> Private Yacht</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">group</span> Max 10</span>
|
||
</div>
|
||
<p class="font-body-md text-on-surface-variant mb-stack-lg">The ultimate luxury experience. Escape the crowds and cruise through the hidden bays of Göcek with a private chef and captain.</p>
|
||
<div class="flex items-center justify-between pt-6 border-t border-outline-variant mt-auto">
|
||
<div class="flex flex-col">
|
||
<span class="text-on-surface-variant font-label-md">Daily Charter</span>
|
||
<span class="text-primary font-headline-md">$850</span>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-8 py-4 uppercase font-bold hover:brightness-110 transition-all">
|
||
Book Private
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Card 5: Horse Riding -->
|
||
<div class="tour-card group flex flex-col bg-surface-container-high border border-outline-variant overflow-hidden transition-all duration-300">
|
||
<div class="relative h-64 overflow-hidden">
|
||
<img class="tour-image w-full h-full object-cover transition-transform duration-500" data-alt="A serene horse riding tour at sunset in Kayaköy Ghost Village, Fethiye. The rider is on a majestic brown horse, trekking through historic ruins with the orange sun setting behind the cypress trees. The lighting is warm and ethereal, creating long shadows and a peaceful, cinematic atmosphere with high-contrast silhouettes." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnMSC_JuaNaIn8TzYRosRPTKdlBJq6L-QnMi57iJzCyS4ASqP4HkjJKk-pA5cS63T1LQ2UE5-xLigjMo_fa4hUZ6k9OlFQ4s98Jj6d_6umRmThn5i9BVRbfhQ5E8LMXqPSQE8Tjuv3FRl3aA6TNqrEfGuhFcrfH-yL_pqTfeqgGU8Jxv1R2haoSn3XQ128Pd8JY4wGXu-9oEwImFSxKo9NfYnhA9XUhYA5JxN-paQuWIFXzjGz66Kpa5u6KeqgrAaYplsaQcCk7RI"/>
|
||
</div>
|
||
<div class="p-6 flex flex-col flex-grow">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<h3 class="font-headline-md text-[20px] uppercase leading-tight group-hover:text-primary transition-colors">Kayaköy Ghost Village Ride</h3>
|
||
</div>
|
||
<div class="flex gap-4 mb-stack-md text-on-surface-variant font-label-md">
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">schedule</span> 3 Hours</span>
|
||
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">pets</span> Nature</span>
|
||
</div>
|
||
<p class="font-body-md text-on-surface-variant line-clamp-2 mb-stack-lg">Ride through the pine forests and discover the abandoned Greek village of Kayaköy.</p>
|
||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-outline-variant">
|
||
<div class="flex flex-col">
|
||
<span class="text-on-surface-variant font-label-md">From</span>
|
||
<span class="text-primary font-headline-md">$40</span>
|
||
</div>
|
||
<button class="bg-primary-container text-on-primary font-label-md px-5 py-3 uppercase font-bold hover:brightness-110 transition-all">
|
||
View Details
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Pagination -->
|
||
<div class="mt-section-gap flex justify-center items-center gap-4">
|
||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">
|
||
<span class="material-symbols-outlined">chevron_left</span>
|
||
</button>
|
||
<button class="w-12 h-12 flex items-center justify-center border border-primary bg-primary text-on-primary font-bold">1</button>
|
||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">2</button>
|
||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">3</button>
|
||
<button class="w-12 h-12 flex items-center justify-center border border-outline-variant text-on-surface hover:border-primary hover:text-primary transition-colors">
|
||
<span class="material-symbols-outlined">chevron_right</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
<!-- Footer -->
|
||
<footer class="bg-surface-container-lowest border-t border-outline-variant">
|
||
<div class="w-full py-stack-lg px-margin-desktop max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-stack-lg">
|
||
<div class="flex flex-col gap-2 items-center md:items-start">
|
||
<span class="font-headline-md text-headline-md font-bold text-primary">Fethiye Adventure Co.</span>
|
||
<span class="font-body-md text-body-md text-on-surface-variant">© 2024 Fethiye Adventure Co. All rights reserved.</span>
|
||
</div>
|
||
<div class="flex gap-stack-lg">
|
||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Privacy Policy</a>
|
||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Terms of Service</a>
|
||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">FAQ</a>
|
||
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors duration-200" href="#">Blog</a>
|
||
</div>
|
||
<div class="flex gap-4">
|
||
<div class="w-10 h-10 flex items-center justify-center bg-surface-container border border-outline-variant hover:border-primary transition-colors cursor-pointer">
|
||
<span class="material-symbols-outlined text-[20px]">share</span>
|
||
</div>
|
||
<div class="w-10 h-10 flex items-center justify-center bg-surface-container border border-outline-variant hover:border-primary transition-colors cursor-pointer">
|
||
<span class="material-symbols-outlined text-[20px]">language</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- Micro-interaction Script -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const header = document.querySelector('header');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 50) {
|
||
header.classList.add('glass-effect');
|
||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.height = '0px';
|
||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.opacity = '0';
|
||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.overflow = 'hidden';
|
||
} else {
|
||
header.classList.remove('glass-effect');
|
||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.height = 'auto';
|
||
header.querySelector('.hidden.md\\:flex.w-full.py-2').style.opacity = '1';
|
||
}
|
||
});
|
||
|
||
// Subtle parallax for card images
|
||
const cards = document.querySelectorAll('.tour-card');
|
||
cards.forEach(card => {
|
||
card.addEventListener('mousemove', (e) => {
|
||
const img = card.querySelector('.tour-image');
|
||
const rect = card.getBoundingClientRect();
|
||
const x = (e.clientX - rect.left) / rect.width;
|
||
const y = (e.clientY - rect.top) / rect.height;
|
||
img.style.transformOrigin = `${x * 100}% ${y * 100}%`;
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body></html> |