184 lines
12 KiB
HTML
184 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Coastal Calm: A Guide to Big Sur, California</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles for enhanced typography and subtle effects */
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@300;400;600&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f7f7f7;
|
|
color: #333;
|
|
}
|
|
|
|
.display-header {
|
|
font-family: 'Playfair Display', serif;
|
|
line-height: 1.1;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.card-shadow {
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card-shadow:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #4a90e2 0%, #8e44ad 100%);
|
|
}
|
|
|
|
/* Subtle animation for sections */
|
|
.fade-in-up {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-md backdrop-blur-sm bg-opacity-95">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<div class="text-2xl font-extrabold text-gray-800 tracking-tight">
|
|
Coastal Calm
|
|
</div>
|
|
<nav class="space-x-8 hidden md:flex">
|
|
<a href="#overview" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Overview</a>
|
|
<a href="#must-see" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Highlights</a>
|
|
<a href="#practical" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Logistics</a>
|
|
<a href="#explore" class="text-gray-600 hover:text-indigo-600 font-medium transition duration-150 p-2">Explore</a>
|
|
</nav>
|
|
<!-- Mobile Menu Button (simplified for single page) -->
|
|
<div class="md:hidden">
|
|
<button id="menu-button" class="text-gray-600 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2 rounded">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[60vh] flex items-center justify-center bg-cover bg-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1501854459366-72e30815315a?w=1920&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmlnJTIwc3VyJTIwJTIwY2FsaW5lcnxlbnwwfDB8MHx8fDA%3D');">
|
|
<div class="absolute inset-0 bg-black bg-opacity-40"></div>
|
|
<div class="relative z-10 text-center px-4">
|
|
<h1 class="text-6xl md:text-8xl font-extrabold text-white mb-4 display-header">
|
|
Big Sur, California
|
|
</h1>
|
|
<p class="text-xl md:text-3xl text-gray-100 font-light max-w-3xl mx-auto">
|
|
Where dramatic cliffs meet the vast Pacific Ocean. A journey for the soul.
|
|
</p>
|
|
<a href="#overview" class="mt-8 inline-block bg-white text-gray-800 text-lg font-semibold py-3 px-8 rounded-full shadow-lg hover:bg-gray-200 transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
|
Begin Your Journey
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Overview Section -->
|
|
<section id="overview" class="py-20 sm:py-28 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Destination Guide</h2>
|
|
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
|
The Majesty of Big Sur
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 text-center">
|
|
<!-- Feature 1 -->
|
|
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.1s;">
|
|
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Rugged Coastline</h3>
|
|
<p class="text-gray-600">Witness sheer granite cliffs plunging into the deep, restless expanse of the Pacific. The views are unparalleled.</p>
|
|
</div>
|
|
<!-- Feature 2 -->
|
|
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.3s;">
|
|
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Lush Monterey Flora</h3>
|
|
<p class="text-gray-600">The area blends dramatic geology with dense, vibrant coastal forests, offering a diverse natural escape.</p>
|
|
</div>
|
|
<!-- Feature 3 -->
|
|
<div class="p-8 bg-gray-50 rounded-xl border-t-4 border-indigo-500 card-shadow fade-in-up" style="animation-delay: 0.5s;">
|
|
<h3 class="text-3xl font-bold text-indigo-700 mb-3">Wildlife Encounters</h3>
|
|
<p class="text-gray-600">Keep an eye out for seals, migrating whales, and diverse birdlife along the winding coastal drives.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Must-See Highlights Section -->
|
|
<section id="must-see" class="py-20 sm:py-28 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Top Attractions</h2>
|
|
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
|
Essential Stops on the Drive
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Image/Visual Focus -->
|
|
<div class="relative rounded-2xl overflow-hidden shadow-2xl transform hover:scale-[1.02] transition duration-500">
|
|
<img src="https://images.unsplash.com/photo-1533135504135-f275c88a575c?w=1920&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmlnJTIwc3VyJTIwY2FsaW5lcnxlbnwwfDB8MHx8fDA%3D"
|
|
alt="Bixby Bridge overlooking the Pacific in Big Sur"
|
|
class="w-full h-96 object-cover transition duration-500 group-hover:opacity-90">
|
|
<div class="absolute inset-x-0 bottom-0 p-6 bg-black bg-opacity-50">
|
|
<h3 class="text-4xl font-bold text-white display-header">Bixby Bridge</h3>
|
|
<p class="text-white text-lg mt-1">An iconic landmark offering breathtaking photographic opportunities.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Card -->
|
|
<div class="space-y-8">
|
|
<!-- Highlight 1 -->
|
|
<div class="p-6 bg-white rounded-xl border-l-8 border-orange-500 card-shadow fade-in-up" style="animation-delay: 0.2s;">
|
|
<h4 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"><svg class="w-6 h-6 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4m-4 0v12m0 0a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v7a2 2 0 01-2 2h-4z"></path></svg> Point Lobos State Natural Reserve</h4>
|
|
<p class="text-gray-600 leading-relaxed">This reserve is a haven for marine life viewing and coastal hiking. Allow ample time for exploration; the trails wind through diverse ecosystems.</p>
|
|
</div>
|
|
<!-- Highlight 2 -->
|
|
<div class="p-6 bg-white rounded-xl border-l-8 border-green-500 card-shadow fade-in-up" style="animation-delay: 0.4s;">
|
|
<h4 class="text-2xl font-bold text-gray-800 mb-2 flex items-center"><svg class="w-6 h-6 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> Pfeiffer Big Sur State Park</h4>
|
|
<p class="text-gray-600 leading-relaxed">Perfect for those seeking a deeper immersion into the redwood forests. Bring layers, as the coastal fog can be unpredictable.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Practical Logistics Section -->
|
|
<section id="practical" class="py-20 sm:py-28 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-sm uppercase tracking-widest text-indigo-600 font-semibold mb-2">Visitor Information</h2>
|
|
<p class="text-4xl md:text-5xl font-bold text-gray-800 display-header">
|
|
Planning Your Coastal Passage
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12">
|
|
<!-- Logistics Box 1: Driving -->
|
|
<div class="p-8 bg-gray-50 rounded-xl border-b-8 border-indigo-600 card-shadow fade-in-up" style="animation-delay: 0.1s;">
|
|
<h3 class="text-3xl font-bold text-indigo-800 mb-4 flex items-center">
|
|
<svg class="w-7 h-7 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 12v10a2 2 0 01-2-2v-6a2 2 0 012-2h14a2 2 0 012 2v6a2 2 0 01-2 2H5z"></path></svg> Driving & Access</h3>
|
|
<p class="text-gray-600 mb-4">The Big Sur Highway (Highway 1) is famous for its views, but it requires careful driving. Be prepared for winding roads and frequent fog.</p>
|
|
<ul class="space-y-3 text-gray-700">
|
|
<li class="flex items-start"><span class="text-indigo-500 mr-2 text-lg">→</span> Always check road conditions before departing.</li>
|
|
<li class="flex items-start"><span class="text-indigo-500 mr-2 text-lg">→</span> Allow extra time for photo stops; the journey is the destination.</li>
|
|
<li class="flex items-start"><span class="text-indigo-500 mr-2 text-<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 30.47s</div> |