200 lines
12 KiB
HTML
200 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 Charms: A Guide to the Algarve Coast</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--color-primary: #ff8c00; /* Deep Orange/Terracotta for warmth */
|
|
--color-secondary: #004d40; /* Deep Teal for contrast */
|
|
}
|
|
.btn-primary {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6);
|
|
}
|
|
/* Custom typography styling for impact */
|
|
.heading-impact {
|
|
font-family: 'Georgia', serif;
|
|
line-height: 1.1;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.card-hover {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
/* Subtle background animation */
|
|
.bg-ocean-fade {
|
|
background-image: linear-gradient(135deg, #f0fdf4 0%, #e0f2f1 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans text-gray-800">
|
|
|
|
<!-- Navigation -->
|
|
<header class="sticky top-0 z-30 bg-white shadow-lg border-b border-amber-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-3xl font-serif text-[var(--color-secondary)] tracking-wider">Algarve Atlas</h1>
|
|
</div>
|
|
<nav class="flex space-x-8">
|
|
<a href="#highlights" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Highlights</a>
|
|
<a href="#must-see" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Sights</a>
|
|
<a href="#planning" class="text-gray-600 hover:text-[var(--color-primary)] font-medium transition duration-150 px-3 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">Planning</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="bg-ocean-fade py-20 md:py-32 border-b border-amber-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="heading-impact text-6xl sm:text-7xl font-extrabold text-gray-900 mb-4 leading-tight">
|
|
The Golden Shores of Portugal
|
|
</h2>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">
|
|
Discover the sun-drenched, dramatic coastline of the Algarve. A guide to hidden coves, historic towns, and unparalleled Atlantic views.
|
|
</p>
|
|
<a href="#highlights" class="btn-primary inline-block bg-[var(--color-primary)] text-white text-lg font-semibold py-3 px-10 rounded-lg shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 uppercase tracking-wider">
|
|
Explore the Coastline
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Highlights Section -->
|
|
<section id="highlights" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="heading-impact text-4xl font-bold text-[var(--color-secondary)]">Why the Algarve?</h3>
|
|
<p class="mt-2 text-xl text-gray-500">More than just beaches; it's a landscape of rock, sea, and culture.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
|
|
|
<!-- Card 1: Golden Sands -->
|
|
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-primary)] shadow-lg text-center">
|
|
<img src="https://images.unsplash.com/photo-1542404125-90086d39788c?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Golden sand beach in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
|
|
<h4 class="text-2xl font-bold mb-2 text-gray-900">Golden Shores</h4>
|
|
<p class="text-gray-600">Bask through miles of brilliant, sun-drenched golden sand. Perfect for long, leisurely walks along the Atlantic edge.</p>
|
|
</div>
|
|
|
|
<!-- Card 2: Sea Caves -->
|
|
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-secondary)] shadow-lg text-center">
|
|
<img src="https://images.unsplash.com/photo-1552571394-b2f93884f494?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dramatic sea caves in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
|
|
<h4 class="text-2xl font-bold mb-2 text-gray-900">Secret Lagoons</h4>
|
|
<p class="text-gray-600">Explore the intricate network of sea caves carved into the limestone cliffs, offering breathtaking hidden views.</p>
|
|
</div>
|
|
|
|
<!-- Card 3: Culture & Towns -->
|
|
<div class="card-hover bg-white p-8 rounded-xl border-t-4 border-[var(--color-primary)] shadow-lg text-center">
|
|
<img src="https://images.unsplash.com/photo-1566433903642-e639f17f31a3?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Historic Portuguese town square in Algarve" class="rounded-lg mb-4 w-full h-48 object-cover shadow-md transition duration-300">
|
|
<h4 class="text-2xl font-bold mb-2 text-gray-900">Heritage Villages</h4>
|
|
<p class="text-gray-600">Stroll through whitewashed villages where traditional Azorean life meets vibrant coastal energy.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Must See Spots Section -->
|
|
<section id="must-see" class="py-16 md:py-24 bg-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="heading-impact text-4xl font-bold text-[var(--color-secondary)]">Essential Stops</h3>
|
|
<p class="mt-2 text-xl text-gray-500">Don't miss these regional treasures.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
|
|
<!-- Spot 1: Lagos -->
|
|
<article class="bg-white p-6 rounded-xl shadow-xl card-hover border-l-8 border-[var(--color-primary)]">
|
|
<h4 class="text-3xl font-bold heading-impact text-gray-900 mb-3">Lagos: The Artistic Hub</h4>
|
|
<p class="text-lg mb-4 text-gray-600">
|
|
Known for its dramatic cliffs and vibrant art scene, Lagos serves as the perfect base. Explore its cobbled streets and enjoy the vibrant nightlife that complements the natural beauty.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-2">
|
|
<li>Must See: Ponta da Piedade viewpoint.</li>
|
|
<li>Activity: Kayaking tours among the rock formations.</li>
|
|
<li>Tip: Visit the local fish market in the morning.</li>
|
|
</ul>
|
|
<button class="mt-6 btn-primary bg-gray-800 text-white py-2 px-5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-700">View Lagos Guide</button>
|
|
</article>
|
|
|
|
<!-- Spot 2: Sagres -->
|
|
<article class="bg-white p-6 rounded-xl shadow-xl card-hover border-l-8 border-[var(--color-secondary)]">
|
|
<h4 class="text-3xl font-bold heading-impact text-gray-900 mb-3">Sagres: The Edge of Europe</h4>
|
|
<p class="text-lg mb-4 text-gray-600">
|
|
Located at the southwestern tip, Sagres offers a raw, rugged experience. This historic area feels like the frontier of the continent, perfect for introspective travelers.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700 ml-2">
|
|
<li>Must See: Fortaleza de Sagres.</li>
|
|
<li>Activity: Surfing lessons on the powerful Atlantic swells.</li>
|
|
<li>Tip: Pack extra layers; the wind is strong here!</li>
|
|
</ul>
|
|
<button class="mt-6 btn-primary bg-gray-800 text-white py-2 px-5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-700">View Sagres Guide</button>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Planning/Logistics Section -->
|
|
<section id="planning" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="heading-impact text-4xl font-bold text-[var(--color-primary)]">Traveler's Blueprint</h3>
|
|
<p class="mt-2 text-xl text-gray-500">Logistics to make your journey seamless.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Logistics Item 1: Best Time to Visit -->
|
|
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-amber-400 card-hover">
|
|
<div class="text-5xl mb-3 text-[var(--color-primary)]">☀️</div>
|
|
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">When to Go</h4>
|
|
<p class="text-gray-600 text-sm">The late spring (May-June) and early autumn (September-October) offer the perfect balance of warm weather and fewer crowds. Peak summer heat is intense, but the coastal life is unparalleled.</p>
|
|
</div>
|
|
|
|
<!-- Logistics Item 2: Getting There -->
|
|
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-[var(--color-secondary)] card-hover">
|
|
<div class="text-5xl mb-3 text-[var(--color-secondary)]">🚗</div>
|
|
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">Getting Around</h4>
|
|
<p class="text-gray-600 text-sm">Rental cars are highly recommended to explore the remote coves and inland villages freely. Public transport is sparse outside major towns.</p>
|
|
</div>
|
|
|
|
<!-- Logistics Item 3: Local Cuisine -->
|
|
<div class="p-6 bg-gray-50 rounded-lg shadow-md border-t-4 border-[var(--color-primary)] card-hover">
|
|
<div class="text-5xl mb-3 text-[var(--color-primary)]">🍲</div>
|
|
<h4 class="text-2xl font-bold heading-impact text-gray-900 mb-2">Taste of the Coast</h4>
|
|
<p class="text-gray-600 text-sm">Do not leave without trying fresh grilled sardines (Sardinhas) and the local sweet Port Wine. Seafood is king here!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-800 py-10 mt-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<p class="text-gray-400 text-sm mb-3">
|
|
© 2024 Algarve Atlas Guide. Crafted with intentional design for the discerning traveler.
|
|
</p>
|
|
<p class="text-gray-500 text-sm">
|
|
Design by Senior Creative Web Engineer. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Simple JavaScript for a subtle interaction effect on load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const titleElement = document.querySelector('h1');
|
|
if (titleElement) {
|
|
titleElement<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.40s</div> |