Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale="1.0"> | |
| <title>BridgeTown Bash 2026 | Vital Life Foundation</title> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-dark: #0f172a; | |
| --primary-light: #1e293b; | |
| --accent-gold: #fbbf24; | |
| --accent-orange: #f97316; | |
| --text-light: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --bg-gradient: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #b91c1c 100%); | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --font-main: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-display: 'Playfair Display', serif; | |
| } | |
| * { | |
| box-sizing: box-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--primary-dark); | |
| color: var(--text-light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* Typography */ | |
| h1, h2, h3, h4 { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| a { | |
| color: var(--accent-gold); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| a:hover { | |
| color: var(--accent-orange); | |
| } | |
| /* Layout Utilities */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .section-padding { | |
| padding: 80px 0; | |
| } | |
| .text-center { text-align: center; } | |
| .flex-center { display: flex; justify-content: center; align-items: center; } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--glass-border); | |
| padding: 15px 0; | |
| } | |
| .nav-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| color: var(--text-light); | |
| } | |
| .btn-header { | |
| background: var(--accent-gold); | |
| color: var(--primary-dark); | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .btn-header:hover { | |
| background: var(--accent-orange); | |
| color: white; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| 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; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| z-index: 2; | |
| max-width: 800px; | |
| } | |
| .hero h1 { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| background: linear-gradient(to right, #fff, #ccc); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: fadeIn 1s ease-out; | |
| } | |
| .hero-date { | |
| font-size: 1.5rem; | |
| color: var(--accent-gold); | |
| margin-bottom: 20px; | |
| display: block; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .hero-desc { | |
| font-size: 1.2rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin-bottom: 40px; | |
| } | |
| .btn-main { | |
| display: inline-block; | |
| background: transparent; | |
| border: 2px solid var(--accent-gold); | |
| color: var(--accent-gold); | |
| padding: 12px 30px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: bold; | |
| } | |
| .btn-main:hover { | |
| background: var(--accent-gold); | |
| color: var(--primary-dark); | |
| box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); | |
| } | |
| /* Impact Section */ | |
| .impact-section { | |
| background: var(--bg-gradient); | |
| position: relative; | |
| } | |
| .impact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| margin-top: 50px; | |
| } | |
| .impact-card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| padding: 30px; | |
| border-radius: 12px; | |
| transition: transform 0.3s ease; | |
| } | |
| .impact-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .impact-number { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: var(--accent-gold); | |
| margin-bottom: 10px; | |
| font-family: var(--font-display); | |
| } | |
| /* Experience Section */ | |
| .experience-section { | |
| background-color: var(--primary-dark); | |
| } | |
| .venue-badge { | |
| display: inline-block; | |
| background: var(--accent-orange); | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| margin-bottom: 15px; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| margin-top: 40px; | |
| } | |
| .feature-item { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| color: var(--accent-gold); | |
| margin-bottom: 20px; | |
| } | |
| /* Program Section */ | |
| .program-section { | |
| background: var(--primary-light); | |
| } | |
| .timeline { | |
| max-width: 800px; | |
| margin: 50px auto 0; | |
| position: relative; | |
| } | |
| .timeline-item { | |
| padding: 20px; | |
| border-left: 2px solid var(--accent-gold); | |
| margin-left: 20px; | |
| position: relative; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--accent-gold); | |
| position: absolute; | |
| left: -8px; | |
| top: 25px; | |
| border-radius: 50%; | |
| } | |
| .timeline-time { | |
| font-weight: bold; | |
| color: var(--accent-gold); | |
| } | |
| /* Sponsorship Section */ | |
| .sponsorship-section { | |
| background: var(--bg-gradient); | |
| text-align: center; | |
| } | |
| .sponsor-cards { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 50px; | |
| flex-wrap: wrap; | |
| } | |
| .sponsor-card { | |
| background: rgba(0,0,0,0.3); | |
| border: 1px solid var(--glass-border); | |
| padding: 40px; | |
| border-radius: 16px; | |
| width: 300px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sponsor-card.highlight { | |
| border-color: var(--accent-gold); | |
| background: rgba(251, 191, 36, 0.05); | |
| } | |
| .price { | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| margin: 15px 0; | |
| color: white; | |
| } | |
| /* Lodging Section */ | |
| .lodging-section { | |
| background: var(--primary-dark); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 100px 20px; | |
| } | |
| .hotel-container { | |
| background: #fff; | |
| color: #333; | |
| padding: 40px; | |
| border-radius: 12px; | |
| max-width: 900px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| } | |
| .hotel-info { | |
| flex: 1; | |
| padding-right: 40px; | |
| min-width: 300px; | |
| } | |
| .hotel-map-placeholder { | |
| flex: 1; | |
| min-width: 300px; | |
| background: #eee; | |
| height: 300px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #666; | |
| font-weight: bold; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hotel-map-placeholder img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| opacity: 0.6; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: #000; | |
| padding: 50px 0; | |
| border-top: 1px solid #333; | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| .footer-content { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .anycoder-link { | |
| color: var(--accent-gold); | |
| font-weight: bold; | |
| border: 1px solid var(--accent-gold); | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| display: inline-block; | |
| margin-top: 20px; | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease; | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Mobile Adjustments */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2.5rem; } | |
| .nav-content { flex-direction: column; gap: 10px; } | |
| .hotel-container { flex-direction: column; } | |
| .hotel-info { padding-right: 0; padding-bottom: 20px; } | |
| .timeline { margin-left: 0; } | |
| .timeline-item { border-left: 0; border-top: 2px solid var(--accent-gold); margin-top: 20px; padding-left: 0; } | |
| .timeline-item::before { left: 0; top: -8px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container nav-content"> | |
| <div class="logo"> | |
| <i class="fa-solid fa-hands-holding-circle"></> VITAL LIFE FOUNDATION | |
| </div> | |
| <div> | |
| <a href="#tickets" class="btn-header">Get Tickets</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container hero-content"> | |
| <span class="hero-date">Friday, June 26, 2026</span> | |
| <h1>BridgeTown Bash 2026</h1> | |
| <p class="hero-desc"> | |
| 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. | |
| </p> | |
| <a href="#tickets" class="btn-main">Reserve Your Seat</a> | |
| </div> | |
| </section> | |
| <!-- Impact Section --> | |
| <section class="section-padding impact-section reveal"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <h2>Impact in Action</h2> | |
| <p style="color: var(--text-muted); max-width: 600px; margin: 10px auto;"> | |
| Because of passionate supporters like you, the Vital Life Foundation distributed <strong>$791,100</strong> to our charitable partners in 2024. | |
| </p> | |
| </div> | |
| <div class="impact-grid"> | |
| <div class="impact-card text-center"> | |
| <div class="impact-number">Veterans</div> | |
| <p>Honored with dignity and gratitude, ensuring their service is never forgotten.</p> | |
| </div> | |
| <div class="impact-card text-center"> | |
| <div class="impact-number">Seniors</div> | |
| <p>Long-held dreams brought to life, transforming isolation into joy.</p> | |
| </div> | |
| <div class="impact-card text-center"> | |
| <div class="impact-number">Community</div> | |
| <p>Transformed by connection, creating spaces where vitality thrives.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section class="section-padding experience-section reveal"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <span class="venue-badge">Oak + Hood | Willamette Valley</span> | |
| <h2>The Experience</h2> | |
| <p style="color: var(--text-muted);">Breathtaking views of Mt. Hood await.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-item"> | |
| <i class="fa-solid fa-utensils feature-icon"></i> | |
| <h4>Curated Cuisine</h4> | |
| <p class="text-muted">Craft beverages and locally sourced dishes.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fa-solid fa-music feature-icon"></i> | |
| <h4>Live Music</h4> | |
| <p class="text-muted">Country-inspired tunes and dancing under the stars.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fa-solid fa-bullhorn feature-icon"></i> | |
| <h4>Mission Moments</h4> | |
| <p class="text-muted">Heartfelt stories from those we serve.</p> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fa-solid fa-horse-head feature-icon"></i> | |
| <h4>Fearless Fun</h4> | |
| <p class="text-muted">Mechanical bull riding and axe throwing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Program Section --> | |
| <section class="section-padding program-section reveal"> | |
| <div class="container"> | |
| <h2 class="text-center">Program Highlights</h2> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <span class="timeline-time">Welcome</span> | |
| <h4>CEO & CFO Introduction</h4> | |
| <p class="text-muted">Setting the stage for the evening's mission.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <span class="timeline-time">Inspiration</span> | |
| <h4>Partner Stories</h4> | |
| <p class="text-muted">Inspiring words from our charitable partners.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <span class="timeline-time">Mission Moment</h4> | |
| <h4>Special Video Presentation</h4> | |
| <p class="text-muted">A visual journey of our 2024 impact.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <span class="timeline-time">Paddle Raise</h4> | |
| <h4>Give in Real Time</h4> | |
| <p class="text-muted">A powerful chance to amplify your impact immediately.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <span class="timeline-time">Celebration</h4> | |
| <h4>Dancing & Community</h4> | |
| <p class="text-muted">Enjoying the night under the stars.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sponsorship Section --> | |
| <section class="section-padding sponsorship-section reveal"> | |
| <div class="container"> | |
| <h2>Partner With Purpose</h2> | |
| <p style="max-width: 600px; margin: 10px auto; color: var(--text-muted);"> | |
| Sponsorship is a powerful way to stand with the Vital Life mission while connecting with leaders across senior healthcare and community service. | |
| </p> | |
| <div class="sponsor-cards"> | |
| <div class="sponsor-card"> | |
| <h3>Community Partner</h3> | |
| <div class="price">$1,000</div> | |
| <p>Brand recognition & 2 tickets</p> | |
| </div> | |
| <div class="sponsor-card highlight"> | |
| <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> | |
| <h3>Impact Leader</h3> | |
| <div class="price">$5,000</div> | |
| <p>Prominent branding & 10 tickets</p> | |
| </div> | |
| <div class="sponsor-card"> | |
| <h3>Vitality Champion</h3> | |
| <div class="price">$25,000</div> | |
| <p>Keynote opportunity & VIP table</p> | |
| </div> | |
| </div> | |
| <div style="margin-top: 40px;"> | |
| <a href="#" class="btn-main">Become a Sponsor</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lodging Section --> | |
| <section class="lodging-section reveal"> | |
| <div class="hotel-container"> | |
| <div class="hotel-info"> | |
| <h3><i class="fa-solid fa-bed"></> Make It a Weekend</h3> | |
| <p>We've reserved a limited block of rooms at the Hilton Garden Inn Wilsonville.</p> | |
| <br> | |
| <p><strong>📍 Hilton Garden Inn Wilsonville</strong><br>30800 SW Parkway Ave, Wilsonville, OR 97070</p> | |
| <br> | |
| <p>📅 <strong>Reserve by May 15, 2026</strong> to secure your stay.</p> | |
| <br> | |
| <a href="#" class="btn-header">Book Your Room</a> | |
| </div> | |
| <div class="hotel-map-placeholder"> | |
| <!-- Placeholder for map visual --> | |
| <img src="https://images.unsplash.com/photo-1542314831-068da10d46d8?q=80&w=1000&auto=format&fit=crop" alt="Hotel Lobby"> | |
| <div style="position: absolute; bottom: 10px; right: 10px; background: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem;">Wilsonville, OR</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container footer-content"> | |
| <div> | |
| <p><strong>Vital Life Foundation</strong></p> | |
| <p>This is Email #2 of 7 in our pre-event series.</p> | |
| <p>BridgeTown Bash benefits programs that empower seniors and healthcare professionals across Oregon and beyond.</p> | |
| </div> | |
| <div> | |
| <p><a href="#">Donate Now</a> | <a href="#">View Event Details</a></p> | |
| <p>© 2026 Vital Life Foundation.</p> | |
| </div> | |
| </div> | |
| <div class="container text-center"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script> | |
| // Scroll Reveal Animation | |
| function reveal() { | |
| var reveals = document.querySelectorAll(".reveal"); | |
| for (var i = 0; i < reveals.length; i++) { | |
| var windowHeight = window.innerHeight; | |
| var elementTop = reveals[i].getBoundingClientRect().top; | |
| var elementVisible = 150; | |
| if (elementTop < windowHeight - elementVisible) { | |
| reveals[i].classList.add("active"); | |
| } | |
| } | |
| } | |
| window.addEventListener("scroll", reveal); | |
| // Initial check | |
| reveal(); | |
| // Simple Countdown Logic (Optional for dynamic feel) | |
| const eventDate = new Date("June 26, 2026 18:00:00").getTime(); | |
| // This is just a placeholder logic to show JS capability, not strictly functional for 2026 yet | |
| </script> | |
| </body> | |
| </html> |