336 lines
20 KiB
HTML
336 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Azure Escapes | The Amalfi Coast Guide</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--amalfi-blue: #005F73;
|
|
--amalfi-sand: #F8F9FA;
|
|
--amalfi-gold: #EE9B00;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
color: #2D3748;
|
|
}
|
|
h1, h2, h3, .serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease-out;
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.nav-glass {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.hero-overlay {
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
|
|
}
|
|
.card-hover {
|
|
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white">
|
|
|
|
<!-- Navigation -->
|
|
<nav id="main-nav" class="fixed w-full z-50 transition-all duration-300 py-6 px-6 md:px-12">
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
|
<a href="#" class="text-2xl font-bold serif tracking-tight text-slate-900">Azure<span class="text-[#EE9B00]">Escapes</span></a>
|
|
<div class="hidden md:flex space-x-8 font-medium text-sm uppercase tracking-widest">
|
|
<a href="#destinations" class="hover:text-[#EE9B00] transition-colors">Destinations</a>
|
|
<a href="#flavors" class="hover:text-[#EE9B00] transition-colors">Flavors</a>
|
|
<a href="#essentials" class="hover:text-[#EE9B00] transition-colors">Essentials</a>
|
|
</div>
|
|
<button class="md:hidden text-slate-900" id="mobile-menu-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden flex-col space-y-4 mt-4 text-center font-medium bg-white py-6 rounded-lg shadow-xl">
|
|
<a href="#destinations" class="mobile-link">Destinations</a>
|
|
<a href="#flavors" class="mobile-link">Flavors</a>
|
|
<a href="#essentials" class="mobile-link">Essentials</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen min-h-[700px] flex items-center justify-center overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/35493335/pexels-photo-35493335.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Picturesque Italian village on Amalfi Coast with stunning architecture by the sea." class="absolute w-full h-full object-cover">
|
|
<div class="absolute inset-0 hero-overlay"></div>
|
|
<div class="relative z-10 text-center px-6 max-w-4xl">
|
|
<span class="text-white uppercase tracking-[0.4em] text-sm mb-4 block">The Italian Dream</span>
|
|
<h1 class="text-5xl md:text-8xl text-white mb-6 leading-tight">Amalfi Coast</h1>
|
|
<p class="text-xl md:text-2xl text-white/90 font-light italic mb-10">Where azure waters meet sun-drenched cliffs.</p>
|
|
<a href="#destinations" class="inline-block bg-[#EE9B00] text-white px-10 py-4 rounded-full text-sm font-semibold uppercase tracking-widest hover:bg-white hover:text-slate-900 transition-all duration-300">Explore the Coast</a>
|
|
</div>
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
|
<div class="text-white/70 text-xs flex items-center gap-2">
|
|
<span class="w-12 h-[1px] bg-white/30"></span>
|
|
Scroll to discover
|
|
<span class="w-12 h-[1px] bg-white/30"></span>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 right-4 z-10 text-[10px] text-white/60">
|
|
Photo by Magda Ehlers on <a href="https://www.pexels.com/photo/scenic-view-of-amalfi-coast-village-35493335/" class="underline hover:text-white">Pexels</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Essence Section -->
|
|
<section id="essence" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<span class="text-[#EE9B00] font-semibold tracking-widest uppercase text-sm">The Essence</span>
|
|
<h2 class="text-4xl md:text-5xl mt-4 mb-8 leading-snug">A Mediterranean masterpiece of color and light.</h2>
|
|
<p class="text-lg text-slate-600 leading-relaxed mb-6">
|
|
Stretching along the southern edge of the Sorrentine Peninsula, the Amalfi Coast is a UNESCO World Heritage site that captures the soul of Italy. It is a landscape defined by dramatic limestone cliffs, terraced lemon groves, and villages that cling precariously to the rocks.
|
|
</p>
|
|
<p class="text-lg text-slate-600 leading-relaxed">
|
|
Whether you are sailing through hidden grottos or dining on a terrace overlooking the Tyrrhenian Sea, the coast offers a sensory experience unlike any other on earth.
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 reveal" style="transition-delay: 200ms;">
|
|
<div class="space-y-4">
|
|
<img src="https://images.pexels.com/photos/262540/pexels-photo-262540.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Lemon Grove" class="rounded-2xl w-full h-64 object-cover">
|
|
<img src="https://images.pexels.com/photos/257409/pexels-photo-257409.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Coastal Path" class="rounded-2xl w-full h-48 object-cover">
|
|
</div>
|
|
<div class="space-y-4 pt-12">
|
|
<img src="https://images.pexels.com/photos/1451374/pexels-photo-1451374.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Amalfi View" class="rounded-2xl w-full h-48 object-cover">
|
|
<img src="https://images.pexels.com/photos/304675/pexels-photo-304675.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Italian Food" class="rounded-2xl w-full h-64 object-cover">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Destinations Section -->
|
|
<section id="destinations" class="py-24 bg-slate-50 px-6 md:px-12">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-20 reveal">
|
|
<h2 class="text-4xl md:text-5xl mb-4">Iconic Stops</h2>
|
|
<div class="w-20 h-1 bg-[#EE9B00] mx-auto"></div>
|
|
<p class="mt-6 text-slate-500 max-w-xl mx-auto">From vertical cities to mountain retreats, each village tells its own story.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
<!-- Positano -->
|
|
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 0ms;">
|
|
<div class="h-72 overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/2011533/pexels-photo-2011533.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Positano" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="text-2xl mb-3">Positano</h3>
|
|
<p class="text-slate-600 text-sm leading-relaxed mb-6">The vertical city of pastel-colored houses. Famous for its steep streets, chic boutiques, and vibrant beach life.</p>
|
|
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Amalfi -->
|
|
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 200ms;">
|
|
<div class="h-72 overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/10417012/pexels-photo-10417012.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Amalfi" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="text-2xl mb-3">Amalfi</h3>
|
|
<p class="text-slate-600 text-sm leading-relaxed mb-6">A historic maritime republic. Visit the magnificent Cathedral of Saint Andrew and explore ancient narrow alleys.</p>
|
|
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ravello -->
|
|
<div class="reveal card-hover bg-white rounded-3xl overflow-hidden shadow-sm" style="transition-delay: 400ms;">
|
|
<div class="h-72 overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/1598145/pexels-photo-1598145.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Ravello" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="text-2xl mb-3">Ravello</h3>
|
|
<p class="text-slate-600 text-sm leading-relaxed mb-6">Perched high above the sea. Known for its spectacular villas, lush gardens, and world-renowned classical music festivals.</p>
|
|
<a href="#" class="text-[#EE9B00] font-semibold text-sm uppercase tracking-widest hover:text-slate-900 transition-colors">Read More →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flavors Section -->
|
|
<section id="flavors" class="py-24 px-6 md:px-12 max-w-7xl mx-auto">
|
|
<div class="flex flex-col md:flex-row gap-16 items-center">
|
|
<div class="md:w-1/2 reveal">
|
|
<div class="relative">
|
|
<div class="absolute -top-4 -left-4 w-32 h-32 bg-[#E9D8A6] rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
|
|
<img src="https://images.pexels.com/photos/3123331/pexels-photo-3123331.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Lemon" class="relative rounded-2xl shadow-2xl z-10">
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 reveal" style="transition-delay: 200ms;">
|
|
<span class="text-[#EE9B00] font-semibold tracking-widest uppercase text-sm">Taste of the Coast</span>
|
|
<h2 class="text-4xl md:text-5xl mt-4 mb-8 leading-tight">A Symphony of Citrus & Sea</h2>
|
|
<div class="space-y-8">
|
|
<div class="flex gap-6">
|
|
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
|
<span class="text-[#EE9B00] text-xl font-bold">01</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-semibold mb-2">Limone Costa d'Amalfi</h4>
|
|
<p class="text-slate-600">Savor the legendary oversized lemons. From fresh juice to the creamy, sweet Limoncello digestif.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
|
<span class="text-[#EE9B00] text-xl font-bold">02</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-semibold mb-2">Fresh Seafood</h4>
|
|
<p class="text-slate-600">Spaghetti alle Vongole and freshly caught anchovies, prepared with local olive oil and sea salt.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
|
|
<span class="text-[#EE9B00] text-xl font-bold">03</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-semibold mb-2">Artisanal Pasta</h4>
|
|
<p class="text-slate-600">Handmade scialatielli, the soul of coastal dining, perfect for soaking up rich tomato sauces.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Essentials Section -->
|
|
<section id="essentials" class="py-24 bg-[#005F73] text-white overflow-hidden relative">
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
|
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="pattern-dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<circle cx="2" cy="2" r="1" fill="white" />
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#pattern-dots)" />
|
|
</svg>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-4xl md:text-5xl mb-4">Plan Your Journey</h2>
|
|
<p class="text-white/60">Essential information for a seamless escape.</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 0ms;">
|
|
<h3 class="text-xl font-bold mb-4">Best Time to Visit</h3>
|
|
<p class="text-white/70 leading-relaxed">May through September offers the best weather. For quiet streets and lower prices, consider the gentle shoulder months of April or October.</p>
|
|
</div>
|
|
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 200ms;">
|
|
<h3 class="text-xl font-bold mb-4">Getting Around</h3>
|
|
<p class="text-white/70 leading-relaxed">Ferries are the most scenic way to travel between towns. For flexibility, consider private drivers, though the winding roads can be challenging.</p>
|
|
</div>
|
|
<div class="reveal bg-white/10 backdrop-blur-md p-8 rounded-2xl border border-white/10" style="transition-delay: 400ms;">
|
|
<h3 class="text-xl font-bold mb-4">What to Pack</h3>
|
|
<p class="text-white/70 leading-relaxed">Comfortable walking shoes for the stairs, lightweight linens, elegant evening attire, and plenty of sun protection.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white py-16 px-6 md:px-12 border-t border-slate-100">
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<a href="#" class="text-3xl font-bold serif tracking-tight mb-6 block">Azure<span class="text-[#EE9B00]">Escapes</span></a>
|
|
<p class="text-slate-500 max-w-xs mb-6">Curating the world's most beautiful destinations for the discerning traveler.</p>
|
|
<div class="flex space-x-4 text-slate-400">
|
|
<a href="#" class="hover:text-[#EE9B00] transition-colors">Instagram</a>
|
|
<a href="#" class="hover:text-[#EE9B00] transition-colors">Pinterest</a>
|
|
<a href="#" class="hover:text-[#EE9B00] transition-colors">Facebook</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-6 uppercase tracking-widest text-xs">Explore</h4>
|
|
<ul class="space-y-3 text-slate-500 text-sm">
|
|
<li><a href="#" class="hover:text-slate-900 transition-colors">Italy Guides</a></li>
|
|
<li><a href="#" class="hover:text-slate-900 transition-colors">Mediterranean</a></li>
|
|
<li><a href="#" class="hover:text-slate-900 transition-colors">Luxury Travel</a></li>
|
|
<li><a href="#" class="hover:text-slate-900 transition-colors">Hidden Gems</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-6 uppercase tracking-widest text-xs">Newsletter</h4>
|
|
<p class="text-sm text-slate-500 mb-4">Get travel inspiration in your inbox.</p>
|
|
<form class="flex gap-2">
|
|
<input type="email" placeholder="Your email" class="bg-slate-100 border-none rounded-lg px-4 py-2 w-full text-sm focus:ring-2 focus:ring-[#EE9B00] outline-none">
|
|
<button class="bg-slate-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-slate-700 transition-colors">Join</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-slate-100 text-center text-slate-400 text-xs">
|
|
<p>© 2024 Azure Escapes Travel Guides. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Sticky Navigation
|
|
const nav = document.getElementById('main-nav');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('nav-glass', 'py-4', 'shadow-md');
|
|
nav.classList.remove('py-6', 'text-white');
|
|
} else {
|
|
nav.classList.remove('nav-glass', 'py-4', 'shadow-md');
|
|
nav.classList.remove('py-6');
|
|
}
|
|
});
|
|
|
|
// Mobile Menu Toggle
|
|
const menuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileLinks = document.querySelectorAll('.mobile-link');
|
|
|
|
menuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
mobileMenu.classList.toggle('flex');
|
|
});
|
|
|
|
mobileLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.add('hidden');
|
|
mobileMenu.classList.remove('flex');
|
|
});
|
|
});
|
|
|
|
// Reveal on Scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 86.64s</div></body>
|
|
</html> |