Hugging Face's logo

Spaces:
LAURELCORE
/
anycoder-7f7f1092
Running

App Files Community
LAURELCORE commited on
Commit
6c51f6b
·
verified ·
1 Parent(s): b791e2e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +850 -19
index.html CHANGED
@@ -1,19 +1,850 @@
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>BridgeTown Bash 2026 - Vital Life Foundation</title>
7
+
8
+ <!-- Fonts -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com">
11
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
12
+
13
+ <!-- Icons -->
14
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
15
+
16
+ <style>
17
+ /* --- CSS VARIABLES & RESET --- */
18
+ :root {
19
+ --primary: #FF5E3A; /* Sunset Orange */
20
+ --primary-dark: #D94B29;
21
+ --secondary: #0F172A; /* Night Sky */
22
+ --secondary-light: #1E293B;
23
+ --accent: #F7B731; /* Gold */
24
+ --text-light: #F8FAFC;
25
+ --text-dim: #94A3B8;
26
+ --bg-light: #F1F5F9;
27
+ --glass: rgba(15, 23, 42, 0.7);
28
+ --glass-border: rgba(255, 255, 255, 0.1);
29
+
30
+ --font-main: 'Outfit', sans-serif;
31
+ --font-display: 'Playfair Display', serif;
32
+
33
+ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
34
+ }
35
+
36
+ * {
37
+ box-sizing: box-sizing;
38
+ margin: 0;
39
+ padding: 0;
40
+ }
41
+
42
+ html {
43
+ scroll-behavior: smooth;
44
+ }
45
+
46
+ body {
47
+ font-family: --font-main;
48
+ background-color: var(--secondary);
49
+ color: var(--text-light);
50
+ line-height: 1.6;
51
+ overflow-x: hidden;
52
+ }
53
+
54
+ h1, h2, h3, h4, h5, h6 {
55
+ font-family: --font-display;
56
+ font-weight: 700;
57
+ line-height: 1.2;
58
+ }
59
+
60
+ a {
61
+ text-decoration: none;
62
+ color: inherit;
63
+ transition: 0.3s ease;
64
+ }
65
+
66
+ ul {
67
+ list-style: none;
68
+ }
69
+
70
+ img {
71
+ max-width: 100%;
72
+ display: block;
73
+ }
74
+
75
+ /* --- UTILITIES --- */
76
+ .container {
77
+ max-width: 1200px;
78
+ margin: 0 auto;
79
+ padding: 0 2rem;
80
+ }
81
+
82
+ .btn {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ gap: 0.5rem;
86
+ padding: 1rem 2.5rem;
87
+ border-radius: 50px;
88
+ font-weight: 600;
89
+ font-size: 1rem;
90
+ text-transform: uppercase;
91
+ letter-spacing: 1px;
92
+ cursor: pointer;
93
+ transition: all 0.3s ease;
94
+ border: 2px solid transparent;
95
+ }
96
+
97
+ .btn-primary {
98
+ background: var(--primary);
99
+ color: white;
100
+ box-shadow: 0 10px 20px -10px var(--primary);
101
+ }
102
+
103
+ .btn-primary:hover {
104
+ background: var(--primary-dark);
105
+ transform: translateY(-3px);
106
+ box-shadow: 0 15px 25px -10px var(--primary-dark);
107
+ }
108
+
109
+ .btn-outline {
110
+ border-color: var(--text-light);
111
+ color: var(--text-light);
112
+ background: transparent;
113
+ }
114
+
115
+ .btn-outline:hover {
116
+ background: var(--text-light);
117
+ color: var(--secondary);
118
+ }
119
+
120
+ .section-padding {
121
+ padding: 8rem 0;
122
+ }
123
+
124
+ .text-center { text-align: center; }
125
+ .text-accent { color: var(--accent); }
126
+ .text-primary { color: var(--primary); }
127
+
128
+ /* --- HEADER --- */
129
+ header {
130
+ position: fixed;
131
+ top: 0;
132
+ left: 0;
133
+ width: 100%;
134
+ z-index: 1000;
135
+ padding: 1.5rem 0;
136
+ transition: 0.4s ease;
137
+ }
138
+
139
+ header.scrolled {
140
+ background: rgba(15, 23, 42, 0.9);
141
+ padding: 1rem 0;
142
+ border-bottom: 1px solid var(--glass-border);
143
+ backdrop-filter: blur(10px);
144
+ }
145
+
146
+ .nav-container {
147
+ display: flex;
148
+ justify-content: space-between;
149
+ align-items: center;
150
+ }
151
+
152
+ .logo {
153
+ font-family: --font-display;
154
+ font-size: 1.5rem;
155
+ font-weight: 700;
156
+ color: var(--text-light);
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 0.5rem;
160
+ }
161
+
162
+ .logo span { color: var(--primary); }
163
+
164
+ .nav-links {
165
+ display: flex;
166
+ gap: 2rem;
167
+ }
168
+
169
+ .nav-links a {
170
+ font-size: 0.9rem;
171
+ font-weight: 500;
172
+ opacity: 0.8;
173
+ }
174
+
175
+ .nav-links a:hover { opacity: 1; color: var(--primary); }
176
+
177
+ .mobile-toggle {
178
+ display: none;
179
+ font-size: 1.5rem;
180
+ cursor: pointer;
181
+ }
182
+
183
+ /* --- HERO SECTION --- */
184
+ .hero {
185
+ position: relative;
186
+ height: 100vh;
187
+ display: flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ background: radial-gradient(circle at center, #1a2c4e 0%, #0F172A 100%);
191
+ overflow: hidden;
192
+ }
193
+
194
+ .hero-bg {
195
+ position: absolute;
196
+ top: 0;
197
+ left: 0;
198
+ width: 100%;
199
+ height: 100%;
200
+ background-image: url('https://images.unsplash.com/photo-1542259681-d4cd71c68375?q=80&w=2070&auto=format&fit=crop'); /* Mt Hood vibe */
201
+ background-size: cover;
202
+ background-position: center;
203
+ opacity: 0.4;
204
+ z-index: 1;
205
+ /* Parallax handled in CSS/JS */
206
+ }
207
+
208
+ .hero-content {
209
+ z-index: 2;
210
+ text-align: center;
211
+ max-width: 800px;
212
+ padding: 2rem;
213
+ }
214
+
215
+ .hero-badge {
216
+ display: inline-block;
217
+ background: rgba(255, 94, 58, 0.2);
218
+ border: 1px solid var(--primary);
219
+ padding: 0.5rem 1rem;
220
+ border-radius: 20px;
221
+ font-size: 0.8rem;
222
+ letter-spacing: 2px;
223
+ text-transform: uppercase;
224
+ margin-bottom: 1.5rem;
225
+ color: var(--primary);
226
+ }
227
+
228
+ .hero h1 {
229
+ font-size: clamp(2.5rem, 6vw, 5rem);
230
+ margin-bottom: 1rem;
231
+ background: linear-gradient(to right, #fff, #ccc);
232
+ -webkit-background-clip: text;
233
+ -webkit-text-fill-color: transparent;
234
+ }
235
+
236
+ .hero p {
237
+ font-size: 1.2rem;
238
+ color: var(--text-dim);
239
+ margin-bottom: 2rem;
240
+ max-width: 600px;
241
+ margin-left: auto;
242
+ margin-right: auto;
243
+ }
244
+
245
+ .hero-actions {
246
+ display: flex;
247
+ gap: 1rem;
248
+ justify-content: center;
249
+ }
250
+
251
+ /* --- COUNTDOWN --- */
252
+ .countdown-wrapper {
253
+ margin-top: 3rem;
254
+ display: flex;
255
+ gap: 1.5rem;
256
+ justify-content: center;
257
+ }
258
+
259
+ .countdown-item {
260
+ text-align: center;
261
+ }
262
+
263
+ .countdown-number {
264
+ font-family: --font-display;
265
+ font-size: 2rem;
266
+ font-weight: 700;
267
+ color: var(--text-light);
268
+ }
269
+
270
+ .countdown-label {
271
+ font-size: 0.7rem;
272
+ text-transform: uppercase;
273
+ color: var(--text-dim);
274
+ }
275
+
276
+ /* --- IMPACT SECTION --- */
277
+ .impact {
278
+ background: var(--bg-light);
279
+ color: var(--secondary);
280
+ position: relative;
281
+ clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
282
+ }
283
+
284
+ .impact-grid {
285
+ display: grid;
286
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
287
+ gap: 2rem;
288
+ margin-top: 3rem;
289
+ }
290
+
291
+ .stat-card {
292
+ background: white;
293
+ padding: 2.5rem;
294
+ border-radius: 12px;
295
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
296
+ transition: transform 0.3s ease;
297
+ }
298
+
299
+ .stat-card:hover {
300
+ transform: translateY(-10px);
301
+ }
302
+
303
+ .stat-icon {
304
+ font-size: 2.5rem;
305
+ color: var(--primary);
306
+ margin-bottom: 1rem;
307
+ }
308
+
309
+ .stat-number {
310
+ font-size: 2.5rem;
311
+ font-weight: 700;
312
+ color: var(--secondary);
313
+ margin-bottom: 0.5rem;
314
+ font-family: --font-display;
315
+ }
316
+
317
+ .stat-desc {
318
+ font-size: 1rem;
319
+ color: var(--text-dim);
320
+ }
321
+
322
+ /* --- EXPERIENCE SECTION --- */
323
+ .experience {
324
+ background: var(--secondary);
325
+ }
326
+
327
+ .split-layout {
328
+ display: grid;
329
+ grid-template-columns: 1fr 1fr;
330
+ gap: 4rem;
331
+ align-items: center;
332
+ }
333
+
334
+ .exp-image {
335
+ position: relative;
336
+ height: 500px;
337
+ border-radius: 20px;
338
+ overflow: hidden;
339
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
340
+ }
341
+
342
+ .exp-image img {
343
+ width: 100%;
344
+ height: 100%;
345
+ object-fit: cover;
346
+ transition: transform 0.5s ease;
347
+ }
348
+
349
+ .exp-image:hover img {
350
+ transform: scale(1.05);
351
+ }
352
+
353
+ .exp-content h2 {
354
+ font-size: 3rem;
355
+ margin-bottom: 1.5rem;
356
+ }
357
+
358
+ .feature-list {
359
+ display: grid;
360
+ grid-template-columns: 1fr 1fr;
361
+ gap: 1.5rem;
362
+ margin: 2rem 0;
363
+ }
364
+
365
+ .feature-item {
366
+ display: flex;
367
+ align-items: flex-start;
368
+ gap: 1rem;
369
+ }
370
+
371
+ .feature-icon {
372
+ background: rgba(255, 94, 58, 0.1);
373
+ color: var(--primary);
374
+ width: 40px;
375
+ height: 40px;
376
+ border-radius: 50%;
377
+ display: flex;
378
+ align-items: center;
379
+ justify-content: center;
380
+ font-size: 1.2rem;
381
+ }
382
+
383
+ /* --- PROGRAM TIMELINE --- */
384
+ .program {
385
+ background: var(--secondary-light);
386
+ padding: 6rem 0;
387
+ }
388
+
389
+ .timeline {
390
+ position: relative;
391
+ max-width: 800px;
392
+ margin: 3rem auto;
393
+ padding-left: 2rem;
394
+ border-left: 2px solid var(--primary);
395
+ }
396
+
397
+ .timeline-item {
398
+ position: relative;
399
+ margin-bottom: 3rem;
400
+ }
401
+
402
+ .timeline-item::before {
403
+ content: '';
404
+ position: absolute;
405
+ left: -2.5rem;
406
+ top: 0;
407
+ width: 1rem;
408
+ height: 1rem;
409
+ background: var(--primary);
410
+ border-radius: 50%;
411
+ transform: translateX(-50%);
412
+ border: 3px solid white;
413
+ }
414
+
415
+ .timeline-time {
416
+ font-weight: 700;
417
+ color: var(--primary);
418
+ margin-bottom: 0.5rem;
419
+ display: block;
420
+ }
421
+
422
+ /* --- SPONSORSHIP --- */
423
+ .sponsorship {
424
+ background: #fff;
425
+ color: var(--secondary);
426
+ clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
427
+ }
428
+
429
+ .sponsor-grid {
430
+ display: grid;
431
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
432
+ gap: 2rem;
433
+ margin-top: 3rem;
434
+ }
435
+
436
+ .sponsor-card {
437
+ border: 1px solid #e2e8f0;
438
+ padding: 2rem;
439
+ border-radius: 12px;
440
+ text-align: center;
441
+ transition: 0.3s;
442
+ position: relative;
443
+ overflow: hidden;
444
+ }
445
+
446
+ .sponsor-card:hover {
447
+ border-color: var(--primary);
448
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
449
+ }
450
+
451
+ .sponsor-price {
452
+ font-size: 1.5rem;
453
+ font-weight: 700;
454
+ color: var(--secondary);
455
+ margin: 1rem 0;
456
+ }
457
+
458
+ .sponsor-list li {
459
+ margin-bottom: 0.8rem;
460
+ font-size: 0.9rem;
461
+ color: #64748b;
462
+ }
463
+
464
+ /* --- HOTEL --- */
465
+ .hotel {
466
+ background: linear-gradient(rgba(15,23,42,0.9), rgba(15,23,42,0.9)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?q=80&w=2070&auto=format&fit=crop');
467
+ background-size: cover;
468
+ background-attachment: fixed;
469
+ text-align: center;
470
+ }
471
+
472
+ .hotel-box {
473
+ background: rgba(255, 255, 255, 0.05);
474
+ border: 1px solid rgba(255,255,255,0.1);
475
+ padding: 3rem;
476
+ border-radius: 16px;
477
+ max-width: 600px;
478
+ margin: 0 auto;
479
+ }
480
+
481
+ /* --- FOOTER --- */
482
+ footer {
483
+ background: #000;
484
+ padding: 3rem 0;
485
+ font-size: 0.9rem;
486
+ color: var(--text-dim);
487
+ border-top: 1px solid var(--glass-border);
488
+ }
489
+
490
+ .footer-content {
491
+ display: flex;
492
+ justify-content: space-between;
493
+ align-items: center;
494
+ flex-wrap: wrap;
495
+ gap: 1rem;
496
+ }
497
+
498
+ .anycoder-link {
499
+ color: var(--text-dim);
500
+ font-weight: 600;
501
+ border-bottom: 1px dotted var(--text-dim);
502
+ }
503
+
504
+ .anycoder-link:hover {
505
+ color: var(--primary);
506
+ border-bottom: 1px solid var(--primary);
507
+ }
508
+
509
+ /* --- ANIMATION CLASSES --- */
510
+ .reveal {
511
+ opacity: 0;
512
+ transform: translateY(30px);
513
+ transition: all 0.8s ease;
514
+ }
515
+
516
+ .reveal.active {
517
+ opacity: 1;
518
+ transform: translateY(0);
519
+ }
520
+
521
+ /* --- MEDIA QUERIES --- */
522
+ @media (max-width: 768px) {
523
+ .nav-links { display: none; }
524
+ .mobile-toggle { display: block; }
525
+
526
+ .hero h1 { font-size: 3rem; }
527
+
528
+ .split-layout { grid-template-columns: 1fr; }
529
+ .exp-image { height: 300px; order: -1; }
530
+
531
+ .timeline { padding-left: 1rem; border-left: none; }
532
+ .timeline-item::before { left: -0.5rem; }
533
+
534
+ .hero-actions { flex-direction: column; }
535
+ .btn { width: 100%; justify-content: center; }
536
+ }
537
+ </style>
538
+ </head>
539
+ <body>
540
+
541
+ <!-- Header -->
542
+ <header id="navbar">
543
+ <div class="container nav-container">
544
+ <a href="#" class="logo">
545
+ <i class="ri-heart-pulse-fill"></i> Vital<span>Life</span>
546
+ </a>
547
+ <nav class="nav-links">
548
+ <a href="#impact">Impact</a>
549
+ <a href="#experience">The Bash</a>
550
+ <a href="#program">Program</a>
551
+ <a href="#sponsorship">Sponsorships</a>
552
+ <a href="#hotel">Hotel</a>
553
+ </nav>
554
+ <div class="mobile-toggle">
555
+ <i class="ri-menu-line"></i>
556
+ </div>
557
+ </div>
558
+ </header>
559
+
560
+ <!-- Hero Section -->
561
+ <section class="hero">
562
+ <div class="hero-bg"></div>
563
+ <div class="hero-content reveal active">
564
+ <span class="hero-badge">Friday, June 26, 2026</span>
565
+ <h1>BridgeTown Bash 2026</h1>
566
+ <p>Where purpose meets celebration under the open sky.</p>
567
+
568
+ <div class="hero-actions">
569
+ <a href="#tickets" class="btn btn-primary">Get Tickets</a>
570
+ <a href="#sponsorship" class="btn btn-outline">Become a Sponsor</a>
571
+ </div>
572
+
573
+ <div class="countdown-wrapper">
574
+ <div class="countdown-item">
575
+ <div class="countdown-number" id="days">00</div>
576
+ <div class="countdown-label">Days</div>
577
+ </div>
578
+ <div class="countdown-item">
579
+ <div class="countdown-number" id="hours">00</div>
580
+ <div class="countdown-label">Hours</div>
581
+ </div>
582
+ <div class="countdown-item">
583
+ <div class="countdown-number" id="minutes">00</div>
584
+ <div class="countdown-label">Mins</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </section>
589
+
590
+ <!-- Impact Section -->
591
+ <section id="impact" class="section-padding impact">
592
+ <div class="container">
593
+ <div class="text-center reveal">
594
+ <h2 class="text-primary">Impact in Motion</h2>
595
+ <p style="max-width: 600px; margin: 1rem auto;">Because of passionate supporters like you, the Vital Life Foundation distributed <strong>$791,100</strong> to our charitable partners in 2024.</p>
596
+ </div>
597
+
598
+ <div class="impact-grid">
599
+ <div class="stat-card reveal">
600
+ <i class="ri-flag-line stat-icon"></i>
601
+ <div class="stat-number">Dignity</div>
602
+ <div class="stat-desc">Veterans honored with gratitude and respect.</div>
603
+ </div>
604
+ <div class="stat-card reveal">
605
+ <i class="ri-smile-line stat-icon"></i>
606
+ <div class="stat-number">Dreams</div>
607
+ <div class="stat-desc">Seniors whose long-held wishes came true.</div>
608
+ </div>
609
+ <div class="stat-card reveal">
610
+ <i class="ri-group-line stat-icon"></i>
611
+ <div class="stat-number">Connection</div>
612
+ <div class="stat-desc">Communities transformed where isolation once lived.</div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </section>
617
+
618
+ <!-- Experience Section -->
619
+ <section id="experience" class="section-padding experience">
620
+ <div class="container">
621
+ <div class="split-layout">
622
+ <div class="exp-content reveal">
623
+ <h2>The Experience: <br><span class="text-primary">Oak + Hood</span></h2>
624
+ <p>Join us at a breathtaking Willamette Valley venue with sweeping views of Mt. Hood.</p>
625
+
626
+ <div class="feature-list">
627
+ <div class="feature-item">
628
+ <div class="feature-icon"><i class="ri-wine-line"></i></div>
629
+ <div>Curated cuisine & craft beverages</div>
630
+ </div>
631
+ <div class="feature-item">
632
+ <div class="feature-icon"><i class="ri-music-2-line"></i></div>
633
+ <div>Live country-inspired music & dancing</div>
634
+ </div>
635
+ <div class="feature-item">
636
+ <div class="feature-icon"><i class="ri-horse-line"></i></div>
637
+ <div>Mechanical bull riding</div>
638
+ </div>
639
+ <div class="feature-item">
640
+ <div class="feature-icon"><i class="ri-scissors-line"></i></div>
641
+ <div>Axe throwing for the adventurous</div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ <div class="exp-image reveal">
646
+ <!-- Placeholder for Oak+Hood vibe -->
647
+ <img src="https://images.unsplash.com/photo-1516450360452-9312f93cfb3c?q=80&w=2071&auto=format&fit=crop" alt="Venue Celebration">
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </section>
652
+
653
+ <!-- Program Section -->
654
+ <section id="program" class="program">
655
+ <div class="container">
656
+ <div class="text-center reveal">
657
+ <h2>Program Highlights</h2>
658
+ <p class="text-dim">An evening of mission, connection, and celebration.</p>
659
+ </div>
660
+
661
+ <div class="timeline">
662
+ <div class="timeline-item reveal">
663
+ <span class="timeline-time">6:00 PM</span>
664
+ <h4>Welcome & Cocktails</span>
665
+ <p>Arrival with curated cuisine & craft beverages.</p>
666
+ </div>
667
+ <div class="timeline-item reveal">
668
+ <span class="timeline-time">7:00 PM</span>
669
+ <h4>Mission Moment</span>
670
+ <p>Heartfelt words from our CEO & CFO, featuring a special video from our partners.</p>
671
+ </div>
672
+ <div class="timeline-item reveal">
673
+ <span class="timeline-time">8:00 PM</span>
674
+ <h4>Paddle Raise</span>
675
+ <p>A powerful chance to give in real time to amplify your impact.</p>
676
+ </div>
677
+ <div class="timeline-item reveal">
678
+ <span class="timeline-time">9:00 PM</span>
679
+ <h4>Party Under the Stars</span>
680
+ <p>Dancing, mechanical bull, axe throwing, and community.</p>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </section>
685
+
686
+ <!-- Sponsorship Section -->
687
+ <section id="sponsorship" class="section-padding sponsorship">
688
+ <div class="container">
689
+ <div class="text-center reveal">
690
+ <h2>Partner With Purpose</h2>
691
+ <p>Sponsorship is a powerful way to stand with the Vital Life mission while connecting with a network of leaders.</p>
692
+ <div style="margin-top: 1rem; color: var(--primary); font-weight: 700;">Levels: $1,000 - $25,000</div>
693
+ </div>
694
+
695
+ <div class="sponsor-grid">
696
+ <div class="sponsor-card reveal">
697
+ <h3>Community Partner</h3>
698
+ <div class="sponsor-price">$1,000</div>
699
+ <ul class="sponsor-list">
700
+ <li>Brand recognition at event</li>
701
+ <li>2 Complimentary tickets</li>
702
+ <li>Social media shoutout</li>
703
+ </ul>
704
+ <a href="#" class="btn btn-outline" style="color: var(--secondary); border-color: var(--secondary); margin-top: 1rem;">Select</a>
705
+ </div>
706
+
707
+ <div class="sponsor-card reveal">
708
+ <h3>Vitality Leader</h3>
709
+ <div class="sponsor-price">$5,000</div>
710
+ <ul class="sponsor-list">
711
+ <li>Prominent logo placement</li>
712
+ <li>5 Complimentary tickets</li>
713
+ <li>Table seating near stage</li>
714
+ <li>Newsletter feature</li>
715
+ </ul>
716
+ <a href="#" class="btn btn-primary" style="margin-top: 1rem;">Select</a>
717
+ </div>
718
+
719
+ <div class="sponsor-card reveal">
720
+ <h3>Visionary</h3>
721
+ <div class="sponsor-price">$25,000</div>
722
+ <ul class="sponsor-list">
723
+ <li>Keynote introduction opportunity</li>
724
+ <li>VIP Lounge access</li>
725
+ <li>10 Complimentary tickets</li>
726
+ <li>Full year marketing alignment</li>
727
+ </ul>
728
+ <a href="#" class="btn btn-outline" style="color: var(--secondary); border-color: var(--secondary); margin-top: 1rem;">Contact Us</a>
729
+ </div>
730
+ </div>
731
+ </div>
732
+ </section>
733
+
734
+ <!-- Hotel Section -->
735
+ <section id="hotel" class="section-padding hotel">
736
+ <div class="container">
737
+ <div class="hotel-box reveal">
738
+ <h2 class="text-primary">Make It a Weekend</h2>
739
+ <p>We've reserved a limited block of rooms at the Hilton Garden Inn Wilsonville.</p>
740
+ <br>
741
+ <div style="margin-bottom: 2rem;">
742
+ <i class="ri-map-pin-line" style="color: var(--primary);"></i> 30800 SW Parkway Ave, Wilsonville, OR 97070<br>
743
+ <i class="ri-calendar-line" style="color: var(--primary);"></i> Reserve by May 15, 2026
744
+ </div>
745
+ <a href="#" class="btn btn-primary">Book Your Room</a>
746
+ </div>
747
+ </div>
748
+ </section>
749
+
750
+ <!-- Final CTA -->
751
+ <section id="tickets" class="section-padding text-center" style="background: var(--primary);">
752
+ <div class="container reveal">
753
+ <h2 style="color: white; margin-bottom: 1rem;">Reserve Your Seat</h2>
754
+ <p style="color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto 2rem auto;">Attendance is limited—don't miss your chance to be part of this night of purpose, joy, and community.</p>
755
+ <a href="#" class="btn btn-outline" style="border-color: white; color: white;">Learn More & Get Tickets</a>
756
+ </div>
757
+ </section>
758
+
759
+ <!-- Footer -->
760
+ <footer>
761
+ <div class="container footer-content">
762
+ <div>
763
+ <strong>Vital Life Foundation</strong><br>
764
+ BridgeTown Bash benefits programs that empower seniors and healthcare professionals across Oregon and beyond.
765
+ </div>
766
+ <div>
767
+ <a href="#" style="margin-left: 1rem;">Donate</a>
768
+ <a href="#" style="margin-left: 1rem;">View Details</a>
769
+ </div>
770
+ <div style="margin-top: 1rem; width: 100%; text-align: center; opacity: 0.6;">
771
+ Email #2 of 7 in our pre-event series. <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
772
+ </div>
773
+ </div>
774
+ </footer>
775
+
776
+ <script>
777
+ // --- Countdown Timer ---
778
+ const targetDate = new Date('June 26, 2026 18:00:00').getTime();
779
+
780
+ function updateCountdown() {
781
+ const now = new Date().getTime();
782
+ const distance = targetDate - now;
783
+
784
+ if (distance < 0) {
785
+ document.getElementById('days').innerText = "00";
786
+ return;
787
+ }
788
+
789
+ const days = Math.floor(distance / (1000 * 60 * 60 * 24));
790
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
791
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
792
+
793
+ document.getElementById('days').innerText = days < 10 ? '0' + days : days;
794
+ document.getElementById('hours').innerText = hours < 10 ? '0' + hours : hours;
795
+ document.getElementById('minutes').innerText = minutes < 10 ? '0' + minutes : minutes;
796
+ }
797
+
798
+ setInterval(updateCountdown, 1000);
799
+ updateCountdown();
800
+
801
+ // --- Scroll Animation ---
802
+ const revealElements = document.querySelectorAll('.reveal');
803
+
804
+ const revealOnScroll = () => {
805
+ const windowHeight = window.innerHeight;
806
+ const elementVisible = 150;
807
+
808
+ revealElements.forEach((reveal) => {
809
+ const elementTop = reveal.getBoundingClientRect().top;
810
+ if (elementTop < windowHeight - elementVisible) {
811
+ reveal.classList.add('active');
812
+ }
813
+ });
814
+ };
815
+
816
+ window.addEventListener('scroll', revealOnScroll);
817
+
818
+ // --- Header Scroll Effect ---
819
+ const header = document.getElementById('navbar');
820
+ window.addEventListener('scroll', () => {
821
+ if (window.scrollY > 50) {
822
+ header.classList.add('scrolled');
823
+ } else {
824
+ header.classList.remove('scrolled');
825
+ }
826
+ });
827
+
828
+ // --- Mobile Menu Toggle ---
829
+ const mobileToggle = document.querySelector('.mobile-toggle');
830
+ const navLinks = document.querySelector('.nav-links');
831
+
832
+ mobileToggle.addEventListener('click', () => {
833
+ // Simple toggle for demo purposes, in production would expand menu
834
+ if(navLinks.style.display === 'flex') {
835
+ navLinks.style.display = 'none';
836
+ } else {
837
+ navLinks.style.display = 'flex';
838
+ navLinks.style.position = 'absolute';
839
+ navLinks.style.top = '100%';
840
+ navLinks.style.left = '0';
841
+ navLinks.style.width = '100%';
842
+ navLinks.style.background = 'var(--secondary)';
843
+ navLinks.style.padding = '1rem';
844
+ navLinks.style.flexDirection = 'column';
845
+ navLinks.style.textAlign = 'center';
846
+ }
847
+ });
848
+ </script>
849
+ </body>
850
+ </html>