212 lines
13 KiB
HTML
212 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>Echo Bloom - New Album Release</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom utility classes for richer typography and subtle effects */
|
||
.font-display {
|
||
font-family: 'Playfair Display', serif; /* Assuming a dramatic serif font for impact */
|
||
}
|
||
.font-body {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
.btn-primary {
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 15px rgba(255, 100, 100, 0.3);
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px) scale(1.02);
|
||
box-shadow: 0 6px 20px rgba(255, 100, 100, 0.4);
|
||
}
|
||
.album-cover-hover {
|
||
transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
|
||
}
|
||
.album-cover-hover:hover {
|
||
transform: translateY(-5px) scale(1.03);
|
||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
|
||
}
|
||
/* Custom gradient background for depth */
|
||
.bg-music-gradient {
|
||
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
|
||
}
|
||
</style>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="bg-gray-50 font-body text-gray-800 antialiased">
|
||
|
||
<!-- Navigation Bar -->
|
||
<header class="bg-white shadow-lg sticky top-0 z-10">
|
||
<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 items-center">
|
||
<div class="text-2xl font-display font-bold text-indigo-700 tracking-widest">
|
||
ECHO BLOOM
|
||
</div>
|
||
</div>
|
||
<nav class="hidden md:flex space-x-8">
|
||
<a href="#music" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">Music</a>
|
||
<a href="#tour" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">Tour Dates</a>
|
||
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium">About</a>
|
||
<a href="#buy" class="text-gray-600 hover:text-indigo-600 transition duration-150 font-medium border-b-2 border-indigo-500 pb-1">Listen Now</a>
|
||
</nav>
|
||
<div class="md:hidden">
|
||
<!-- Mobile Menu Button Placeholder -->
|
||
<button class="p-2 text-gray-600 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||
<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: Album Announcement -->
|
||
<section class="bg-music-gradient pt-16 pb-20 sm:pb-28 text-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||
<h1 class="text-5xl sm:text-7xl lg:text-8xl font-display mb-4 leading-tight animate-in fade-in duration-1000">
|
||
Echo Bloom
|
||
</h1>
|
||
<p class="text-xl sm:text-3xl mb-8 tracking-widest uppercase text-indigo-300/90">
|
||
Introducing: "Solstice Echoes"
|
||
</p>
|
||
|
||
<!-- Placeholder Image Structure -->
|
||
<div class="relative w-full max-w-4xl mx-auto shadow-2xl rounded-xl overflow-hidden transform transition duration-500 hover:scale-[1.01]">
|
||
<img src="https://images.pexels.com/photos/8198140/pexels-photo-8198140.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||
alt="Album cover featuring abstract sound waves against a deep indigo landscape"
|
||
class="w-full h-auto object-cover object-center"
|
||
loading="eager">
|
||
|
||
<!-- Attribution -->
|
||
<div class="absolute bottom-2 right-3 text-xs text-white/60 backdrop-blur-sm bg-black/30 px-2 py-1 rounded-lg">
|
||
Photo by RDNE Stock project on <a href="https://www.pexels.com/photo/blonde-woman-picking-vinyl-record-8198140/" target="_blank" class="hover:text-white underline">Pexels</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10 flex justify-center space-x-4">
|
||
<a href="#listen" class="btn-primary bg-red-500 text-white text-lg font-semibold px-10 py-4 rounded-full shadow-lg hover:bg-red-400 focus:outline-none focus:ring-4 ring-red-300 uppercase tracking-wider">
|
||
Stream on Spotify
|
||
</a>
|
||
<a href="#buy" class="bg-white text-indigo-700 text-lg font-semibold px-10 py-4 rounded-full shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-4 ring-indigo-300 transition duration-300">
|
||
Buy Vinyl
|
||
</a>
|
||
</div>
|
||
|
||
<p class="mt-6 text-sm text-indigo-300/80">
|
||
Available everywhere on Friday, October 25th.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Music Section: Tracklist and Details -->
|
||
<section id="music" class="py-20 lg: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-500 font-bold">The New Release</h2>
|
||
<p class="mt-2 text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
||
Solstice Echoes
|
||
</p>
|
||
</div>
|
||
|
||
<div class="lg:flex lg:space-x-12">
|
||
<!-- Tracklist Column -->
|
||
<div class="lg:w-2/3 bg-gray-50 p-8 lg:p-12 rounded-xl shadow-xl border border-gray-100">
|
||
<h3 class="text-3xl font-display text-gray-900 mb-6 border-b pb-2 border-indigo-200">Track List</h3>
|
||
|
||
<div id="tracklist" class="space-y-4">
|
||
<!-- Track Item Template -->
|
||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||
<div class="w-10 flex-shrink-0 pt-1">
|
||
<span class="text-xl font-bold text-indigo-600">01</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<p class="text-lg font-semibold text-gray-900">Fading Light</p>
|
||
<p class="text-sm text-gray-500">3:45</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||
<div class="w-10 flex-shrink-0 pt-1">
|
||
<span class="text-xl font-bold text-indigo-600">02</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<p class="text-lg font-semibold text-gray-900">The Silent Bloom</p>
|
||
<p class="text-sm text-gray-500">4:12</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||
<div class="w-10 flex-shrink-0 pt-1">
|
||
<span class="text-xl font-bold text-indigo-600">03</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<p class="text-lg font-semibold text-gray-900">Drifting Currents</p>
|
||
<p class="text-sm text-gray-500">5:01</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start space-x-4 p-3 bg-white hover:bg-indigo-50 rounded-lg transition duration-200 shadow-sm border-l-4 border-indigo-400 focus-within:ring-2 ring-indigo-300 cursor-pointer">
|
||
<div class="w-10 flex-shrink-0 pt-1">
|
||
<span class="text-xl font-bold text-indigo-600">04</span>
|
||
</div>
|
||
<div class="flex-grow">
|
||
<p class="text-lg font-semibold text-gray-900">Horizon Pulse</p>
|
||
<p class="text-sm text-gray-500">3:22</p>
|
||
</div>
|
||
</div>
|
||
<!-- ... more tracks for visual depth -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sidebar/Bio Column -->
|
||
<div class="lg:w-1/3 mt-10 lg:mt-0">
|
||
<div class="bg-white p-8 rounded-xl shadow-2xl border-t-4 border-indigo-500 h-full">
|
||
<h3 class="text-2xl font-display text-gray-900 mb-4">Artist Insight</h3>
|
||
<p class="text-gray-600 mb-6 text-sm italic leading-relaxed">
|
||
"Solstice Echoes is a deeply personal journey, exploring the tension between stillness and constant motion. It’s about finding the quiet beauty in the noise of modern life—the echo in the bloom."
|
||
</p>
|
||
<div class="space-y-3">
|
||
<p><strong class="font-semibold text-indigo-600 block">Genre:</strong> Ambient Pop / Indie Soul</p>
|
||
<p><strong class="font-semibold text-indigo-600 block">Label:</strong> Stellar Sound Collective</p>
|
||
<p><strong class="font-semibold text-indigo-600 block">Produced By:</strong> Elias Vance</p>
|
||
</div>
|
||
<button onclick="window.location.hash='buy'" class="mt-8 w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
||
Purchase Physical Copy
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tour Dates Section -->
|
||
<section id="tour" class="py-20 lg: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-12">
|
||
<h2 class="text-sm uppercase tracking-widest text-indigo-500 font-bold">Upcoming Performances</h2>
|
||
<p class="mt-2 text-4xl lg:text-5xl font-display font-bold text-gray-900">
|
||
Tour Dates
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tour List -->
|
||
<div class="space-y-6 max-w-4xl mx-auto">
|
||
<!-- Tour Item Template -->
|
||
<div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg flex flex-col md:flex-row justify-between items-center hover:shadow-xl transition duration-300 border-l-8 border-red-500">
|
||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||
<p class="text-sm uppercase tracking-widest text-red-500 font-bold">May 12, 2024</p>
|
||
<h4 class="text-2xl font-display text-gray-900">The Grand Conservatory</h4>
|
||
<p class="text-gray-500 mt-1">New York, NY, USA</p>
|
||
</div>
|
||
<a href="#" class="btn-primary bg-red-500 text-white px-6 py-3 rounded-lg text-sm font-semibold hover:bg-red-400 focus:outline-none focus:ring-4 ring-red-300">
|
||
Get Tickets
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Tour Item Template -->
|
||
<div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg flex flex-col md:flex-row justify-between items-center hover:shadow-xl transition duration-300 border-l-8 border-indigo-500">
|
||
<div class="text-center md:text-left mb-4 md:mb-0">
|
||
<p class="text-sm<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.36s</div> |