Hugging Face's logo

Spaces:
Nrex
/
orange-fuzz-fest
Running

App Files Community
Nrex commited on
Commit
d454fbe
·
verified ·
1 Parent(s): 44b375b

Create a music festival landing page with artist/band lineup, stage schedule, venue map, ticket options with early bird pricing, photo gallery from previous years, camping information, FAQ, and buy tickets button.

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +362 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Orange Fuzz Fest
3
- emoji: 😻
4
- colorFrom: purple
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Orange Fuzz Fest 🎸
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,362 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Orange Fuzz Fest | The Ultimate Music Experience</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#f97316',
16
+ secondary: '#d946ef',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
23
+ <script src="https://unpkg.com/feather-icons"></script>
24
+ <script src="components/navbar.js"></script>
25
+ <script src="components/lineup-card.js"></script>
26
+ <script src="components/schedule-item.js"></script>
27
+ <script src="components/faq-item.js"></script>
28
+ <script src="components/footer.js"></script>
29
+ </head>
30
+ <body class="bg-gray-900 text-gray-100">
31
+ <custom-navbar></custom-navbar>
32
+
33
+ <!-- Hero Section -->
34
+ <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-primary/20 overflow-hidden">
35
+ <div class="absolute inset-0 bg-[url('http://static.photos/music/1200x630/42')] bg-cover bg-center opacity-30"></div>
36
+ <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
37
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
38
+ Orange Fuzz Fest
39
+ </h1>
40
+ <p class="text-xl md:text-2xl mb-8">3 Days of Pure Music Madness • July 12-14, 2024</p>
41
+ <div class="flex flex-wrap justify-center gap-4">
42
+ <a href="#tickets" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-bold text-lg hover:scale-105 transition-transform">
43
+ Get Tickets Now
44
+ </a>
45
+ <a href="#lineup" class="px-8 py-4 border-2 border-secondary rounded-full font-bold text-lg hover:bg-secondary/20 transition-colors">
46
+ See Lineup
47
+ </a>
48
+ </div>
49
+ </div>
50
+ <div class="absolute bottom-10 left-0 right-0 text-center">
51
+ <a href="#about" class="animate-bounce inline-block">
52
+ <i data-feather="chevron-down" class="w-10 h-10"></i>
53
+ </a>
54
+ </div>
55
+ </section>
56
+
57
+ <!-- About Section -->
58
+ <section id="about" class="py-20 px-4 max-w-6xl mx-auto">
59
+ <div class="text-center mb-16">
60
+ <h2 class="text-4xl font-bold mb-4">The Ultimate Music Experience</h2>
61
+ <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div>
62
+ <p class="text-xl max-w-3xl mx-auto">
63
+ Orange Fuzz Fest returns for its 5th year with an explosive lineup of rock, indie, electronic, and alternative artists across 4 stages in the heart of the desert.
64
+ </p>
65
+ </div>
66
+ <div class="grid md:grid-cols-3 gap-8">
67
+ <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors">
68
+ <div class="text-primary mb-4">
69
+ <i data-feather="music" class="w-10 h-10"></i>
70
+ </div>
71
+ <h3 class="text-2xl font-bold mb-3">100+ Artists</h3>
72
+ <p>From chart-topping headliners to emerging talent across all genres.</p>
73
+ </div>
74
+ <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors">
75
+ <div class="text-primary mb-4">
76
+ <i data-feather="map" class="w-10 h-10"></i>
77
+ </div>
78
+ <h3 class="text-2xl font-bold mb-3">4 Unique Stages</h3>
79
+ <p>Each with its own vibe and production, from intimate to massive.</p>
80
+ </div>
81
+ <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors">
82
+ <div class="text-primary mb-4">
83
+ <i data-feather="users" class="w-10 h-10"></i>
84
+ </div>
85
+ <h3 class="text-2xl font-bold mb-3">20,000 Music Lovers</h3>
86
+ <p>Join our vibrant community of festival-goers from around the world.</p>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Lineup Section -->
92
+ <section id="lineup" class="py-20 bg-gray-800">
93
+ <div class="px-4 max-w-6xl mx-auto">
94
+ <div class="text-center mb-16">
95
+ <h2 class="text-4xl font-bold mb-4">2024 Lineup</h2>
96
+ <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div>
97
+ <p class="text-xl max-w-3xl mx-auto">
98
+ Our most diverse lineup yet featuring artists you love and ones you'll discover.
99
+ </p>
100
+ </div>
101
+
102
+ <div class="mb-12">
103
+ <h3 class="text-2xl font-bold mb-6 text-primary">Headliners</h3>
104
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
105
+ <custom-lineup-card
106
+ name="The Electric Sun"
107
+ genre="Alternative Rock"
108
+ day="Friday"
109
+ image="http://static.photos/music/400x400/1">
110
+ </custom-lineup-card>
111
+ <custom-lineup-card
112
+ name="Neon Dreams"
113
+ genre="Electronic"
114
+ day="Saturday"
115
+ image="http://static.photos/music/400x400/2">
116
+ </custom-lineup-card>
117
+ <custom-lineup-card
118
+ name="Desert Echo"
119
+ genre="Indie Folk"
120
+ day="Sunday"
121
+ image="http://static.photos/music/400x400/3">
122
+ </custom-lineup-card>
123
+ <custom-lineup-card
124
+ name="Fuzzy Logic"
125
+ genre="Psychedelic Rock"
126
+ day="All Weekend"
127
+ image="http://static.photos/music/400x400/4">
128
+ </custom-lineup-card>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="mb-12">
133
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Supporting Acts</h3>
134
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
135
+ <custom-lineup-card
136
+ name="The Midnight Waves"
137
+ genre="Synthwave"
138
+ day="Friday"
139
+ image="http://static.photos/music/400x400/5">
140
+ </custom-lineup-card>
141
+ <custom-lineup-card
142
+ name="Solar Flares"
143
+ genre="Indie Rock"
144
+ day="Saturday"
145
+ image="http://static.photos/music/400x400/6">
146
+ </custom-lineup-card>
147
+ <custom-lineup-card
148
+ name="Cosmic Dust"
149
+ genre="Dream Pop"
150
+ day="Sunday"
151
+ image="http://static.photos/music/400x400/7">
152
+ </custom-lineup-card>
153
+ <custom-lineup-card
154
+ name="The Echo Chamber"
155
+ genre="Post-Punk"
156
+ day="Friday"
157
+ image="http://static.photos/music/400x400/8">
158
+ </custom-lineup-card>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="text-center">
163
+ <button class="px-6 py-3 border border-secondary rounded-full font-bold hover:bg-secondary/20 transition-colors">
164
+ View Full Lineup
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Schedule Section -->
171
+ <section id="schedule" class="py-20 px-4 max-w-6xl mx-auto">
172
+ <div class="text-center mb-16">
173
+ <h2 class="text-4xl font-bold mb-4">Stage Schedule</h2>
174
+ <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div>
175
+ <p class="text-xl max-w-3xl mx-auto">
176
+ Plan your weekend with our detailed performance schedule.
177
+ </p>
178
+ </div>
179
+
180
+ <div class="mb-12">
181
+ <div class="flex justify-center mb-8">
182
+ <div class="inline-flex rounded-md shadow-sm" role="group">
183
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-primary">
184
+ Friday
185
+ </button>
186
+ <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 hover:bg-gray-600">
187
+ Saturday
188
+ </button>
189
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-700 hover:bg-gray-600">
190
+ Sunday
191
+ </button>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="grid md:grid-cols-2 gap-6">
196
+ <div class="bg-gray-800 rounded-xl p-6">
197
+ <h3 class="text-2xl font-bold mb-6 text-primary">Main Stage</h3>
198
+ <div class="space-y-4">
199
+ <custom-schedule-item
200
+ time="6:00 PM"
201
+ artist="The Echo Chamber"
202
+ duration="45 min">
203
+ </custom-schedule-item>
204
+ <custom-schedule-item
205
+ time="7:15 PM"
206
+ artist="The Midnight Waves"
207
+ duration="1 hour">
208
+ </custom-schedule-item>
209
+ <custom-schedule-item
210
+ time="8:45 PM"
211
+ artist="The Electric Sun"
212
+ duration="1.5 hours">
213
+ </custom-schedule-item>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="bg-gray-800 rounded-xl p-6">
218
+ <h3 class="text-2xl font-bold mb-6 text-secondary">Electric Oasis</h3>
219
+ <div class="space-y-4">
220
+ <custom-schedule-item
221
+ time="5:30 PM"
222
+ artist="DJ Solar Flare"
223
+ duration="1 hour">
224
+ </custom-schedule-item>
225
+ <custom-schedule-item
226
+ time="7:00 PM"
227
+ artist="Neon Dreams"
228
+ duration="1.5 hours">
229
+ </custom-schedule-item>
230
+ <custom-schedule-item
231
+ time="9:00 PM"
232
+ artist="Fuzzy Logic"
233
+ duration="2 hours">
234
+ </custom-schedule-item>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Venue Map Section -->
242
+ <section id="venue" class="py-20 bg-gray-800">
243
+ <div class="px-4 max-w-6xl mx-auto">
244
+ <div class="text-center mb-16">
245
+ <h2 class="text-4xl font-bold mb-4">Venue Map</h2>
246
+ <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div>
247
+ <p class="text-xl max-w-3xl mx-auto">
248
+ Explore our festival grounds and plan your adventure.
249
+ </p>
250
+ </div>
251
+
252
+ <div class="bg-gray-700 rounded-xl overflow-hidden">
253
+ <div class="aspect-w-16 aspect-h-9 bg-gray-600 relative">
254
+ <img src="http://static.photos/outdoor/1200x630/10" alt="Festival Map" class="w-full h-full object-cover opacity-70">
255
+ <div class="absolute inset-0 flex items-center justify-center">
256
+ <button class="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-bold text-lg hover:scale-105 transition-transform">
257
+ View Interactive Map
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="grid md:grid-cols-4 gap-6 mt-8">
264
+ <div class="bg-gray-700 p-4 rounded-lg">
265
+ <h4 class="font-bold mb-2 text-primary">Main Stage</h4>
266
+ <p class="text-sm">Capacity: 10,000</p>
267
+ </div>
268
+ <div class="bg-gray-700 p-4 rounded-lg">
269
+ <h4 class="font-bold mb-2 text-secondary">Electric Oasis</h4>
270
+ <p class="text-sm">Capacity: 5,000</p>
271
+ </div>
272
+ <div class="bg-gray-700 p-4 rounded-lg">
273
+ <h4 class="font-bold mb-2 text-primary">Food & Drinks</h4>
274
+ <p class="text-sm">50+ vendors</p>
275
+ </div>
276
+ <div class="bg-gray-700 p-4 rounded-lg">
277
+ <h4 class="font-bold mb-2 text-secondary">Camping</h4>
278
+ <p class="text-sm">5 minute walk</p>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Tickets Section -->
285
+ <section id="tickets" class="py-20 px-4 max-w-6xl mx-auto">
286
+ <div class="text-center mb-16">
287
+ <h2 class="text-4xl font-bold mb-4">Ticket Options</h2>
288
+ <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div>
289
+ <p class="text-xl max-w-3xl mx-auto">
290
+ Early bird pricing available for a limited time. All tickets include camping access.
291
+ </p>
292
+ </div>
293
+
294
+ <div class="grid md:grid-cols-3 gap-8">
295
+ <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-primary transition-colors">
296
+ <h3 class="text-2xl font-bold mb-4">Weekend Pass</h3>
297
+ <div class="text-4xl font-bold mb-6">$199<span class="text-lg text-gray-400">/person</span></div>
298
+ <ul class="space-y-3 mb-8">
299
+ <li class="flex items-center">
300
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
301
+ Access to all 3 days
302
+ </li>
303
+ <li class="flex items-center">
304
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
305
+ General camping
306
+ </li>
307
+ <li class="flex items-center">
308
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
309
+ All stages
310
+ </li>
311
+ </ul>
312
+ <button class="w-full py-3 bg-primary rounded-full font-bold hover:bg-primary/80 transition-colors">
313
+ Buy Now
314
+ </button>
315
+ </div>
316
+
317
+ <div class="bg-gray-800 rounded-xl p-8 border-2 border-primary relative">
318
+ <div class="absolute top-0 right-0 bg-primary text-gray-900 px-4 py-1 font-bold rounded-bl-lg">
319
+ POPULAR
320
+ </div>
321
+ <h3 class="text-2xl font-bold mb-4">VIP Experience</h3>
322
+ <div class="text-4xl font-bold mb-6">$399<span class="text-lg text-gray-400">/person</span></div>
323
+ <ul class="space-y-3 mb-8">
324
+ <li class="flex items-center">
325
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
326
+ All weekend pass benefits
327
+ </li>
328
+ <li class="flex items-center">
329
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
330
+ VIP viewing areas
331
+ </li>
332
+ <li class="flex items-center">
333
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
334
+ Private bars & restrooms
335
+ </li>
336
+ <li class="flex items-center">
337
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
338
+ Exclusive merch
339
+ </li>
340
+ </ul>
341
+ <button class="w-full py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity">
342
+ Buy Now
343
+ </button>
344
+ </div>
345
+
346
+ <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-secondary transition-colors">
347
+ <h3 class="text-2xl font-bold mb-4">Single Day</h3>
348
+ <div class="text-4xl font-bold mb-6">$89<span class="text-lg text-gray-400">/person</span></div>
349
+ <ul class="space-y-3 mb-8">
350
+ <li class="flex items-center">
351
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
352
+ Choose your day
353
+ </li>
354
+ <li class="flex items-center">
355
+ <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i>
356
+ General camping
357
+ </li>
358
+ <li class="flex items-center">
359
+ <i data-feather="check" class="w-5 h-5 mr-2
360
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
361
+ </body>
362
+ </html>