Hugging Face's logo

Spaces:
fLausch
/
anycoder-bf6ff1ff
Running

App Files Community
fLausch commited on
Commit
e6b697e
·
verified ·
1 Parent(s): bfd9b43

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +821 -19
index.html CHANGED
@@ -1,19 +1,821 @@
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>Filmpremier | Exclusive Movie Events</title>
7
+
8
+ <!-- Google Fonts -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Font Awesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ :root {
18
+ --primary-color: #d4af37; /* Gold */
19
+ --primary-hover: #b5952f;
20
+ --dark-bg: #0a0a0a;
21
+ --light-text: #f5f5f5;
22
+ --gray-text: #a0a0a0;
23
+ --card-bg: #1a1a1a;
24
+ --transition: all 0.3s ease;
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ html {
34
+ scroll-behavior: smooth;
35
+ }
36
+
37
+ body {
38
+ font-family: 'Lato', sans-serif;
39
+ background-color: var(--dark-bg);
40
+ color: var(--light-text);
41
+ line-height: 1.6;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ h1, h2, h3, h4 {
46
+ font-family: 'Playfair Display', serif;
47
+ font-weight: 700;
48
+ }
49
+
50
+ a {
51
+ text-decoration: none;
52
+ color: inherit;
53
+ }
54
+
55
+ ul {
56
+ list-style: none;
57
+ }
58
+
59
+ /* --- Navigation --- */
60
+ nav {
61
+ position: fixed;
62
+ top: 0;
63
+ width: 100%;
64
+ padding: 1.5rem 5%;
65
+ display: flex;
66
+ justify-content: space-between;
67
+ align-items: center;
68
+ z-index: 1000;
69
+ transition: var(--transition);
70
+ }
71
+
72
+ nav.scrolled {
73
+ background-color: rgba(10, 10, 10, 0.9);
74
+ backdrop-filter: blur(10px);
75
+ padding: 1rem 5%;
76
+ box-shadow: 0 2px 10px rgba(0,0,0,0.5);
77
+ }
78
+
79
+ .logo {
80
+ font-family: 'Playfair Display', serif;
81
+ font-size: 2rem;
82
+ font-weight: 900;
83
+ color: var(--light-text);
84
+ letter-spacing: 2px;
85
+ }
86
+
87
+ .logo span {
88
+ color: var(--primary-color);
89
+ }
90
+
91
+ .nav-links {
92
+ display: flex;
93
+ gap: 2rem;
94
+ }
95
+
96
+ .nav-links a {
97
+ color: var(--light-text);
98
+ font-size: 0.9rem;
99
+ text-transform: uppercase;
100
+ letter-spacing: 1px;
101
+ transition: var(--transition);
102
+ position: relative;
103
+ }
104
+
105
+ .nav-links a:hover {
106
+ color: var(--primary-color);
107
+ }
108
+
109
+ .nav-links a::after {
110
+ content: '';
111
+ position: absolute;
112
+ width: 0;
113
+ height: 2px;
114
+ bottom: -5px;
115
+ left: 0;
116
+ background-color: var(--primary-color);
117
+ transition: var(--transition);
118
+ }
119
+
120
+ .nav-links a:hover::after {
121
+ width: 100%;
122
+ }
123
+
124
+ .cta-btn {
125
+ padding: 0.8rem 2rem;
126
+ background-color: var(--primary-color);
127
+ color: var(--dark-bg);
128
+ font-weight: 700;
129
+ text-transform: uppercase;
130
+ font-size: 0.8rem;
131
+ letter-spacing: 2px;
132
+ transition: var(--transition);
133
+ border: 1px solid var(--primary-color);
134
+ }
135
+
136
+ .cta-btn:hover {
137
+ background-color: transparent;
138
+ color: var(--primary-color);
139
+ }
140
+
141
+ .hamburger {
142
+ display: none;
143
+ cursor: pointer;
144
+ font-size: 1.5rem;
145
+ color: var(--light-text);
146
+ }
147
+
148
+ /* --- Hero Section --- */
149
+ .hero {
150
+ height: 100vh;
151
+ width: 100%;
152
+ position: relative;
153
+ display: flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ text-align: center;
157
+ overflow: hidden;
158
+ }
159
+
160
+ .hero-bg {
161
+ position: absolute;
162
+ top: 0;
163
+ left: 0;
164
+ width: 100%;
165
+ height: 100%;
166
+ object-fit: cover;
167
+ z-index: -1;
168
+ filter: brightness(0.4);
169
+ }
170
+
171
+ .hero-content {
172
+ max-width: 800px;
173
+ padding: 0 20px;
174
+ animation: fadeInUp 1s ease;
175
+ }
176
+
177
+ .hero h1 {
178
+ font-size: 5rem;
179
+ line-height: 1.1;
180
+ margin-bottom: 1.5rem;
181
+ color: #fff;
182
+ text-shadow: 0 4px 10px rgba(0,0,0,0.5);
183
+ }
184
+
185
+ .hero p {
186
+ font-size: 1.5rem;
187
+ color: #ddd;
188
+ margin-bottom: 2.5rem;
189
+ font-weight: 300;
190
+ }
191
+
192
+ .hero-btns {
193
+ display: flex;
194
+ gap: 1rem;
195
+ justify-content: center;
196
+ }
197
+
198
+ .btn-secondary {
199
+ padding: 0.8rem 2.5rem;
200
+ border: 1px solid var(--light-text);
201
+ color: var(--light-text);
202
+ text-transform: uppercase;
203
+ font-size: 0.8rem;
204
+ letter-spacing: 2px;
205
+ transition: var(--transition);
206
+ background: transparent;
207
+ }
208
+
209
+ .btn-secondary:hover {
210
+ background: rgba(255,255,255,0.1);
211
+ border-color: var(--primary-color);
212
+ color: var(--primary-color);
213
+ }
214
+
215
+ /* --- About Section --- */
216
+ .section {
217
+ padding: 8rem 10%;
218
+ }
219
+
220
+ .section-title {
221
+ text-align: center;
222
+ margin-bottom: 4rem;
223
+ }
224
+
225
+ .section-title h2 {
226
+ font-size: 3.5rem;
227
+ margin-bottom: 1rem;
228
+ color: var(--light-text);
229
+ }
230
+
231
+ .section-title .line {
232
+ width: 80px;
233
+ height: 4px;
234
+ background-color: var(--primary-color);
235
+ margin: 0 auto;
236
+ }
237
+
238
+ .about-content {
239
+ display: grid;
240
+ grid-template-columns: 1fr 1fr;
241
+ gap: 4rem;
242
+ align-items: center;
243
+ }
244
+
245
+ .about-text p {
246
+ color: var(--gray-text);
247
+ margin-bottom: 1.5rem;
248
+ }
249
+
250
+ .about-image {
251
+ width: 100%;
252
+ height: 500px;
253
+ object-fit: cover;
254
+ border-radius: 4px;
255
+ box-shadow: 20px 20px 0px var(--primary-color);
256
+ }
257
+
258
+ /* --- Movies / Features --- */
259
+ .movies-grid {
260
+ display: grid;
261
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
262
+ gap: 3rem;
263
+ }
264
+
265
+ .movie-card {
266
+ background-color: var(--card-bg);
267
+ border-radius: 8px;
268
+ overflow: hidden;
269
+ transition: var(--transition);
270
+ position: relative;
271
+ }
272
+
273
+ .movie-card:hover {
274
+ transform: translateY(-10px);
275
+ box-shadow: 0 20px 40px rgba(0,0,0,0.6);
276
+ }
277
+
278
+ .movie-img {
279
+ width: 100%;
280
+ height: 450px;
281
+ object-fit: cover;
282
+ transition: var(--transition);
283
+ }
284
+
285
+ .movie-card:hover .movie-img {
286
+ transform: scale(1.05);
287
+ }
288
+
289
+ .movie-info {
290
+ padding: 2rem;
291
+ }
292
+
293
+ .movie-meta {
294
+ display: flex;
295
+ justify-content: space-between;
296
+ font-size: 0.85rem;
297
+ color: var(--primary-color);
298
+ margin-bottom: 1rem;
299
+ text-transform: uppercase;
300
+ letter-spacing: 1px;
301
+ }
302
+
303
+ .movie-info h3 {
304
+ font-size: 2rem;
305
+ margin-bottom: 0.5rem;
306
+ }
307
+
308
+ .movie-info p {
309
+ color: var(--gray-text);
310
+ font-size: 0.95rem;
311
+ margin-bottom: 1.5rem;
312
+ }
313
+
314
+ .ticket-btn {
315
+ display: inline-block;
316
+ padding: 0.7rem 1.5rem;
317
+ background-color: transparent;
318
+ border: 1px solid var(--light-text);
319
+ color: var(--light-text);
320
+ font-size: 0.8rem;
321
+ text-transform: uppercase;
322
+ letter-spacing: 2px;
323
+ transition: var(--transition);
324
+ width: 100%;
325
+ text-align: center;
326
+ }
327
+
328
+ .movie-card:hover .ticket-btn {
329
+ background-color: var(--primary-color);
330
+ border-color: var(--primary-color);
331
+ color: var(--dark-bg);
332
+ }
333
+
334
+ /* --- Events / Features --- */
335
+ .features-section {
336
+ background-color: #111;
337
+ text-align: center;
338
+ }
339
+
340
+ .features-grid {
341
+ display: grid;
342
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
343
+ gap: 3rem;
344
+ }
345
+
346
+ .feature-item {
347
+ padding: 2rem;
348
+ }
349
+
350
+ .feature-icon {
351
+ font-size: 3rem;
352
+ color: var(--primary-color);
353
+ margin-bottom: 1.5rem;
354
+ }
355
+
356
+ .feature-item h3 {
357
+ font-size: 1.5rem;
358
+ margin-bottom: 1rem;
359
+ }
360
+
361
+ .feature-item p {
362
+ color: var(--gray-text);
363
+ }
364
+
365
+ /* --- Newsletter --- */
366
+ .newsletter {
367
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
368
+ background-size: cover;
369
+ background-position: center;
370
+ text-align: center;
371
+ padding: 6rem 2rem;
372
+ }
373
+
374
+ .newsletter h2 {
375
+ font-size: 3rem;
376
+ margin-bottom: 1rem;
377
+ }
378
+
379
+ .newsletter p {
380
+ color: var(--gray-text);
381
+ margin-bottom: 2.5rem;
382
+ max-width: 600px;
383
+ margin-left: auto;
384
+ margin-right: auto;
385
+ }
386
+
387
+ .newsletter-form {
388
+ display: flex;
389
+ justify-content: center;
390
+ gap: 10px;
391
+ max-width: 500px;
392
+ margin: 0 auto;
393
+ }
394
+
395
+ .newsletter-input {
396
+ flex: 1;
397
+ padding: 1rem;
398
+ background: rgba(255,255,255,0.1);
399
+ border: 1px solid rgba(255,255,255,0.2);
400
+ color: #fff;
401
+ border-radius: 4px;
402
+ }
403
+
404
+ .newsletter-input::placeholder {
405
+ color: #aaa;
406
+ }
407
+
408
+ /* --- Footer --- */
409
+ footer {
410
+ background-color: #050505;
411
+ padding: 5rem 10% 2rem;
412
+ border-top: 1px solid #222;
413
+ }
414
+
415
+ .footer-grid {
416
+ display: grid;
417
+ grid-template-columns: 2fr 1fr 1fr 1fr;
418
+ gap: 3rem;
419
+ margin-bottom: 4rem;
420
+ }
421
+
422
+ .footer-col h4 {
423
+ color: var(--light-text);
424
+ font-size: 1.2rem;
425
+ margin-bottom: 1.5rem;
426
+ font-family: 'Playfair Display', serif;
427
+ }
428
+
429
+ .footer-col ul li {
430
+ margin-bottom: 0.8rem;
431
+ }
432
+
433
+ .footer-col ul li a {
434
+ color: var(--gray-text);
435
+ font-size: 0.9rem;
436
+ transition: var(--transition);
437
+ }
438
+
439
+ .footer-col ul li a:hover {
440
+ color: var(--primary-color);
441
+ padding-left: 5px;
442
+ }
443
+
444
+ .social-links {
445
+ display: flex;
446
+ gap: 1.5rem;
447
+ margin-top: 2rem;
448
+ }
449
+
450
+ .social-links a {
451
+ color: var(--light-text);
452
+ font-size: 1.2rem;
453
+ transition: var(--transition);
454
+ }
455
+
456
+ .social-links a:hover {
457
+ color: var(--primary-color);
458
+ }
459
+
460
+ .footer-bottom {
461
+ text-align: center;
462
+ padding-top: 2rem;
463
+ border-top: 1px solid #1a1a1a;
464
+ color: var(--gray-text);
465
+ font-size: 0.85rem;
466
+ }
467
+
468
+ .anycoder-link {
469
+ display: inline-block;
470
+ margin-top: 10px;
471
+ color: #5e5e5e;
472
+ font-size: 0.75rem;
473
+ text-decoration: underline;
474
+ }
475
+
476
+ .anycoder-link:hover {
477
+ color: var(--primary-color);
478
+ }
479
+
480
+ /* --- Responsive Design --- */
481
+ @media (max-width: 992px) {
482
+ .hero h1 { font-size: 3.5rem; }
483
+ .about-content { grid-template-columns: 1fr; }
484
+ .about-image { width: 100%; height: 350px; }
485
+ }
486
+
487
+ @media (max-width: 768px) {
488
+ .nav-links {
489
+ position: fixed;
490
+ top: 70px;
491
+ left: 0;
492
+ width: 100%;
493
+ background-color: var(--dark-bg);
494
+ flex-direction: column;
495
+ align-items: center;
496
+ padding: 2rem 0;
497
+ transform: translateY(-150%);
498
+ transition: transform 0.4s ease-in-out;
499
+ box-shadow: 0 10px 20px rgba(0,0,0,0.5);
500
+ }
501
+
502
+ .nav-links.active {
503
+ transform: translateY(0);
504
+ }
505
+
506
+ .hamburger {
507
+ display: block;
508
+ z-index: 1001;
509
+ }
510
+
511
+ .hero h1 { font-size: 2.5rem; }
512
+ .hero p { font-size: 1.1rem; }
513
+ .hero-btns { flex-direction: column; }
514
+
515
+ .footer-grid {
516
+ grid-template-columns: 1fr;
517
+ text-align: center;
518
+ }
519
+
520
+ .social-links { justify-content: center; }
521
+ }
522
+
523
+ @keyframes fadeInUp {
524
+ from { opacity: 0; transform: translateY(30px); }
525
+ to { opacity: 1; transform: translateY(0); }
526
+ }
527
+ </style>
528
+ </head>
529
+ <body>
530
+
531
+ <!-- Navigation -->
532
+ <nav id="navbar">
533
+ <a href="#" class="logo">FILM<span>PREMIER</span></a>
534
+
535
+ <div class="hamburger" id="hamburger">
536
+ <i class="fas fa-bars"></i>
537
+ </div>
538
+
539
+ <div class="nav-links" id="nav-links">
540
+ <a href="#home">Home</a>
541
+ <a href="#about">About</a>
542
+ <a href="#movies">Now Screening</a>
543
+ <a href="#events">Experiences</a>
544
+ <a href="#newsletter" class="cta-btn">Join Club</a>
545
+ </div>
546
+ </nav>
547
+
548
+ <!-- Hero Section -->
549
+ <section class="hero" id="home">
550
+ <img src="https://images.unsplash.com/photo-1598880940044-5a32c707908d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" alt="Cinema Screen" class="hero-bg">
551
+ <div class="hero-content">
552
+ <h1>Cinema Reimagined</h1>
553
+ <p>Experience the magic of the movies like never before. Exclusive premieres, premium comfort, and unforgettable moments.</p>
554
+ <div class="hero-btns">
555
+ <a href="#movies" class="cta-btn">Get Tickets</a>
556
+ <a href="#about" class="btn-secondary">Our Story</a>
557
+ </div>
558
+ </div>
559
+ </section>
560
+
561
+ <!-- About Section -->
562
+ <section class="section" id="about">
563
+ <div class="about-content">
564
+ <div class="about-text">
565
+ <div class="section-title" style="text-align: left; margin-bottom: 2rem;">
566
+ <h2 style="text-align: left;">More Than Just a Movie</h2>
567
+ <div class="line" style="margin: 0;"></div>
568
+ </div>
569
+ <p>At Filmpremier, we believe that going to the cinema is an event, not just a pastime. Established in 2024, we have redefined the movie-going experience by blending cutting-edge technology with timeless comfort.</p>
570
+ <p>From our Dolby Atmos sound systems to our plush leather recliners, every detail is designed to immerse you fully into the story. Whether it's a blockbuster premiere or an indie masterpiece, we ensure the focus remains on the screen.</p>
571
+ <p>Join our exclusive membership club to access VIP screenings, director Q&As, and priority booking for the hottest releases.</p>
572
+ <br>
573
+ <a href="#" class="cta-btn" style="padding: 1rem 2.5rem;">Discover Luxury</a>
574
+ </div>
575
+ <div class="about-image-container">
576
+ <img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Luxury Cinema Seat" class="about-image">
577
+ </div>
578
+ </div>
579
+ </section>
580
+
581
+ <!-- Movies Section -->
582
+ <section class="section" id="movies" style="background-color: #0f0f0f;">
583
+ <div class="section-title">
584
+ <h2>Currently Screening</h2>
585
+ <div class="line"></div>
586
+ </div>
587
+
588
+ <div class="movies-grid">
589
+ <!-- Movie 1 -->
590
+ <div class="movie-card">
591
+ <img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
592
+ <div class="movie-info">
593
+ <div class="movie-meta">
594
+ <span>Sci-Fi</span>
595
+ <span>2h 15m</span>
596
+ <span>4K Dolby Vision</span>
597
+ </div>
598
+ <h3>The Last Horizon</h3>
599
+ <p>When humanity's last hope finds itself lost in deep space, a lone pilot must face the unknown to save us all.</p>
600
+ <button class="ticket-btn">Book Now</button>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Movie 2 -->
605
+ <div class="movie-card">
606
+ <img src="https://images.unsplash.com/photo-1626814026123-6598ed7dc554?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
607
+ <div class="movie-info">
608
+ <div class="movie-meta">
609
+ <span>Thriller</span>
610
+ <span>1h 58m</span>
611
+ <span>IMAX</span>
612
+ </div>
613
+ <h3>Shadows of the Past</h3>
614
+ <p>A detective uncovering a conspiracy that reaches the highest echelons of power must stay one step ahead.</p>
615
+ <button class="ticket-btn">Book Now</button>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Movie 3 -->
620
+ <div class="movie-card">
621
+ <img src="https://images.unsplash.com/photo-1579345255543-c41700357064?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
622
+ <div class="movie-info">
623
+ <div class="movie-meta">
624
+ <span>Documentary</span>
625
+ <span>1h 30m</span>
626
+ <span>Dolby Atmos</span>
627
+ </div>
628
+ <h3>Oceans Unseen</h3>
629
+ <p>Explore the deepest, darkest corners of our planet's final frontier. A visual masterpiece.</p>
630
+ <button class="ticket-btn">Book Now</button>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- Movie 4 -->
635
+ <div class="movie-card">
636
+ <img src="https://images.unsplash.com/photo-1626814026193-22f695988715?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
637
+ <div class="movie-info">
638
+ <div class="movie-meta">
639
+ <span>Horror</span>
640
+ <span>2h 05m</span>
641
+ <span>Standard</span>
642
+ </div>
643
+ <h3>The Whispering House</h3>
644
+ <p>After inheriting a remote manor, a family discovers the walls have ears—and they're hungry.</p>
645
+ <button class="ticket-btn">Book Now</button>
646
+ </div>
647
+ </div>
648
+
649
+ <!-- Movie 5 -->
650
+ <div class="movie-card">
651
+ <img src="https://images.unsplash.com/photo-1626814026183-35c783e21111?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
652
+ <div class="movie-info">
653
+ <div class="movie-meta">
654
+ <span>Action</span>
655
+ <span>2h 30m</span>
656
+ <span>IMAX 3D</span>
657
+ </div>
658
+ <h3>Cyber Dawn</h3>
659
+ <p>In a neon-soaked future, a rogue AI hunter must confront her creator to stop a digital apocalypse.</p>
660
+ <button class="ticket-btn">Book Now</button>
661
+ </div>
662
+ </div>
663
+
664
+ <!-- Movie 6 -->
665
+ <div class="movie-card">
666
+ <img src="https://images.unsplash.com/photo-1626814026248-2585c5416f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Movie Poster" class="movie-img">
667
+ <div class="movie-info">
668
+ <div class="movie-meta">
669
+ <span>Romance</span>
670
+ <span>1h 45m</span>
671
+ <span>Standard</span>
672
+ </div>
673
+ <h3>Starlight Nights</h3>
674
+ <p>Two strangers meet under the aurora borealis and find that fate is written in the stars.</p>
675
+ <button class="ticket-btn">Book Now</button>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </section>
680
+
681
+ <!-- Features Section -->
682
+ <section class="section features-section" id="events">
683
+ <div class="section-title">
684
+ <h2>Our Experiences</h2>
685
+ <div class="line"></div>
686
+ </div>
687
+ <div class="features-grid">
688
+ <div class="feature-item">
689
+ <i class="fas fa-couch feature-icon"></i>
690
+ <h3>Private Lounges</h3>
691
+ <p>Upgrade to our VIP lounges for exclusive pre-screening cocktails and private access to the screening room.</p>
692
+ </div>
693
+ <div class="feature-item">
694
+ <i class="fas fa-utensils feature-icon"></i>
695
+ <h3>Gourmet Dining</h3>
696
+ <p>Our executive chefs prepare fresh, gourmet meals delivered straight to your seat before the show begins.</p>
697
+ </div>
698
+ <div class="feature-item">
699
+ <i class="fas fa-ticket-alt feature-icon"></i>
700
+ <h3>Priority Booking</h3>
701
+ <p>Members get access to book tickets 48 hours before the general public for all premier releases.</p>
702
+ </div>
703
+ </div>
704
+ </section>
705
+
706
+ <!-- Newsletter Section -->
707
+ <section class="newsletter" id="newsletter">
708
+ <h2>Join the Filmpremier Club</h2>
709
+ <p>Sign up to receive exclusive invites to premieres, special screenings, and member-only discounts. Your first month is on us.</p>
710
+ <form class="newsletter-form" onsubmit="event.preventDefault(); alert('Welcome to the Club! You have successfully subscribed.');">
711
+ <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
712
+ <button type="submit" class="cta-btn">Subscribe</button>
713
+ </form>
714
+ </section>
715
+
716
+ <!-- Footer -->
717
+ <footer>
718
+ <div class="footer-grid">
719
+ <div class="footer-col">
720
+ <a href="#" class="logo" style="font-size: 1.5rem; margin-bottom: 1rem; display: inline-block;">FILM<span>PREMIER</span></a>
721
+ <p style="color: var(--gray-text); font-size: 0.9rem; line-height: 1.6;">
722
+ Redefining the cinematic experience with luxury, technology, and an unwavering passion for storytelling.
723
+ </p>
724
+ <div class="social-links">
725
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
726
+ <a href="#"><i class="fab fa-twitter"></i></a>
727
+ <a href="#"><i class="fab fa-instagram"></i></a>
728
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
729
+ </div>
730
+ </div>
731
+
732
+ <div class="footer-col">
733
+ <h4>Cinemas</h4>
734
+ <ul>
735
+ <li><a href="#">Downtown Plaza</a></li>
736
+ <li><a href="#">Westside Luxury</a></li>
737
+ <li><a href="#">Eastgate IMAX</a></li>
738
+ <li><a href="#">Northside Drive-In</a></li>
739
+ </ul>
740
+ </div>
741
+
742
+ <div class="footer-col">
743
+ <h4>Events</h4>
744
+ <ul>
745
+ <li><a href="#">Premiere Nights</a></li>
746
+ <li><a href="#">Director Q&A</a></li>
747
+ <li><a href="#">Film Festivals</a></li>
748
+ <li><a href="#">Private Rentals</a></li>
749
+ </ul>
750
+ </div>
751
+
752
+ <div class="footer-col">
753
+ <h4>Support</h4>
754
+ <ul>
755
+ <li><a href="#">Help Center</a></li>
756
+ <li><a href="#">Terms of Service</a></li>
757
+ <li><a href="#">Privacy Policy</a></li>
758
+ <li><a href="#">Contact Us</a></li>
759
+ </ul>
760
+ </div>
761
+ </div>
762
+
763
+ <div class="footer-bottom">
764
+ &copy; 2024 Filmpremier Entertainment Group. All rights reserved.
765
+ <br>
766
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
767
+ </div>
768
+ </footer>
769
+
770
+ <script>
771
+ // Navigation Scroll Effect
772
+ window.addEventListener('scroll', function() {
773
+ const nav = document.getElementById('navbar');
774
+ if (window.scrollY > 50) {
775
+ nav.classList.add('scrolled');
776
+ } else {
777
+ nav.classList.remove('scrolled');
778
+ }
779
+ });
780
+
781
+ // Mobile Menu Toggle
782
+ const hamburger = document.getElementById('hamburger');
783
+ const navLinks = document.getElementById('nav-links');
784
+ const links = document.querySelectorAll('.nav-links a');
785
+
786
+ hamburger.addEventListener('click', () => {
787
+ navLinks.classList.toggle('active');
788
+
789
+ // Toggle icon between bars and times (X)
790
+ const icon = hamburger.querySelector('i');
791
+ if (navLinks.classList.contains('active')) {
792
+ icon.classList.remove('fa-bars');
793
+ icon.classList.add('fa-times');
794
+ } else {
795
+ icon.classList.remove('fa-times');
796
+ icon.classList.add('fa-bars');
797
+ }
798
+ });
799
+
800
+ // Close mobile menu when a link is clicked
801
+ links.forEach(link => {
802
+ link.addEventListener('click', () => {
803
+ navLinks.classList.remove('active');
804
+ const icon = hamburger.querySelector('i');
805
+ icon.classList.remove('fa-times');
806
+ icon.classList.add('fa-bars');
807
+ });
808
+ });
809
+
810
+ // Smooth scrolling for anchor links
811
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
812
+ anchor.addEventListener('click', function (e) {
813
+ e.preventDefault();
814
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
815
+ behavior: 'smooth'
816
+ });
817
+ });
818
+ });
819
+ </script>
820
+ </body>
821
+ </html>