217 lines
13 KiB
HTML
217 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Terra Bloom Festival - Celebrate Summer's Peak</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles to enhance the earthy, organic feel */
|
|
:root {
|
|
--color-primary: #4a7c59; /* Deep Forest Green */
|
|
--color-secondary: #e09a33; /* Warm Gold/Amber */
|
|
--color-background: #f7f4ef; /* Light Creamy Off-White */
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
font-family: 'Georgia', serif;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--color-primary);
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(74, 124, 89, 0.4);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #385e43; /* Slightly darker green */
|
|
transform: translateY(-2px) scale(1.02);
|
|
box-shadow: 0 6px 20px rgba(74, 124, 89, 0.6);
|
|
}
|
|
|
|
/* Subtle hover effect for cards */
|
|
.festival-card {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: 2px solid #ddd;
|
|
}
|
|
|
|
.festival-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Keyframe animation for loading/subtle movement */
|
|
@keyframes fadeInScale {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeInScale 1s ease-out forwards;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-lg">
|
|
<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="text-2xl font-bold tracking-wider text-green-700 uppercase">
|
|
Terra Bloom
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#about" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">About</a>
|
|
<a href="#lineup" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Lineup</a>
|
|
<a href="#schedule" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Schedule</a>
|
|
<a href="#tickets" class="text-gray-600 hover:text-green-600 font-medium transition duration-150">Tickets</a>
|
|
</nav>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="md:hidden p-2 rounded focus:outline-none focus:ring-2 focus:ring-green-700" aria-label="Menu">
|
|
<svg class="w-6 h-6 text-gray-700" 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>
|
|
<a href="#tickets" class="hidden md:block px-4 py-2 text-sm font-semibold text-white rounded-full btn-primary shadow-md">
|
|
Get Tickets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="relative h-[70vh] md:h-[85vh] flex items-center justify-center overflow-hidden">
|
|
<!-- Background Image Placeholder -->
|
|
<img
|
|
src="https://images.pexels.com/photos/18482210/pexels-photo-18482210.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
|
alt="Vibrant meadow filled with blooming flowers under a clear summer sky"
|
|
class="absolute inset-0 w-full h-full object-cover object-center transition duration-700 ease-in-out"
|
|
style="filter: brightness(0.85);"
|
|
>
|
|
<!-- Overlay for visual depth -->
|
|
<div class="absolute inset-0 bg-black/30"></div>
|
|
|
|
<div class="relative z-10 text-center px-4 max-w-4xl animate-fade-in">
|
|
<h1 class="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg tracking-tight">
|
|
Terra Bloom Festival
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-white mb-8 font-light italic drop-shadow-md">
|
|
Where Nature's Spirit Meets Celebration. Join us for a weekend of vibrant art, artisan crafts, and natural rejuvenation.
|
|
</p>
|
|
<a href="#tickets" class="inline-block px-10 py-4 text-lg font-bold text-green-800 bg-white rounded-full shadow-2xl hover:bg-gray-100 transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-400">
|
|
Explore Dates & Buy Passes
|
|
</a>
|
|
|
|
<!-- Image Attribution -->
|
|
<div class="absolute bottom-4 right-4 z-20 text-white/70 text-sm font-serif">
|
|
Photo by Suki Lee on <a href="https://www.pexels.com/photo/decoration-with-colorful-flowers-18482210/" target="_blank" class="underline hover:text-white">Pexels</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-4 border-b-4 border-amber-400 inline-block pb-1">
|
|
Our Vision
|
|
</h2>
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto mb-10 leading-relaxed">
|
|
Terra Bloom is more than just a festival; it is a celebration of sustainable living, artisanal craftsmanship, and the raw beauty of the natural world. We gather under the summer sun to nourish the spirit through music, botanical art, local cuisine, and mindful gatherings.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
|
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
|
<h3 class="text-2xl font-semibold text-green-700 mb-2">Artistry</h3>
|
|
<p class="text-gray-600">Discover handcrafted goods, immersive installations, and living art displays from global creators.</p>
|
|
</div>
|
|
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
|
<h3 class="text-2xl font-semibold text-green-700 mb-2">Sustainability</h3>
|
|
<p class="text-gray-600">Commitment to green practices, zero-waste initiatives, and supporting local ecology.</p>
|
|
</div>
|
|
<div class="p-6 bg-white border-t-4 border-green-500 rounded-lg shadow-lg text-center festival-card">
|
|
<h3 class="text-2xl font-semibold text-green-700 mb-2">Community</h3>
|
|
<p class="text-gray-600">A welcoming space for artists, creators, and nature lovers to connect and share moments.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Lineup Section -->
|
|
<section id="lineup" class="py-16 md:py-24 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 animate-fade-in">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-3">
|
|
The Gathering Lineup
|
|
</h2>
|
|
<p class="text-xl text-gray-600">Music, Soundscapes, and Sonic Journeys</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Artist Card 1 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-amber-400">
|
|
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Main Stage</p>
|
|
<h3 class="text-3xl font-bold text-green-800 mb-2">Elowen</h3>
|
|
<p class="text-gray-500 mb-4">Ethereal Folk & Acoustic Sets</p>
|
|
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
|
</div>
|
|
|
|
<!-- Artist Card 2 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-green-500">
|
|
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Roots Stage</p>
|
|
<h3 class="text-3xl font-bold text-green-800 mb-2">The Wild Roots Collective</h3>
|
|
<p class="text-gray-500 mb-4">Rhythmic World Music & Percussion</p>
|
|
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
|
</div>
|
|
|
|
<!-- Artist Card 3 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-green-500">
|
|
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Ambient Grove</p>
|
|
<h3 class="text-3xl font-bold text-green-800 mb-2">Willow & Dew</h3>
|
|
<p class="text-gray-500 mb-4">Ambient Soundscapes & Meditation Music</p>
|
|
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">View Profile →</a>
|
|
</div>
|
|
|
|
<!-- Artist Card 4 (Tablet/Small Screen Visibility) -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center festival-card border-b-8 border-amber-400 lg:col-span-3 lg:grid-cols-1">
|
|
<p class="text-sm uppercase tracking-widest text-green-600 mb-1">Artisan Showcase</p>
|
|
<h3 class="text-2xl font-bold text-green-800 mb-2">Local Bloom Vendors</h3>
|
|
<p class="text-gray-500 mb-4">Featuring pottery, textiles, and natural remedies from across the region.</p>
|
|
<a href="#" class="text-green-600 hover:text-green-900 font-semibold transition duration-150 focus:outline-none focus:ring-2 focus:ring-green-500">See Vendor List →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Schedule/Dates Section -->
|
|
<section id="schedule" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 animate-fade-in">
|
|
<h2 class="text-4xl md:text-5xl font-bold text-green-800 mb-3">
|
|
Festival Weekend Guide
|
|
</h2>
|
|
<p class="text-xl text-gray-600">Two Days of Discovery</p>
|
|
</div>
|
|
|
|
<!-- Schedule Grid -->
|
|
<div class="grid lg:grid-cols-2 gap-10">
|
|
|
|
<!-- Day 1 -->
|
|
<div class="bg-green-50 p-8 rounded-xl shadow-2xl border-l-8 border-green-600 festival-card">
|
|
<h3 class="text-4xl font-extrabold text-green-700 mb-4">
|
|
Saturday: The Rooting Day
|
|
</h3>
|
|
<p class="text-gray-600 mb-6 italic border-b pb-3">Music builds, crafts begin, and the grounds awaken.</p>
|
|
|
|
<div class="space-y-4">
|
|
<div class="p-3 bg-white rounded-lg shadow-sm border-l-4 border-amber-400">
|
|
<p class="font-bold text-lg text-gray-800">11:00 AM</p>
|
|
<p class="text-sm text-gray-700">Gates Open & Artisan Market Opening</p>
|
|
</div>
|
|
<div class="p-3 bg-white rounded-lg shadow-sm border-l-4 border-amber-400">
|
|
<p class="font-bold text-lg text-gray-800">3:00 PM</p>
|
|
<p class="text-sm text-gray-700">Elowen - Main Stage Set</p>
|
|
</div>
|
|
<div class="p-3 bg-white<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 29.10s</div> |