Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ACCESS - Get On The Inside</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Root Variables */ | |
| :root { | |
| --black: #000000; | |
| --white: #ffffff; | |
| --yellow: #FFE300; | |
| --blue: #0038FF; | |
| --orange: #FF5100; | |
| --gray: #F4F4F4; | |
| --font-main: 'Bebas Neue', sans-serif; | |
| --font-secondary: 'Montserrat', sans-serif; | |
| } | |
| /* Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scroll-snap-type: y mandatory; | |
| overflow-y: scroll; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| color: var(--white); | |
| background-color: var(--black); | |
| overflow-x: hidden; | |
| height: 100vh; | |
| scroll-snap-type: y mandatory; | |
| overscroll-behavior-y: contain; | |
| } | |
| h1, h2, h3 { | |
| font-weight: 400; | |
| line-height: 0.9; | |
| letter-spacing: 0.5px; | |
| } | |
| p { | |
| font-family: var(--font-secondary); | |
| font-weight: 400; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Brand Banner */ | |
| .brand-banner { | |
| width: 100%; | |
| height: 60px; | |
| background-color: var(--black); | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 10; | |
| } | |
| .banner-wrapper { | |
| display: flex; | |
| height: 100%; | |
| align-items: center; | |
| } | |
| .banner-text { | |
| display: flex; | |
| align-items: center; | |
| white-space: nowrap; | |
| height: 100%; | |
| animation: slide 20s linear infinite; | |
| } | |
| .banner-item { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--white); | |
| margin: 0 25px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .banner-star { | |
| margin: 0 5px; | |
| font-size: 18px; | |
| } | |
| @keyframes slide { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 60px; | |
| width: 100%; | |
| padding: 30px 0; | |
| z-index: 100; | |
| background-color: transparent; | |
| transition: all 0.3s ease; | |
| } | |
| header.scrolled { | |
| background-color: var(--black); | |
| padding: 20px 0; | |
| top: 0; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--white); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 30px; | |
| } | |
| nav ul li a { | |
| font-family: var(--font-secondary); | |
| font-size: 16px; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| nav ul li a:hover { | |
| color: var(--yellow); | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--white); | |
| font-size: 24px; | |
| cursor: pointer; | |
| } | |
| /* Page Sections */ | |
| .section { | |
| width: 100%; | |
| height: 100vh; | |
| scroll-snap-align: start; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)), | |
| url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center; | |
| background-size: cover; | |
| } | |
| .hero-content { | |
| text-align: center; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 100%; | |
| padding: 0 20px; | |
| } | |
| .hero h1 { | |
| font-size: 120px; | |
| line-height: 0.9; | |
| margin-bottom: 20px; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 span { | |
| display: block; | |
| } | |
| .hero h2 { | |
| font-family: var(--font-secondary); | |
| font-size: 24px; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| letter-spacing: 5px; | |
| margin-bottom: 40px; | |
| } | |
| /* Value Proposition Section */ | |
| .value-prop { | |
| background-color: var(--black); | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .value-prop h2 { | |
| font-size: 120px; | |
| line-height: 0.9; | |
| margin-bottom: 40px; | |
| text-transform: uppercase; | |
| } | |
| .value-prop h2 span { | |
| display: block; | |
| } | |
| .value-prop p { | |
| font-size: 18px; | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| line-height: 1.6; | |
| text-transform: uppercase; | |
| } | |
| /* Features Sections */ | |
| .feature-section { | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .feature-section.discover { | |
| background-color: var(--yellow); | |
| color: var(--black); | |
| } | |
| .feature-section.ultimate-fan { | |
| background-color: var(--blue); | |
| color: var(--white); | |
| } | |
| .feature-section.experience { | |
| background-color: var(--orange); | |
| color: var(--white); | |
| } | |
| .feature-section h2 { | |
| font-size: 120px; | |
| line-height: 0.9; | |
| margin-bottom: 60px; | |
| text-transform: uppercase; | |
| } | |
| .feature-section h2 span { | |
| display: block; | |
| } | |
| .feature-mockup { | |
| max-width: 300px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .feature-mockup img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| border-radius: 30px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Waitlist Section */ | |
| .waitlist { | |
| background-color: var(--gray); | |
| color: var(--black); | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .waitlist h2 { | |
| font-size: 120px; | |
| line-height: 0.9; | |
| margin-bottom: 40px; | |
| text-transform: uppercase; | |
| } | |
| .waitlist h2 span { | |
| display: block; | |
| } | |
| .waitlist-form { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .waitlist-form input { | |
| width: 100%; | |
| padding: 20px 30px; | |
| border: 2px solid var(--black); | |
| border-radius: 50px; | |
| font-family: var(--font-secondary); | |
| font-size: 16px; | |
| background-color: transparent; | |
| color: var(--black); | |
| outline: none; | |
| } | |
| .waitlist-form button { | |
| position: absolute; | |
| right: 5px; | |
| top: 5px; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: var(--black); | |
| color: var(--white); | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .waitlist-form button:hover { | |
| background-color: var(--orange); | |
| } | |
| .waitlist p { | |
| font-size: 16px; | |
| margin-top: 20px; | |
| text-transform: uppercase; | |
| } | |
| /* Footer */ | |
| footer { | |
| height: 100vh; | |
| background-color: var(--black); | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| scroll-snap-align: start; | |
| } | |
| .footer-logo { | |
| font-size: 72px; | |
| font-weight: 700; | |
| margin-bottom: 40px; | |
| } | |
| /* Scroll Down Indicator */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| animation: bounce 2s infinite; | |
| cursor: pointer; | |
| z-index: 10; | |
| } | |
| .scroll-indicator i { | |
| font-size: 24px; | |
| color: var(--white); | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);} | |
| 40% {transform: translateY(-20px) translateX(-50%);} | |
| 60% {transform: translateY(-10px) translateX(-50%);} | |
| } | |
| /* Mobile Styles */ | |
| @media (max-width: 992px) { | |
| .hero h1, | |
| .value-prop h2, | |
| .feature-section h2, | |
| .waitlist h2 { | |
| font-size: 80px; | |
| } | |
| .hero h2 { | |
| font-size: 20px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| nav ul { | |
| display: none; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero h1, | |
| .value-prop h2, | |
| .feature-section h2, | |
| .waitlist h2 { | |
| font-size: 60px; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .hero h1, | |
| .value-prop h2, | |
| .feature-section h2, | |
| .waitlist h2 { | |
| font-size: 48px; | |
| } | |
| .feature-mockup { | |
| max-width: 250px; | |
| } | |
| .waitlist-form input { | |
| padding: 15px 20px; | |
| font-size: 14px; | |
| } | |
| .waitlist-form button { | |
| width: 40px; | |
| height: 40px; | |
| top: 6px; | |
| right: 6px; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate { | |
| animation: fadeIn 1s ease forwards; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| /* Font Face */ | |
| @font-face { | |
| font-family: 'Bebas Neue'; | |
| src: url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Montserrat'; | |
| src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap'); | |
| font-display: swap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Brand Banner --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="container header-container"> | |
| <a href="#" class="logo">ACCESS</a> | |
| <nav> | |
| <ul> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button class="mobile-menu-btn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="section hero" id="hero"> | |
| <div class="hero-content"> | |
| <h1 class="animate"> | |
| <span>GIGS</span> | |
| <span>PARTIES</span> | |
| <span>EVENTS</span> | |
| </h1> | |
| <h2 class="animate delay-1">GET ON / THE INSIDE</h2> | |
| </div> | |
| <a href="#value-prop" class="scroll-indicator"> | |
| <i class="fas fa-chevron-down"></i> | |
| </a> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Value Proposition Section --> | |
| <section class="section value-prop" id="value-prop"> | |
| <div class="container"> | |
| <h2 class="animate"> | |
| <span>IN OUR</span> | |
| <span>WORLD</span> | |
| <span>EVERYONE</span> | |
| <span>GOES OUT</span> | |
| <span>AND NO</span> | |
| <span>ONE</span> | |
| <span>MISSES</span> | |
| <span>OUT</span> | |
| </h2> | |
| <p class="animate delay-1">Get on the inside</p> | |
| <p class="animate delay-1">Coming soon to the App Store.</p> | |
| <p class="animate delay-2">Instantly get access to the most hyped events around you</p> | |
| </div> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Discover Feature Section --> | |
| <section class="section feature-section discover" id="discover"> | |
| <div class="container"> | |
| <h2 class="animate"> | |
| <span>DISCOVER</span> | |
| <span>THE IRL</span> | |
| </h2> | |
| <div class="feature-mockup animate delay-1"> | |
| <img src="https://via.placeholder.com/300x600/FFE300/000000?text=DISCOVER+SCREEN" alt="ACCESS App Discover Screen"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Ultimate Fan Feature Section --> | |
| <section class="section feature-section ultimate-fan" id="ultimate-fan"> | |
| <div class="container"> | |
| <h2 class="animate"> | |
| <span>BECOME</span> | |
| <span>THE</span> | |
| <span>ULTIMATE FAN</span> | |
| </h2> | |
| <div class="feature-mockup animate delay-1"> | |
| <img src="https://via.placeholder.com/300x600/0038FF/FFFFFF?text=ARTIST+PROFILE" alt="ACCESS App Artist Profile"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experience Feature Section --> | |
| <section class="section feature-section experience" id="experience"> | |
| <div class="container"> | |
| <h2 class="animate"> | |
| <span>EXPERIENCE</span> | |
| <span>IT ALL</span> | |
| </h2> | |
| <div class="feature-mockup animate delay-1"> | |
| <img src="https://via.placeholder.com/300x600/FF5100/FFFFFF?text=EVENT+VIEW" alt="ACCESS App Event View"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Waitlist Section --> | |
| <section class="section waitlist" id="waitlist"> | |
| <div class="container"> | |
| <h2 class="animate"> | |
| <span>JOIN THE</span> | |
| <span>WAITLIST</span> | |
| </h2> | |
| <form class="waitlist-form animate delay-1" id="waitlistForm"> | |
| <input type="email" placeholder="Enter email address" required> | |
| <button type="submit">→</button> | |
| </form> | |
| <p class="animate delay-2">Launching soon in all major cities.</p> | |
| <p class="animate delay-2">Get on the inside.</p> | |
| </div> | |
| </section> | |
| <!-- Brand Banner Separator --> | |
| <div class="brand-banner"> | |
| <div class="banner-wrapper"> | |
| <div class="banner-text"> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| <div class="banner-item">ACCESS<span class="banner-star">★</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-logo animate">ACCESS</div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); | |
| const nav = document.querySelector('nav ul'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex'; | |
| }); | |
| // Infinite scrolling for banners | |
| const banners = document.querySelectorAll('.banner-text'); | |
| banners.forEach(banner => { | |
| // Duplicate the content to make the loop seamless | |
| banner.innerHTML += banner.innerHTML; | |
| // Adjust speed to match updated content width | |
| banner.style.animationDuration = '20s'; | |
| }); | |
| // Smooth Scrolling for Anchor Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (window.innerWidth <= 768) { | |
| nav.style.display = 'none'; | |
| } | |
| } | |
| }); | |
| }); | |
| // Header Scroll Effect | |
| window.addEventListener('scroll', () => { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Waitlist Form Submission | |
| const waitlistForm = document.getElementById('waitlistForm'); | |
| if (waitlistForm) { | |
| waitlistForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const emailInput = this.querySelector('input[type="email"]'); | |
| const submitButton = this.querySelector('button[type="submit"]'); | |
| if (!emailInput.checkValidity()) { | |
| alert('Please enter a valid email address'); | |
| return; | |
| } | |
| // Disable button during submission | |
| submitButton.disabled = true; | |
| submitButton.innerHTML = '...'; | |
| // Simulate form submission (in a real app, this would be an AJAX call) | |
| setTimeout(() => { | |
| submitButton.innerHTML = '✓'; | |
| submitButton.style.backgroundColor = '#00FF00'; | |
| setTimeout(() => { | |
| alert('Thanks! You\'ve been added to the waitlist.'); | |
| waitlistForm.reset(); | |
| submitButton.innerHTML = '→'; | |
| submitButton.style.backgroundColor = ''; | |
| submitButton.disabled = false; | |
| }, 500); | |
| }, 1000); | |
| }); | |
| } | |
| // Intersection Observer for Animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.animate').forEach(element => { | |
| observer.observe(element); | |
| }); | |
| </script> | |
| </body> | |
| </html> |