Hugging Face's logo

Spaces:
LAURELCORE
/
anycoder-7f7f1092
Running

App Files Community
LAURELCORE commited on
Commit
cd04b60
·
verified ·
1 Parent(s): 3324cff

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +365 -586
index.html CHANGED
@@ -2,511 +2,390 @@
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);
@@ -518,241 +397,190 @@
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
 
@@ -760,91 +588,42 @@
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>
 
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
+ <!-- FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
9
  <style>
 
10
  :root {
11
+ --primary-dark: #0f172a;
12
+ --primary-light: #1e293b;
13
+ --accent-gold: #fbbf24;
14
+ --accent-orange: #f97316;
15
+ --text-light: #f8fafc;
16
+ --text-muted: #94a3b8;
17
+ --bg-gradient: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #b91c1c 100%);
18
+ --glass-bg: rgba(255, 255, 255, 0.05);
 
19
  --glass-border: rgba(255, 255, 255, 0.1);
20
+ --font-main: 'Inter', system-ui, -apple-system, sans-serif;
 
21
  --font-display: 'Playfair Display', serif;
 
 
22
  }
23
 
24
  * {
25
+ box-sizing: box-box;
26
  margin: 0;
27
  padding: 0;
28
  }
29
 
 
 
 
 
30
  body {
31
+ font-family: var(--font-main);
32
+ background-color: var(--primary-dark);
33
  color: var(--text-light);
34
  line-height: 1.6;
35
  overflow-x: hidden;
36
  }
37
 
38
+ /* Typography */
39
+ h1, h2, h3, h4 {
40
+ font-family: var(--font-display);
41
  font-weight: 700;
42
  line-height: 1.2;
43
  }
44
 
45
  a {
46
+ color: var(--accent-gold);
47
  text-decoration: none;
48
+ transition: color 0.3s ease;
 
 
 
 
 
49
  }
50
 
51
+ a:hover {
52
+ color: var(--accent-orange);
 
53
  }
54
 
55
+ /* Layout Utilities */
56
  .container {
57
  max-width: 1200px;
58
  margin: 0 auto;
59
+ padding: 0 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  }
61
 
62
  .section-padding {
63
+ padding: 80px 0;
64
  }
65
 
66
  .text-center { text-align: center; }
67
+ .flex-center { display: flex; justify-content: center; align-items: center; }
 
68
 
69
+ /* Header */
70
  header {
71
  position: fixed;
72
  top: 0;
 
73
  width: 100%;
74
  z-index: 1000;
75
+ background: rgba(15, 23, 42, 0.8);
 
 
 
 
 
 
 
76
  backdrop-filter: blur(10px);
77
+ border-bottom: 1px solid var(--glass-border);
78
+ padding: 15px 0;
79
  }
80
 
81
+ .nav-content {
82
  display: flex;
83
  justify-content: space-between;
84
  align-items: center;
85
  }
86
 
87
  .logo {
88
+ font-size: 1.2rem;
89
+ font-weight: bold;
90
+ letter-spacing: 1px;
91
  color: var(--text-light);
 
 
 
 
 
 
 
 
 
 
92
  }
93
 
94
+ .btn-header {
95
+ background: var(--accent-gold);
96
+ color: var(--primary-dark);
97
+ padding: 8px 16px;
98
+ border-radius: 4px;
99
+ font-weight: 600;
100
  font-size: 0.9rem;
 
 
101
  }
102
 
103
+ .btn-header:hover {
104
+ background: var(--accent-orange);
105
+ color: white;
 
 
 
106
  }
107
 
108
+ /* Hero Section */
109
  .hero {
 
110
  height: 100vh;
111
  display: flex;
112
  align-items: center;
113
+ background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1519074069444-1ba4fff2d188?q=80&w=2000&auto=format&fit=crop') center/cover;
114
+ position: relative;
115
  overflow: hidden;
116
  }
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  .hero-content {
119
  z-index: 2;
 
120
  max-width: 800px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  }
122
 
123
  .hero h1 {
124
+ font-size: 4rem;
125
+ margin-bottom: 20px;
126
  background: linear-gradient(to right, #fff, #ccc);
127
  -webkit-background-clip: text;
128
  -webkit-text-fill-color: transparent;
129
+ animation: fadeIn 1s ease-out;
130
  }
131
 
132
+ .hero-date {
133
+ font-size: 1.5rem;
134
+ color: var(--accent-gold);
135
+ margin-bottom: 20px;
136
+ display: block;
137
+ font-weight: 600;
138
+ text-transform: uppercase;
139
+ letter-spacing: 2px;
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  }
141
 
142
+ .hero-desc {
143
+ font-size: 1.2rem;
144
+ color: var(--text-muted);
145
+ max-width: 600px;
146
+ margin-bottom: 40px;
147
  }
148
 
149
+ .btn-main {
150
+ display: inline-block;
151
+ background: transparent;
152
+ border: 2px solid var(--accent-gold);
153
+ color: var(--accent-gold);
154
+ padding: 12px 30px;
155
+ font-size: 1.1rem;
156
+ border-radius: 8px;
157
+ cursor: pointer;
158
+ transition: all 0.3s ease;
159
+ text-transform: uppercase;
160
+ letter-spacing: 1px;
161
+ font-weight: bold;
162
  }
163
 
164
+ .btn-main:hover {
165
+ background: var(--accent-gold);
166
+ color: var(--primary-dark);
167
+ box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
168
  }
169
 
170
+ /* Impact Section */
171
+ .impact-section {
172
+ background: var(--bg-gradient);
 
173
  position: relative;
 
174
  }
175
 
176
  .impact-grid {
177
  display: grid;
178
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
179
+ gap: 30px;
180
+ margin-top: 50px;
181
  }
182
 
183
+ .impact-card {
184
+ background: var(--glass-bg);
185
+ border: 1px solid var(--glass-border);
186
+ padding: 30px;
187
  border-radius: 12px;
 
188
  transition: transform 0.3s ease;
189
  }
190
 
191
+ .impact-card:hover {
192
+ transform: translateY(-5px);
193
+ background: rgba(255, 255, 255, 0.1);
 
 
 
 
 
194
  }
195
 
196
+ .impact-number {
197
  font-size: 2.5rem;
198
+ font-weight: bold;
199
+ color: var(--accent-gold);
200
+ margin-bottom: 10px;
201
+ font-family: var(--font-display);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  }
203
 
204
+ /* Experience Section */
205
+ .experience-section {
206
+ background-color: var(--primary-dark);
207
  }
208
 
209
+ .venue-badge {
210
+ display: inline-block;
211
+ background: var(--accent-orange);
212
+ color: white;
213
+ padding: 5px 15px;
214
+ border-radius: 50px;
215
+ font-size: 0.9rem;
216
+ margin-bottom: 15px;
217
+ text-transform: uppercase;
218
+ font-weight: bold;
219
  }
220
 
221
+ .features-grid {
222
  display: grid;
223
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
224
+ gap: 20px;
225
+ margin-top: 40px;
226
  }
227
 
228
  .feature-item {
229
+ text-align: center;
230
+ padding: 20px;
 
231
  }
232
 
233
  .feature-icon {
234
+ font-size: 3rem;
235
+ color: var(--accent-gold);
236
+ margin-bottom: 20px;
 
 
 
 
 
 
237
  }
238
 
239
+ /* Program Section */
240
+ .program-section {
241
+ background: var(--primary-light);
 
242
  }
243
 
244
  .timeline {
 
245
  max-width: 800px;
246
+ margin: 50px auto 0;
247
+ position: relative;
 
248
  }
249
 
250
  .timeline-item {
251
+ padding: 20px;
252
+ border-left: 2px solid var(--accent-gold);
253
+ margin-left: 20px;
254
  position: relative;
 
255
  }
256
 
257
  .timeline-item::before {
258
  content: '';
259
+ width: 12px;
260
+ height: 12px;
261
+ background: var(--accent-gold);
262
  position: absolute;
263
+ left: -8px;
264
+ top: 25px;
 
 
 
265
  border-radius: 50%;
 
 
266
  }
267
 
268
  .timeline-time {
269
+ font-weight: bold;
270
+ color: var(--accent-gold);
 
 
271
  }
272
 
273
+ /* Sponsorship Section */
274
+ .sponsorship-section {
275
+ background: var(--bg-gradient);
276
+ text-align: center;
 
277
  }
278
 
279
+ .sponsor-cards {
280
+ display: flex;
281
+ justify-content: center;
282
+ gap: 20px;
283
+ margin-top: 50px;
284
+ flex-wrap: wrap;
285
  }
286
 
287
  .sponsor-card {
288
+ background: rgba(0,0,0,0.3);
289
+ border: 1px solid var(--glass-border);
290
+ padding: 40px;
291
+ border-radius: 16px;
292
+ width: 300px;
293
  position: relative;
294
  overflow: hidden;
295
  }
296
 
297
+ .sponsor-card.highlight {
298
+ border-color: var(--accent-gold);
299
+ background: rgba(251, 191, 36, 0.05);
300
  }
301
 
302
+ .price {
303
+ font-size: 1.8rem;
304
+ font-weight: bold;
305
+ margin: 15px 0;
306
+ color: white;
307
  }
308
 
309
+ /* Lodging Section */
310
+ .lodging-section {
311
+ background: var(--primary-dark);
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ padding: 100px 20px;
316
  }
317
 
318
+ .hotel-container {
319
+ background: #fff;
320
+ color: #333;
321
+ padding: 40px;
322
+ border-radius: 12px;
323
+ max-width: 900px;
324
+ display: flex;
325
+ flex-wrap: wrap;
326
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
327
  }
328
 
329
+ .hotel-info {
330
+ flex: 1;
331
+ padding-right: 40px;
332
+ min-width: 300px;
333
+ }
334
+
335
+ .hotel-map-placeholder {
336
+ flex: 1;
337
+ min-width: 300px;
338
+ background: #eee;
339
+ height: 300px;
340
+ border-radius: 8px;
341
+ display: flex;
342
+ align-items: center;
343
+ justify-content: center;
344
+ color: #666;
345
+ font-weight: bold;
346
+ position: relative;
347
+ overflow: hidden;
348
+ }
349
+
350
+ .hotel-map-placeholder img {
351
+ width: 100%;
352
+ height: 100%;
353
+ object-fit: cover;
354
+ opacity: 0.6;
355
  }
356
 
357
+ /* Footer */
358
  footer {
359
  background: #000;
360
+ padding: 50px 0;
361
+ border-top: 1px solid #333;
362
  font-size: 0.9rem;
363
+ color: #666;
 
364
  }
365
 
366
  .footer-content {
367
  display: flex;
368
  justify-content: space-between;
 
369
  flex-wrap: wrap;
370
+ gap: 20px;
371
  }
372
 
373
  .anycoder-link {
374
+ color: var(--accent-gold);
375
+ font-weight: bold;
376
+ border: 1px solid var(--accent-gold);
377
+ padding: 5px 10px;
378
+ border-radius: 4px;
379
+ display: inline-block;
380
+ margin-top: 20px;
381
  }
382
+
383
+ /* Animations */
384
+ @keyframes fadeIn {
385
+ from { opacity: 0; transform: translateY(20px); }
386
+ to { opacity: 1; transform: translateY(0); }
387
  }
388
 
 
389
  .reveal {
390
  opacity: 0;
391
  transform: translateY(30px);
 
397
  transform: translateY(0);
398
  }
399
 
400
+ /* Mobile Adjustments */
401
  @media (max-width: 768px) {
402
+ .hero h1 { font-size: 2.5rem; }
403
+ .nav-content { flex-direction: column; gap: 10px; }
404
+ .hotel-container { flex-direction: column; }
405
+ .hotel-info { padding-right: 0; padding-bottom: 20px; }
406
+ .timeline { margin-left: 0; }
407
+ .timeline-item { border-left: 0; border-top: 2px solid var(--accent-gold); margin-top: 20px; padding-left: 0; }
408
+ .timeline-item::before { left: 0; top: -8px; }
 
 
 
 
 
 
409
  }
410
  </style>
411
  </head>
412
  <body>
413
 
414
  <!-- Header -->
415
+ <header>
416
+ <div class="container nav-content">
417
+ <div class="logo">
418
+ <i class="fa-solid fa-hands-holding-circle"></> VITAL LIFE FOUNDATION
419
+ </div>
420
+ <div>
421
+ <a href="#tickets" class="btn-header">Get Tickets</a>
 
 
 
 
 
 
 
422
  </div>
423
  </div>
424
  </header>
425
 
426
  <!-- Hero Section -->
427
  <section class="hero">
428
+ <div class="container hero-content">
429
+ <span class="hero-date">Friday, June 26, 2026</span>
 
430
  <h1>BridgeTown Bash 2026</h1>
431
+ <p class="hero-desc">
432
+ An unforgettable summer celebration where purpose meets celebration under the open sky. Join us at Oak + Hood for a night of connection, courage, and community.
433
+ </p>
434
+ <a href="#tickets" class="btn-main">Reserve Your Seat</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
435
  </div>
436
  </section>
437
 
438
  <!-- Impact Section -->
439
+ <section class="section-padding impact-section reveal">
440
  <div class="container">
441
+ <div class="text-center">
442
+ <h2>Impact in Action</h2>
443
+ <p style="color: var(--text-muted); max-width: 600px; margin: 10px auto;">
444
+ Because of passionate supporters like you, the Vital Life Foundation distributed <strong>$791,100</strong> to our charitable partners in 2024.
445
+ </p>
446
  </div>
447
+
448
  <div class="impact-grid">
449
+ <div class="impact-card text-center">
450
+ <div class="impact-number">Veterans</div>
451
+ <p>Honored with dignity and gratitude, ensuring their service is never forgotten.</p>
 
452
  </div>
453
+ <div class="impact-card text-center">
454
+ <div class="impact-number">Seniors</div>
455
+ <p>Long-held dreams brought to life, transforming isolation into joy.</p>
 
456
  </div>
457
+ <div class="impact-card text-center">
458
+ <div class="impact-number">Community</div>
459
+ <p>Transformed by connection, creating spaces where vitality thrives.</p>
 
460
  </div>
461
  </div>
462
  </div>
463
  </section>
464
 
465
  <!-- Experience Section -->
466
+ <section class="section-padding experience-section reveal">
467
  <div class="container">
468
+ <div class="text-center">
469
+ <span class="venue-badge">Oak + Hood | Willamette Valley</span>
470
+ <h2>The Experience</h2>
471
+ <p style="color: var(--text-muted);">Breathtaking views of Mt. Hood await.</p>
472
+ </div>
473
+
474
+ <div class="features-grid">
475
+ <div class="feature-item">
476
+ <i class="fa-solid fa-utensils feature-icon"></i>
477
+ <h4>Curated Cuisine</h4>
478
+ <p class="text-muted">Craft beverages and locally sourced dishes.</p>
479
+ </div>
480
+ <div class="feature-item">
481
+ <i class="fa-solid fa-music feature-icon"></i>
482
+ <h4>Live Music</h4>
483
+ <p class="text-muted">Country-inspired tunes and dancing under the stars.</p>
 
 
 
 
 
 
 
484
  </div>
485
+ <div class="feature-item">
486
+ <i class="fa-solid fa-bullhorn feature-icon"></i>
487
+ <h4>Mission Moments</h4>
488
+ <p class="text-muted">Heartfelt stories from those we serve.</p>
489
+ </div>
490
+ <div class="feature-item">
491
+ <i class="fa-solid fa-horse-head feature-icon"></i>
492
+ <h4>Fearless Fun</h4>
493
+ <p class="text-muted">Mechanical bull riding and axe throwing.</p>
494
  </div>
495
  </div>
496
  </div>
497
  </section>
498
 
499
  <!-- Program Section -->
500
+ <section class="section-padding program-section reveal">
501
  <div class="container">
502
+ <h2 class="text-center">Program Highlights</h2>
 
 
 
 
503
  <div class="timeline">
504
+ <div class="timeline-item">
505
+ <span class="timeline-time">Welcome</span>
506
+ <h4>CEO & CFO Introduction</h4>
507
+ <p class="text-muted">Setting the stage for the evening's mission.</p>
508
+ </div>
509
+ <div class="timeline-item">
510
+ <span class="timeline-time">Inspiration</span>
511
+ <h4>Partner Stories</h4>
512
+ <p class="text-muted">Inspiring words from our charitable partners.</p>
513
  </div>
514
+ <div class="timeline-item">
515
+ <span class="timeline-time">Mission Moment</h4>
516
+ <h4>Special Video Presentation</h4>
517
+ <p class="text-muted">A visual journey of our 2024 impact.</p>
518
  </div>
519
+ <div class="timeline-item">
520
+ <span class="timeline-time">Paddle Raise</h4>
521
+ <h4>Give in Real Time</h4>
522
+ <p class="text-muted">A powerful chance to amplify your impact immediately.</p>
523
  </div>
524
+ <div class="timeline-item">
525
+ <span class="timeline-time">Celebration</h4>
526
+ <h4>Dancing & Community</h4>
527
+ <p class="text-muted">Enjoying the night under the stars.</p>
528
  </div>
529
  </div>
530
  </div>
531
  </section>
532
 
533
  <!-- Sponsorship Section -->
534
+ <section class="section-padding sponsorship-section reveal">
535
  <div class="container">
536
+ <h2>Partner With Purpose</h2>
537
+ <p style="max-width: 600px; margin: 10px auto; color: var(--text-muted);">
538
+ Sponsorship is a powerful way to stand with the Vital Life mission while connecting with leaders across senior healthcare and community service.
539
+ </p>
 
540
 
541
+ <div class="sponsor-cards">
542
+ <div class="sponsor-card">
543
  <h3>Community Partner</h3>
544
+ <div class="price">$1,000</div>
545
+ <p>Brand recognition & 2 tickets</p>
 
 
 
 
 
546
  </div>
547
+ <div class="sponsor-card highlight">
548
+ <div style="position:absolute; top:0; right:0; background:var(--accent-gold); color:#000; padding:5px 10px; font-size:0.8rem; font-weight:bold;">POPULAR</div>
549
+ <h3>Impact Leader</h3>
550
+ <div class="price">$5,000</div>
551
+ <p>Prominent branding & 10 tickets</p>
 
 
 
 
 
 
552
  </div>
553
+ <div class="sponsor-card">
554
+ <h3>Vitality Champion</h3>
555
+ <div class="price">$25,000</div>
556
+ <p>Keynote opportunity & VIP table</p>
 
 
 
 
 
 
 
557
  </div>
558
  </div>
559
+
560
+ <div style="margin-top: 40px;">
561
+ <a href="#" class="btn-main">Become a Sponsor</a>
562
+ </div>
563
  </div>
564
  </section>
565
 
566
+ <!-- Lodging Section -->
567
+ <section class="lodging-section reveal">
568
+ <div class="hotel-container">
569
+ <div class="hotel-info">
570
+ <h3><i class="fa-solid fa-bed"></> Make It a Weekend</h3>
571
  <p>We've reserved a limited block of rooms at the Hilton Garden Inn Wilsonville.</p>
572
  <br>
573
+ <p><strong>📍 Hilton Garden Inn Wilsonville</strong><br>30800 SW Parkway Ave, Wilsonville, OR 97070</p>
574
+ <br>
575
+ <p>📅 <strong>Reserve by May 15, 2026</strong> to secure your stay.</p>
576
+ <br>
577
+ <a href="#" class="btn-header">Book Your Room</a>
578
+ </div>
579
+ <div class="hotel-map-placeholder">
580
+ <!-- Placeholder for map visual -->
581
+ <img src="https://images.unsplash.com/photo-1542314831-068da10d46d8?q=80&w=1000&auto=format&fit=crop" alt="Hotel Lobby">
582
+ <div style="position: absolute; bottom: 10px; right: 10px; background: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem;">Wilsonville, OR</div>
583
  </div>
 
 
 
 
 
 
 
 
 
584
  </div>
585
  </section>
586
 
 
588
  <footer>
589
  <div class="container footer-content">
590
  <div>
591
+ <p><strong>Vital Life Foundation</strong></p>
592
+ <p>This is Email #2 of 7 in our pre-event series.</p>
593
+ <p>BridgeTown Bash benefits programs that empower seniors and healthcare professionals across Oregon and beyond.</p>
594
  </div>
595
  <div>
596
+ <p><a href="#">Donate Now</a> | <a href="#">View Event Details</a></p>
597
+ <p>&copy; 2026 Vital Life Foundation.</p>
 
 
 
598
  </div>
599
  </div>
600
+ <div class="container text-center">
601
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
602
+ </div>
603
  </footer>
604
 
605
+ <!-- Scripts -->
606
  <script>
607
+ // Scroll Reveal Animation
608
+ function reveal() {
609
+ var reveals = document.querySelectorAll(".reveal");
610
+ for (var i = 0; i < reveals.length; i++) {
611
+ var windowHeight = window.innerHeight;
612
+ var elementTop = reveals[i].getBoundingClientRect().top;
613
+ var elementVisible = 150;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
614
  if (elementTop < windowHeight - elementVisible) {
615
+ reveals[i].classList.add("active");
616
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
617
  }
618
+ }
619
+ window.addEventListener("scroll", reveal);
620
+
621
+ // Initial check
622
+ reveal();
623
+
624
+ // Simple Countdown Logic (Optional for dynamic feel)
625
+ const eventDate = new Date("June 26, 2026 18:00:00").getTime();
626
+ // This is just a placeholder logic to show JS capability, not strictly functional for 2026 yet
627
  </script>
628
  </body>
629
  </html>