File size: 14,975 Bytes
93b71f4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performance History | Groovy Beats & Smooth Seats</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.timeline-item:not(:last-child):after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 2px;
height: 40px;
background: linear-gradient(to bottom, rgba(217, 119, 6, 0.5), transparent);
}
.timeline-dot {
box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Navigation -->
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<i data-feather="music" class="text-amber-500"></i>
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a>
<a href="performances.html" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
<a href="history.html" class="text-amber-400 font-medium hover:text-amber-300 transition">History</a>
<a href="menu.html" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
</div>
<button class="md:hidden text-gray-300 focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="relative z-10 py-12">
<div class="container mx-auto px-6">
<div class="mb-12 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Legendary</span> Performances
</h1>
<p class="text-gray-400 max-w-2xl mx-auto">
For over five decades, Groovy Beats has hosted the most iconic names in jazz. Relive our storied past through these memorable performances.
</p>
</div>
<!-- Timeline -->
<div class="relative max-w-4xl mx-auto">
<!-- Timeline Line -->
<div class="absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-amber-500 to-transparent transform -translate-x-1/2"></div>
<!-- Timeline Items -->
<div class="space-y-16">
<!-- Timeline Item 1 -->
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
<div class="space-y-2">
<span class="text-sm text-amber-400 font-medium">May 12, 1967</span>
<h3 class="text-2xl font-bold">Miles Davis Quintet</h3>
<p class="text-gray-400">
Our opening night featured the legendary Miles Davis Quintet in one of their last performances before disbanding.
</p>
</div>
</div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-gray-800 rounded-xl overflow-hidden group">
<img src="http://static.photos/black/640x360/10" alt="Miles Davis performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-8 md:mb-0">
<div class="bg-gray-800 rounded-xl overflow-hidden group">
<img src="http://static.photos/black/640x360/11" alt="Ella Fitzgerald performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
</div>
</div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left text-right">
<div class="space-y-2">
<span class="text-sm text-amber-400 font-medium">November 8, 1972</span>
<h3 class="text-2xl font-bold">Ella Fitzgerald</h3>
<p class="text-gray-400">
The First Lady of Song graced our stage for three unforgettable nights, including a birthday celebration for a surprised audience member.
</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
<div class="space-y-2">
<span class="text-sm text-amber-400 font-medium">July 20, 1985</span>
<h3 class="text-2xl font-bold">Weather Report</h3>
<p class="text-gray-400">
The legendary fusion band delivered an explosive performance that had the audience dancing in the aisles.
</p>
</div>
</div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-gray-800 rounded-xl overflow-hidden group">
<img src="http://static.photos/black/640x360/12" alt="Weather Report performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="relative timeline-item">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 order-2 md:order-1 mb-8 md:mb-0">
<div class="bg-gray-800 rounded-xl overflow-hidden group">
<img src="http://static.photos/black/640x360/13" alt="Diana Krall performance" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
</div>
</div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full timeline-dot"></div>
<div class="md:w-1/2 md:pl-12 order-1 md:order-2 md:text-left text-right">
<div class="space-y-2">
<span class="text-sm text-amber-400 font-medium">March 15, 1999</span>
<h3 class="text-2xl font-bold">Diana Krall</h3>
<p class="text-gray-400">
Before her international fame, Diana Krall played an intimate set that showcased her incredible talent as both pianist and vocalist.
</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="relative">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right">
<div class="space-y-2">
<span class="text-sm text-amber-400 font-medium">October 5, 2015</span>
<h3 class="text-2xl font-bold">50th Anniversary Gala</h3>
<p class="text-gray-400">
A star-studded evening featuring alumni performers including Wynton Marsalis, Cassandra Wilson, and Chick Corea.
</p>
</div>
</div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-amber-500 rounded-full"></div>
<div class="md:w-1/2 md:pl-12">
<div class="bg-gray-800 rounded-xl overflow-hidden group">
<img src="http://static.photos/black/640x360/14" alt="Anniversary gala" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Gallery CTA -->
<div class="mt-20 text-center">
<h2 class="text-3xl font-bold mb-6">
Want to see more from our history?
</h2>
<p class="text-gray-400 max-w-2xl mx-auto mb-8">
Visit our photo gallery to explore hundreds of memorable moments from our club's rich history.
</p>
<a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-full text-lg font-medium transition">
View Photo Gallery
</a>
</div>
</div>
</main>
<!-- Footer -->
<footer class="relative z-10 bg-black bg-opacity-90 py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i data-feather="music" class="text-amber-500"></i>
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
</div>
<p class="text-gray-400">
The finest jazz experience in the city since 1965.
</p>
</div>
<div>
<h3 class="text-white font-medium mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li>
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li>
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-medium mb-4">Information</h3>
<ul class="space-y-2">
<li class="text-gray-400">123 Jazz Avenue</li>
<li class="text-gray-400">New York, NY 10001</li>
<li class="text-gray-400">(212) 555-7890</li>
<li class="text-gray-400">info@groovybeats.com</li>
</ul>
</div>
<div>
<h3 class="text-white font-medium mb-4">Opening Hours</h3>
<ul class="space-y-2">
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
<li class="text-gray-400">Sunday: 5PM - 12AM</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm mb-4 md:mb-0">
© 2023 Groovy Beats & Smooth Seats. All rights reserved.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-amber-400 transition">
<i data-feather="twitter"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>
|