Hugging Face's logo

Spaces:
LukeDunsMoto
/
anycoder-28d21ddd
Running

App Files Community
LukeDunsMoto commited on
Commit
c1125a2
·
verified ·
1 Parent(s): 33c6e20

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1109 -19
index.html CHANGED
@@ -1,19 +1,1109 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Themeparkify - Ultimate Theme Park Experience</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #FF6B6B;
11
+ --secondary-color: #4ECDC4;
12
+ --accent-color: #FFE66D;
13
+ --dark-color: #2D3436;
14
+ --light-color: #F7F9FC;
15
+ --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
17
+ --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
18
+ --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ line-height: 1.6;
30
+ color: var(--dark-color);
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ /* Scrollbar Styling */
35
+ ::-webkit-scrollbar {
36
+ width: 10px;
37
+ }
38
+
39
+ ::-webkit-scrollbar-track {
40
+ background: #f1f1f1;
41
+ }
42
+
43
+ ::-webkit-scrollbar-thumb {
44
+ background: var(--primary-color);
45
+ border-radius: 10px;
46
+ }
47
+
48
+ /* Header & Navigation */
49
+ header {
50
+ position: fixed;
51
+ top: 0;
52
+ width: 100%;
53
+ background: rgba(255, 255, 255, 0.95);
54
+ backdrop-filter: blur(10px);
55
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
56
+ z-index: 1000;
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ nav {
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ padding: 1rem 5%;
65
+ max-width: 1400px;
66
+ margin: 0 auto;
67
+ }
68
+
69
+ .logo {
70
+ font-size: 2rem;
71
+ font-weight: bold;
72
+ background: var(--gradient-2);
73
+ -webkit-background-clip: text;
74
+ -webkit-text-fill-color: transparent;
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 0.5rem;
78
+ }
79
+
80
+ .logo i {
81
+ -webkit-text-fill-color: var(--primary-color);
82
+ }
83
+
84
+ .nav-links {
85
+ display: flex;
86
+ list-style: none;
87
+ gap: 2rem;
88
+ align-items: center;
89
+ }
90
+
91
+ .nav-links a {
92
+ text-decoration: none;
93
+ color: var(--dark-color);
94
+ font-weight: 500;
95
+ transition: all 0.3s ease;
96
+ position: relative;
97
+ }
98
+
99
+ .nav-links a::after {
100
+ content: '';
101
+ position: absolute;
102
+ bottom: -5px;
103
+ left: 0;
104
+ width: 0;
105
+ height: 3px;
106
+ background: var(--primary-color);
107
+ transition: width 0.3s ease;
108
+ }
109
+
110
+ .nav-links a:hover::after {
111
+ width: 100%;
112
+ }
113
+
114
+ .nav-links a:hover {
115
+ color: var(--primary-color);
116
+ transform: translateY(-2px);
117
+ }
118
+
119
+ .mobile-menu {
120
+ display: none;
121
+ font-size: 1.5rem;
122
+ cursor: pointer;
123
+ color: var(--primary-color);
124
+ }
125
+
126
+ /* Hero Section */
127
+ .hero {
128
+ margin-top: 80px;
129
+ height: 100vh;
130
+ background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
131
+ url('https://picsum.photos/seed/themepark/1920/1080.jpg') center/cover;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ position: relative;
136
+ overflow: hidden;
137
+ }
138
+
139
+ .hero-content {
140
+ text-align: center;
141
+ color: white;
142
+ z-index: 2;
143
+ animation: fadeInUp 1s ease;
144
+ }
145
+
146
+ .hero h1 {
147
+ font-size: 4rem;
148
+ margin-bottom: 1rem;
149
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
150
+ }
151
+
152
+ .hero p {
153
+ font-size: 1.5rem;
154
+ margin-bottom: 2rem;
155
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
156
+ }
157
+
158
+ .cta-buttons {
159
+ display: flex;
160
+ gap: 1rem;
161
+ justify-content: center;
162
+ flex-wrap: wrap;
163
+ }
164
+
165
+ .btn {
166
+ padding: 1rem 2rem;
167
+ border: none;
168
+ border-radius: 50px;
169
+ font-size: 1.1rem;
170
+ font-weight: bold;
171
+ cursor: pointer;
172
+ transition: all 0.3s ease;
173
+ text-decoration: none;
174
+ display: inline-block;
175
+ }
176
+
177
+ .btn-primary {
178
+ background: var(--gradient-2);
179
+ color: white;
180
+ box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
181
+ }
182
+
183
+ .btn-primary:hover {
184
+ transform: translateY(-3px);
185
+ box-shadow: 0 6px 20px rgba(245, 87, 108, 0.5);
186
+ }
187
+
188
+ .btn-secondary {
189
+ background: white;
190
+ color: var(--primary-color);
191
+ border: 2px solid white;
192
+ }
193
+
194
+ .btn-secondary:hover {
195
+ background: transparent;
196
+ color: white;
197
+ transform: translateY(-3px);
198
+ }
199
+
200
+ /* Floating Animation */
201
+ .floating {
202
+ animation: float 3s ease-in-out infinite;
203
+ }
204
+
205
+ @keyframes float {
206
+ 0%, 100% { transform: translateY(0); }
207
+ 50% { transform: translateY(-20px); }
208
+ }
209
+
210
+ @keyframes fadeInUp {
211
+ from {
212
+ opacity: 0;
213
+ transform: translateY(30px);
214
+ }
215
+ to {
216
+ opacity: 1;
217
+ transform: translateY(0);
218
+ }
219
+ }
220
+
221
+ /* Features Section */
222
+ .features {
223
+ padding: 5rem 5%;
224
+ background: var(--light-color);
225
+ }
226
+
227
+ .section-title {
228
+ text-align: center;
229
+ font-size: 3rem;
230
+ margin-bottom: 1rem;
231
+ background: var(--gradient-1);
232
+ -webkit-background-clip: text;
233
+ -webkit-text-fill-color: transparent;
234
+ }
235
+
236
+ .section-subtitle {
237
+ text-align: center;
238
+ font-size: 1.2rem;
239
+ margin-bottom: 3rem;
240
+ color: #666;
241
+ }
242
+
243
+ .features-grid {
244
+ display: grid;
245
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
246
+ gap: 2rem;
247
+ max-width: 1200px;
248
+ margin: 0 auto;
249
+ }
250
+
251
+ .feature-card {
252
+ background: white;
253
+ padding: 2rem;
254
+ border-radius: 20px;
255
+ text-align: center;
256
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
257
+ transition: all 0.3s ease;
258
+ position: relative;
259
+ overflow: hidden;
260
+ }
261
+
262
+ .feature-card::before {
263
+ content: '';
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ width: 100%;
268
+ height: 5px;
269
+ background: var(--gradient-2);
270
+ }
271
+
272
+ .feature-card:hover {
273
+ transform: translateY(-10px);
274
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
275
+ }
276
+
277
+ .feature-icon {
278
+ font-size: 3rem;
279
+ margin-bottom: 1rem;
280
+ background: var(--gradient-3);
281
+ -webkit-background-clip: text;
282
+ -webkit-text-fill-color: transparent;
283
+ }
284
+
285
+ .feature-card h3 {
286
+ font-size: 1.5rem;
287
+ margin-bottom: 1rem;
288
+ color: var(--dark-color);
289
+ }
290
+
291
+ /* Attractions Section */
292
+ .attractions {
293
+ padding: 5rem 5%;
294
+ background: white;
295
+ }
296
+
297
+ .attractions-grid {
298
+ display: grid;
299
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
300
+ gap: 2rem;
301
+ max-width: 1200px;
302
+ margin: 0 auto;
303
+ }
304
+
305
+ .attraction-card {
306
+ background: white;
307
+ border-radius: 15px;
308
+ overflow: hidden;
309
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
310
+ transition: all 0.3s ease;
311
+ cursor: pointer;
312
+ }
313
+
314
+ .attraction-card:hover {
315
+ transform: scale(1.05);
316
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
317
+ }
318
+
319
+ .attraction-image {
320
+ width: 100%;
321
+ height: 200px;
322
+ object-fit: cover;
323
+ transition: transform 0.3s ease;
324
+ }
325
+
326
+ .attraction-card:hover .attraction-image {
327
+ transform: scale(1.1);
328
+ }
329
+
330
+ .attraction-info {
331
+ padding: 1.5rem;
332
+ }
333
+
334
+ .attraction-info h3 {
335
+ font-size: 1.5rem;
336
+ margin-bottom: 0.5rem;
337
+ color: var(--dark-color);
338
+ }
339
+
340
+ .attraction-info p {
341
+ color: #666;
342
+ margin-bottom: 1rem;
343
+ }
344
+
345
+ .attraction-meta {
346
+ display: flex;
347
+ justify-content: space-between;
348
+ align-items: center;
349
+ }
350
+
351
+ .thrill-level {
352
+ display: flex;
353
+ gap: 0.25rem;
354
+ }
355
+
356
+ .thrill-level i {
357
+ color: var(--accent-color);
358
+ }
359
+
360
+ /* Ticket Pricing Section */
361
+ .tickets {
362
+ padding: 5rem 5%;
363
+ background: var(--light-color);
364
+ }
365
+
366
+ .pricing-grid {
367
+ display: grid;
368
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
369
+ gap: 2rem;
370
+ max-width: 1000px;
371
+ margin: 0 auto;
372
+ }
373
+
374
+ .pricing-card {
375
+ background: white;
376
+ border-radius: 20px;
377
+ padding: 2rem;
378
+ text-align: center;
379
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
380
+ transition: all 0.3s ease;
381
+ position: relative;
382
+ }
383
+
384
+ .pricing-card.featured {
385
+ transform: scale(1.05);
386
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
387
+ }
388
+
389
+ .pricing-card.featured::before {
390
+ content: 'BEST VALUE';
391
+ position: absolute;
392
+ top: -15px;
393
+ left: 50%;
394
+ transform: translateX(-50%);
395
+ background: var(--gradient-2);
396
+ color: white;
397
+ padding: 0.5rem 1rem;
398
+ border-radius: 20px;
399
+ font-size: 0.8rem;
400
+ font-weight: bold;
401
+ }
402
+
403
+ .pricing-card:hover {
404
+ transform: translateY(-10px);
405
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
406
+ }
407
+
408
+ .pricing-card.featured:hover {
409
+ transform: scale(1.05) translateY(-10px);
410
+ }
411
+
412
+ .price {
413
+ font-size: 3rem;
414
+ font-weight: bold;
415
+ color: var(--primary-color);
416
+ margin: 1rem 0;
417
+ }
418
+
419
+ .price span {
420
+ font-size: 1rem;
421
+ color: #666;
422
+ }
423
+
424
+ .pricing-features {
425
+ list-style: none;
426
+ margin: 2rem 0;
427
+ }
428
+
429
+ .pricing-features li {
430
+ padding: 0.5rem 0;
431
+ color: #666;
432
+ }
433
+
434
+ .pricing-features i {
435
+ color: var(--secondary-color);
436
+ margin-right: 0.5rem;
437
+ }
438
+
439
+ /* Events Section */
440
+ .events {
441
+ padding: 5rem 5%;
442
+ background: white;
443
+ }
444
+
445
+ .events-container {
446
+ max-width: 1200px;
447
+ margin: 0 auto;
448
+ }
449
+
450
+ .event-card {
451
+ display: flex;
452
+ background: white;
453
+ border-radius: 15px;
454
+ overflow: hidden;
455
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
456
+ margin-bottom: 2rem;
457
+ transition: all 0.3s ease;
458
+ }
459
+
460
+ .event-card:hover {
461
+ transform: translateX(10px);
462
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
463
+ }
464
+
465
+ .event-date {
466
+ background: var(--gradient-1);
467
+ color: white;
468
+ padding: 2rem;
469
+ display: flex;
470
+ flex-direction: column;
471
+ align-items: center;
472
+ justify-content: center;
473
+ min-width: 120px;
474
+ }
475
+
476
+ .event-date .day {
477
+ font-size: 2.5rem;
478
+ font-weight: bold;
479
+ }
480
+
481
+ .event-date .month {
482
+ font-size: 1rem;
483
+ text-transform: uppercase;
484
+ }
485
+
486
+ .event-details {
487
+ padding: 2rem;
488
+ flex: 1;
489
+ }
490
+
491
+ .event-details h3 {
492
+ font-size: 1.5rem;
493
+ margin-bottom: 0.5rem;
494
+ color: var(--dark-color);
495
+ }
496
+
497
+ .event-details p {
498
+ color: #666;
499
+ margin-bottom: 1rem;
500
+ }
501
+
502
+ .event-meta {
503
+ display: flex;
504
+ gap: 2rem;
505
+ color: #666;
506
+ }
507
+
508
+ .event-meta i {
509
+ color: var(--primary-color);
510
+ margin-right: 0.5rem;
511
+ }
512
+
513
+ /* Gallery Section */
514
+ .gallery {
515
+ padding: 5rem 5%;
516
+ background: var(--light-color);
517
+ }
518
+
519
+ .gallery-grid {
520
+ display: grid;
521
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
522
+ gap: 1rem;
523
+ max-width: 1200px;
524
+ margin: 0 auto;
525
+ }
526
+
527
+ .gallery-item {
528
+ position: relative;
529
+ overflow: hidden;
530
+ border-radius: 15px;
531
+ height: 250px;
532
+ cursor: pointer;
533
+ }
534
+
535
+ .gallery-item img {
536
+ width: 100%;
537
+ height: 100%;
538
+ object-fit: cover;
539
+ transition: transform 0.3s ease;
540
+ }
541
+
542
+ .gallery-item:hover img {
543
+ transform: scale(1.1);
544
+ }
545
+
546
+ .gallery-overlay {
547
+ position: absolute;
548
+ top: 0;
549
+ left: 0;
550
+ width: 100%;
551
+ height: 100%;
552
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
553
+ display: flex;
554
+ align-items: flex-end;
555
+ padding: 1rem;
556
+ opacity: 0;
557
+ transition: opacity 0.3s ease;
558
+ }
559
+
560
+ .gallery-item:hover .gallery-overlay {
561
+ opacity: 1;
562
+ }
563
+
564
+ .gallery-overlay h4 {
565
+ color: white;
566
+ font-size: 1.2rem;
567
+ }
568
+
569
+ /* Contact Section */
570
+ .contact {
571
+ padding: 5rem 5%;
572
+ background: white;
573
+ }
574
+
575
+ .contact-container {
576
+ max-width: 1200px;
577
+ margin: 0 auto;
578
+ display: grid;
579
+ grid-template-columns: 1fr 1fr;
580
+ gap: 3rem;
581
+ }
582
+
583
+ .contact-info {
584
+ padding: 2rem;
585
+ }
586
+
587
+ .contact-info h3 {
588
+ font-size: 2rem;
589
+ margin-bottom: 2rem;
590
+ color: var(--dark-color);
591
+ }
592
+
593
+ .contact-item {
594
+ display: flex;
595
+ align-items: center;
596
+ margin-bottom: 1.5rem;
597
+ }
598
+
599
+ .contact-item i {
600
+ font-size: 1.5rem;
601
+ color: var(--primary-color);
602
+ margin-right: 1rem;
603
+ width: 30px;
604
+ }
605
+
606
+ .contact-form {
607
+ background: var(--light-color);
608
+ padding: 2rem;
609
+ border-radius: 20px;
610
+ }
611
+
612
+ .form-group {
613
+ margin-bottom: 1.5rem;
614
+ }
615
+
616
+ .form-group label {
617
+ display: block;
618
+ margin-bottom: 0.5rem;
619
+ color: var(--dark-color);
620
+ font-weight: 500;
621
+ }
622
+
623
+ .form-group input,
624
+ .form-group textarea {
625
+ width: 100%;
626
+ padding: 0.75rem;
627
+ border: 2px solid #e0e0e0;
628
+ border-radius: 10px;
629
+ font-size: 1rem;
630
+ transition: border-color 0.3s ease;
631
+ }
632
+
633
+ .form-group input:focus,
634
+ .form-group textarea:focus {
635
+ outline: none;
636
+ border-color: var(--primary-color);
637
+ }
638
+
639
+ /* Footer */
640
+ footer {
641
+ background: var(--dark-color);
642
+ color: white;
643
+ padding: 3rem 5%;
644
+ }
645
+
646
+ .footer-content {
647
+ max-width: 1200px;
648
+ margin: 0 auto;
649
+ display: grid;
650
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
651
+ gap: 2rem;
652
+ }
653
+
654
+ .footer-section h4 {
655
+ margin-bottom: 1rem;
656
+ color: var(--accent-color);
657
+ }
658
+
659
+ .footer-section ul {
660
+ list-style: none;
661
+ }
662
+
663
+ .footer-section ul li {
664
+ margin-bottom: 0.5rem;
665
+ }
666
+
667
+ .footer-section a {
668
+ color: #ccc;
669
+ text-decoration: none;
670
+ transition: color 0.3s ease;
671
+ }
672
+
673
+ .footer-section a:hover {
674
+ color: var(--primary-color);
675
+ }
676
+
677
+ .social-links {
678
+ display: flex;
679
+ gap: 1rem;
680
+ margin-top: 1rem;
681
+ }
682
+
683
+ .social-links a {
684
+ width: 40px;
685
+ height: 40px;
686
+ background: rgba(255, 255, 255, 0.1);
687
+ border-radius: 50%;
688
+ display: flex;
689
+ align-items: center;
690
+ justify-content: center;
691
+ transition: all 0.3s ease;
692
+ }
693
+
694
+ .social-links a:hover {
695
+ background: var(--primary-color);
696
+ transform: translateY(-3px);
697
+ }
698
+
699
+ .footer-bottom {
700
+ text-align: center;
701
+ margin-top: 2rem;
702
+ padding-top: 2rem;
703
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
704
+ }
705
+
706
+ /* Responsive Design */
707
+ @media (max-width: 768px) {
708
+ .nav-links {
709
+ display: none;
710
+ }
711
+
712
+ .mobile-menu {
713
+ display: block;
714
+ }
715
+
716
+ .hero h1 {
717
+ font-size: 2.5rem;
718
+ }
719
+
720
+ .hero p {
721
+ font-size: 1.2rem;
722
+ }
723
+
724
+ .event-card {
725
+ flex-direction: column;
726
+ }
727
+
728
+ .contact-container {
729
+ grid-template-columns: 1fr;
730
+ }
731
+
732
+ .section-title {
733
+ font-size: 2rem;
734
+ }
735
+ }
736
+
737
+ /* Mobile Navigation Menu */
738
+ .mobile-nav {
739
+ position: fixed;
740
+ top: 0;
741
+ right: -100%;
742
+ width: 80%;
743
+ height: 100vh;
744
+ background: white;
745
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
746
+ transition: right 0.3s ease;
747
+ z-index: 1001;
748
+ padding: 2rem;
749
+ }
750
+
751
+ .mobile-nav.active {
752
+ right: 0;
753
+ }
754
+
755
+ .mobile-nav-links {
756
+ list-style: none;
757
+ margin-top: 3rem;
758
+ }
759
+
760
+ .mobile-nav-links li {
761
+ margin-bottom: 1.5rem;
762
+ }
763
+
764
+ .mobile-nav-links a {
765
+ color: var(--dark-color);
766
+ text-decoration: none;
767
+ font-size: 1.2rem;
768
+ font-weight: 500;
769
+ transition: color 0.3s ease;
770
+ }
771
+
772
+ .mobile-nav-links a:hover {
773
+ color: var(--primary-color);
774
+ }
775
+
776
+ .close-menu {
777
+ position: absolute;
778
+ top: 1rem;
779
+ right: 1rem;
780
+ font-size: 1.5rem;
781
+ cursor: pointer;
782
+ color: var(--primary-color);
783
+ }
784
+
785
+ /* Loading Animation */
786
+ .loader {
787
+ position: fixed;
788
+ top: 0;
789
+ left: 0;
790
+ width: 100%;
791
+ height: 100%;
792
+ background: white;
793
+ display: flex;
794
+ justify-content: center;
795
+ align-items: center;
796
+ z-index: 9999;
797
+ transition: opacity 0.5s ease;
798
+ }
799
+
800
+ .loader.hidden {
801
+ opacity: 0;
802
+ pointer-events: none;
803
+ }
804
+
805
+ .loader-content {
806
+ text-align: center;
807
+ }
808
+
809
+ .loader-spinner {
810
+ width: 60px;
811
+ height: 60px;
812
+ border: 5px solid #f3f3f3;
813
+ border-top: 5px solid var(--primary-color);
814
+ border-radius: 50%;
815
+ animation: spin 1s linear infinite;
816
+ margin: 0 auto 1rem;
817
+ }
818
+
819
+ @keyframes spin {
820
+ 0% { transform: rotate(0deg); }
821
+ 100% { transform: rotate(360deg); }
822
+ }
823
+ </style>
824
+ </head>
825
+ <body>
826
+ <!-- Loading Screen -->
827
+ <div class="loader" id="loader">
828
+ <div class="loader-content">
829
+ <div class="loader-spinner"></div>
830
+ <h2>Loading Magic...</h2>
831
+ </div>
832
+ </div>
833
+
834
+ <!-- Header -->
835
+ <header id="header">
836
+ <nav>
837
+ <div class="logo">
838
+ <i class="fas fa-star"></i>
839
+ Themeparkify
840
+ </div>
841
+ <ul class="nav-links">
842
+ <li><a href="#home">Home</a></li>
843
+ <li><a href="#attractions">Attractions</a></li>
844
+ <li><a href="#tickets">Tickets</a></li>
845
+ <li><a href="#events">Events</a></li>
846
+ <li><a href="#gallery">Gallery</a></li>
847
+ <li><a href="#contact">Contact</a></li>
848
+ <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-color); font-weight: bold;">Built with anycoder</a></li>
849
+ </ul>
850
+ <div class="mobile-menu" id="mobileMenu">
851
+ <i class="fas fa-bars"></i>
852
+ </div>
853
+ </nav>
854
+ </header>
855
+
856
+ <!-- Mobile Navigation -->
857
+ <div class="mobile-nav" id="mobileNav">
858
+ <div class="close-menu" id="closeMenu">
859
+ <i class="fas fa-times"></i>
860
+ </div>
861
+ <ul class="mobile-nav-links">
862
+ <li><a href="#home">Home</a></li>
863
+ <li><a href="#attractions">Attractions</a></li>
864
+ <li><a href="#tickets">Tickets</a></li>
865
+ <li><a href="#events">Events</a></li>
866
+ <li><a href="#gallery">Gallery</a></li>
867
+ <li><a href="#contact">Contact</a></li>
868
+ <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></li>
869
+ </ul>
870
+ </div>
871
+
872
+ <!-- Hero Section -->
873
+ <section class="hero" id="home">
874
+ <div class="hero-content floating">
875
+ <h1>Where Dreams Come to Life</h1>
876
+ <p>Experience the ultimate adventure at Themeparkify!</p>
877
+ <div class="cta-buttons">
878
+ <a href="#tickets" class="btn btn-primary">Book Tickets Now</a>
879
+ <a href="#attractions" class="btn btn-secondary">Explore Rides</a>
880
+ </div>
881
+ </div>
882
+ </section>
883
+
884
+ <!-- Features Section -->
885
+ <section class="features">
886
+ <h2 class="section-title">Why Choose Themeparkify?</h2>
887
+ <p class="section-subtitle">Unforgettable experiences await at every corner</p>
888
+ <div class="features-grid">
889
+ <div class="feature-card">
890
+ <div class="feature-icon">
891
+ <i class="fas fa-rocket"></i>
892
+ </div>
893
+ <h3>Thrilling Rides</h3>
894
+ <p>Experience heart-pounding excitement with our world-class roller coasters and attractions.</p>
895
+ </div>
896
+ <div class="feature-card">
897
+ <div class="feature-icon">
898
+ <i class="fas fa-users"></i>
899
+ </div>
900
+ <h3>Family Fun</h3>
901
+ <p>Create lasting memories with rides and activities for all ages in our family zones.</p>
902
+ </div>
903
+ <div class="feature-card">
904
+ <div class="feature-icon">
905
+ <i class="fas fa-ticket-alt"></i>
906
+ </div>
907
+ <h3>Best Prices</h3>
908
+ <p>Get the best value with our flexible ticket options and special seasonal offers.</p>
909
+ </div>
910
+ <div class="feature-card">
911
+ <div class="feature-icon">
912
+ <i class="fas fa-shield-alt"></i>
913
+ </div>
914
+ <h3>Safety First</h3>
915
+ <p>Your safety is our priority with world-class safety measures and trained staff.</p>
916
+ </div>
917
+ </div>
918
+ </section>
919
+
920
+ <!-- Attractions Section -->
921
+ <section class="attractions" id="attractions">
922
+ <h2 class="section-title">Featured Attractions</h2>
923
+ <p class="section-subtitle">Discover our most popular rides and experiences</p>
924
+ <div class="attractions-grid">
925
+ <div class="attraction-card">
926
+ <img src="https://picsum.photos/seed/rollercoaster/400/300.jpg" alt="Thunder Bolt" class="attraction-image">
927
+ <div class="attraction-info">
928
+ <h3>Thunder Bolt</h3>
929
+ <p>Experience the ultimate adrenaline rush on our fastest coaster!</p>
930
+ <div class="attraction-meta">
931
+ <div class="thrill-level">
932
+ <i class="fas fa-star"></i>
933
+ <i class="fas fa-star"></i>
934
+ <i class="fas fa-star"></i>
935
+ <i class="fas fa-star"></i>
936
+ <i class="fas fa-star"></i>
937
+ </div>
938
+ <span>Min Height: 140cm</span>
939
+ </div>
940
+ </div>
941
+ </div>
942
+ <div class="attraction-card">
943
+ <img src="https://picsum.photos/seed/waterride/400/300.jpg" alt="Splash Mountain" class="attraction-image">
944
+ <div class="attraction-info">
945
+ <h3>Splash Mountain</h3>
946
+ <p>Cool down with this refreshing water adventure!</p>
947
+ <div class="attraction-meta">
948
+ <div class="thrill-level">
949
+ <i class="fas fa-star"></i>
950
+ <i class="fas fa-star"></i>
951
+ <i class="fas fa-star"></i>
952
+ <i class="far fa-star"></i>
953
+ <i class="far fa-star"></i>
954
+ </div>
955
+ <span>Min Height: 120cm</span>
956
+ </div>
957
+ </div>
958
+ </div>
959
+ <div class="attraction-card">
960
+ <img src="https://picsum.photos/seed/ferriswheel/400/300.jpg" alt="Sky Wheel" class="attraction-image">
961
+ <div class="attraction-info">
962
+ <h3>Sky Wheel</h3>
963
+ <p>Get a bird's eye view of the entire park!</p>
964
+ <div class="attraction-meta">
965
+ <div class="thrill-level">
966
+ <i class="fas fa-star"></i>
967
+ <i class="fas fa-star"></i>
968
+ <i class="far fa-star"></i>
969
+ <i class="far fa-star"></i>
970
+ <i class="far fa-star"></i>
971
+ </div>
972
+ <span>All Ages</span>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ <div class="attraction-card">
977
+ <img src="https://picsum.photos/seed/haunted/400/300.jpg" alt="Haunted Mansion" class="attraction-image">
978
+ <div class="attraction-info">
979
+ <h3>Haunted Mansion</h3>
980
+ <p>Dare to enter our spooky haunted house!</p>
981
+ <div class="attraction-meta">
982
+ <div class="thrill-level">
983
+ <i class="fas fa-star"></i>
984
+ <i class="fas fa-star"></i>
985
+ <i class="fas fa-star"></i>
986
+ <i class="far fa-star"></i>
987
+ <i class="far fa-star"></i>
988
+ </div>
989
+ <span>Min Height: 110cm</span>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ <div class="attraction-card">
994
+ <img src="https://picsum.photos/seed/carousel/400/300.jpg" alt="Magic Carousel" class="attraction-image">
995
+ <div class="attraction-info">
996
+ <h3>Magic Carousel</h3>
997
+ <p>A classic ride perfect for the little ones!</p>
998
+ <div class="attraction-meta">
999
+ <div class="thrill-level">
1000
+ <i class="fas fa-star"></i>
1001
+ <i class="far fa-star"></i>
1002
+ <i class="far fa-star"></i>
1003
+ <i class="far fa-star"></i>
1004
+ <i class="far fa-star"></i>
1005
+ </div>
1006
+ <span>All Ages</span>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ <div class="attraction-card">
1011
+ <img src="https://picsum.photos/seed/pendulum/400/300.jpg" alt="Giant Pendulum" class="attraction-image">
1012
+ <div class="attraction-info">
1013
+ <h3>Giant Pendulum</h3>
1014
+ <p>Swing to new heights on this thrilling ride!</p>
1015
+ <div class="attraction-meta">
1016
+ <div class="thrill-level">
1017
+ <i class="fas fa-star"></i>
1018
+ <i class="fas fa-star"></i>
1019
+ <i class="fas fa-star"></i>
1020
+ <i class="fas fa-star"></i>
1021
+ <i class="far fa-star"></i>
1022
+ </div>
1023
+ <span>Min Height: 130cm</span>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </section>
1029
+
1030
+ <!-- Ticket Pricing Section -->
1031
+ <section class="tickets" id="tickets">
1032
+ <h2 class="section-title">Ticket Pricing</h2>
1033
+ <p class="section-subtitle">Choose the perfect ticket for your adventure</p>
1034
+ <div class="pricing-grid">
1035
+ <div class="pricing-card">
1036
+ <h3>General Admission</h3>
1037
+ <div class="price">$49<span>/person</span></div>
1038
+ <ul class="pricing-features">
1039
+ <li><i class="fas fa-check"></i> Full day access</li>
1040
+ <li><i class="fas fa-check"></i> All general rides</li>
1041
+ <li><i class="fas fa-check"></i> Park map included</li>
1042
+ <li><i class="fas fa-check"></i> Free parking</li>
1043
+ <li><i class="fas fa-times" style="color: #ccc;"></i> Fast pass</li>
1044
+ </ul>
1045
+ <button class="btn btn-primary" style="width: 100%;">Buy Now</button>
1046
+ </div>
1047
+ <div class="pricing-card featured">
1048
+ <h3>Premium Pass</h3>
1049
+ <div class="price">$79<span>/person</span></div>
1050
+ <ul class="pricing-features">
1051
+ <li><i class="fas fa-check"></i> Full day access</li>
1052
+ <li><i class="fas fa-check"></i> All rides included</li>
1053
+ <li><i class="fas fa-check"></i> Fast pass included</li>
1054
+ <li><i class="fas fa-check"></i> Priority parking</li>
1055
+ <li><i class="fas fa-check"></i> Meal voucher</li>
1056
+ </ul>
1057
+ <button class="btn btn-primary" style="width: 100%;">Buy Now</button>
1058
+ </div>
1059
+ <div class="pricing-card">
1060
+ <h3>Family Package</h3>
1061
+ <div class="price">$179<span>/family (4)</span></div>
1062
+ <ul class="pricing-features">
1063
+ <li><i class="fas fa-check"></i> 4 General tickets</li>
1064
+ <li><i class="fas fa-check"></i> Family fast pass</li>
1065
+ <li><i class="fas fa-check"></i> Group discounts</li>
1066
+ <li><i class="fas fa-check"></i> Photo package</li>
1067
+ <li><i class="fas fa-check"></i> Kids meal included</li>
1068
+ </ul>
1069
+ <button class="btn btn-primary" style="width: 100%;">Buy Now</button>
1070
+ </div>
1071
+ </div>
1072
+ </section>
1073
+
1074
+ <!-- Events Section -->
1075
+ <section class="events" id="events">
1076
+ <h2 class="section-title">Upcoming Events</h2>
1077
+ <p class="section-subtitle">Don't miss our special events and celebrations</p>
1078
+ <div class="events-container">
1079
+ <div class="event-card">
1080
+ <div class="event-date">
1081
+ <div class="day">25</div>
1082
+ <div class="month">DEC</div>
1083
+ </div>
1084
+ <div class="event-details">
1085
+ <h3>Winter Wonderland Festival</h3>
1086
+ <p>Experience the magic of winter with special holiday shows, festive decorations, and seasonal treats!</p>
1087
+ <div class="event-meta">
1088
+ <span><i class="fas fa-clock"></i> 10:00 AM - 10:00 PM</span>
1089
+ <span><i class="fas fa-ticket-alt"></i> Special pricing</span>
1090
+ </div>
1091
+ </div>
1092
+ </div>
1093
+ <div class="event-card">
1094
+ <div class="event-date">
1095
+ <div class="day">01</div>
1096
+ <div class="month">JAN</div>
1097
+ </div>
1098
+ <div class="event-details">
1099
+ <h3>New Year Celebration</h3>
1100
+ <p>Ring in the new year with spectacular fireworks, live music, and extended park hours!</p>
1101
+ <div class="event-meta">
1102
+ <span><i class="fas fa-clock"></i> 10:00 AM - 1:00 AM</span>
1103
+ <span><i class="fas fa-ticket-alt"></i> Premium tickets only</span>
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+ <div class="event-card">
1108
+ <div class="event-date">
1109
+ <div class="day">