Cyber Cafe temple
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CyberZone | Premium Gaming & Internet Cafe</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Preloader --> <div class="preloader"> <div class="loading-animation"> <div class="loading-bar"></div> <div class="loading-bar"></div> <div class="loading-bar"></div> <div class="loading-bar"></div> </div> <p>CYBERZONE</p> </div> <!-- Navigation --> <nav class="navbar"> <div class="container"> <a href="#" class="logo">CYBER<span>ZONE</span></a> <div class="nav-links"> <a href="#home">Home</a> <a href="#services">Services</a> <a href="#pricing">Pricing</a> <a href="#gaming">Gaming</a> <a href="#events">Events</a> <a href="#food">Food & Drinks</a> <a href="#testimonials">Testimonials</a> <a href="#contact">Contact</a> </div> <div class="nav-cta"> <a href="#pricing" class="btn-nav">Membership</a> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="hero-content"> <h1 class="hero-title">ULTIMATE <span>GAMING</span> EXPERIENCE</h1> <p class="hero-subtitle">Premium gaming PCs, high-speed internet, and the best gaming atmosphere in town</p> <div class="hero-buttons"> <a href="#pricing" class="btn-primary">Book Now</a> <a href="#gaming" class="btn-secondary">View Setup</a> </div> <div class="hero-stats"> <div class="stat-item"> <h3>50+</h3> <p>Gaming Rigs</p> </div> <div class="stat-item"> <h3>1Gbps</h3> <p>Internet Speed</p> </div> <div class="stat-item"> <h3>24/7</h3> <p>Availability</p> </div> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Cyber Cafe Gaming Setup" class="floating"> </div> </div> <div class="scroll-down"> <div class="mouse"></div> <div class="arrow"></div> </div> </section> <!-- Partners Scroller --> <section class="partners"> <div class="container"> <h2>OUR GAMING PARTNERS</h2> <div class="scroller-container"> <div class="scroller"> <div class="scroller-inner"> <img src="https://via.placeholder.com/150x60/111/fff?text=NVIDIA" alt="NVIDIA"> <img src="https://via.placeholder.com/150x60/111/fff?text=RAZER" alt="Razer"> <img src="https://via.placeholder.com/150x60/111/fff?text=ASUS" alt="ASUS"> <img src="https://via.placeholder.com/150x60/111/fff?text=INTEL" alt="Intel"> <img src="https://via.placeholder.com/150x60/111/fff?text=AMD" alt="AMD"> <img src="https://via.placeholder.com/150x60/111/fff?text=LOGITECH" alt="Logitech"> <img src="https://via.placeholder.com/150x60/111/fff?text=STEAM" alt="Steam"> <img src="https://via.placeholder.com/150x60/111/fff?text=BLIZZARD" alt="Blizzard"> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <span class="section-tag">WHAT WE OFFER</span> <h2 class="section-title">Our <span>Services</span></h2> <p class="section-subtitle">Everything you need for the ultimate cyber experience</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-gamepad"></i> </div> <h3>Premium Gaming</h3> <p>High-end gaming PCs with RTX graphics, high refresh rate monitors, and mechanical keyboards</p> <div class="service-badge">Most Popular</div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-wifi"></i> </div> <h3>High-Speed Internet</h3> <p>1Gbps fiber optic connection for seamless browsing, streaming, and downloads</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-print"></i> </div> <h3>Printing & Scanning</h3> <p>High-quality color printing, scanning, and photocopying services</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h3>VR Experience</h3> <p>State-of-the-art VR setups with the latest games and experiences</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-utensils"></i> </div> <h3>Snack Bar</h3> <p>Refreshments, snacks, and meals to keep you energized</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-users"></i> </div> <h3>Private Rooms</h3> <p>Book private gaming rooms for you and your friends</p> </div> </div> </div> </section> <!-- Pricing Section --> <section class="pricing" id="pricing"> <div class="container"> <span class="section-tag">AFFORDABLE RATES</span> <h2 class="section-title">Our <span>Pricing</span></h2> <p class="section-subtitle">Choose the perfect plan for your gaming needs</p> <div class="pricing-tabs"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="hourly">Hourly</button> <button class="tab-btn" data-tab="daily">Daily</button> <button class="tab-btn" data-tab="monthly">Monthly</button> </div> <div class="tab-content"> <div class="pricing-card" data-category="hourly"> <h3>Casual Gamer</h3> <div class="price"> <span class="currency">$</span> <span class="amount">3</span> <span class="period">/hour</span> </div> <ul class="features"> <li><i class="fas fa-check"></i> Standard Gaming PC</li> <li><i class="fas fa-check"></i> 1080p Monitor</li> <li><i class="fas fa-check"></i> Basic Peripherals</li> <li><i class="fas fa-check"></i> Free WiFi</li> <li><i class="fas fa-times"></i> Premium Headset</li> <li><i class="fas fa-times"></i> Priority Seating</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> <div class="pricing-card featured" data-category="hourly"> <div class="featured-badge">Most Popular</div> <h3>Pro Gamer</h3> <div class="price"> <span class="currency">$</span> <span class="amount">5</span> <span class="period">/hour</span> </div> <ul class="features"> <li><i class="fas fa-check"></i> High-End Gaming PC</li> <li><i class="fas fa-check"></i> 144Hz Monitor</li> <li><i class="fas fa-check"></i> Mechanical Keyboard</li> <li><i class="fas fa-check"></i> Premium Headset</li> <li><i class="fas fa-check"></i> Free WiFi</li> <li><i class="fas fa-check"></i> Priority Seating</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> <div class="pricing-card" data-category="hourly"> <h3>VIP Experience</h3> <div class="price"> <span class="currency">$</span> <span class="amount">8</span> <span class="period">/hour</span> </div> <ul class="features"> <li><i class="fas fa-check"></i> Elite Gaming PC</li> <li><i class="fas fa-check"></i> 240Hz Monitor</li> <li><i class="fas fa-check"></i> Premium Peripherals</li> <li><i class="fas fa-check"></i> Noise-Canceling Headset</li> <li><i class="fas fa-check"></i> Private Booth</li> <li><i class="fas fa-check"></i> Free Drink</li> </ul> <a href="#" class="btn-primary">Book Now</a> </div> </div> </div> </div> </section> <!-- Gaming Setup Section --> <section class="gaming" id="gaming"> <div class="container"> <span class="section-tag">OUR SETUP</span> <h2 class="section-title">Gaming <span>Rigs</span></h2> <p class="section-subtitle">Top-tier hardware for the ultimate gaming experience</p> <div class="swiper gamingSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="setup-card"> <div class="setup-image"> <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Standard Setup"> </div> <div class="setup-details"> <h3>Standard Setup</h3> <ul class="specs"> <li><i class="fas fa-microchip"></i> Intel Core i5</li> <li><i class="fas fa-memory"></i> 16GB RAM</li> <li><i class="fas fa-tv"></i> GTX 1660 Super</li> <li><i class="fas fa-desktop"></i> 24" 1080p 75Hz</li> </ul> <a href="#pricing" class="btn-secondary">View Pricing</a> </div> </div> </div> <div class="swiper-slide"> <div class="setup-card"> <div class="setup-image"> <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Pro Setup"> </div> <div class="setup-details"> <h3>Pro Setup</h3> <ul class="specs"> <li><i class="fas fa-microchip"></i> Intel Core i7</li> <li><i class="fas fa-memory"></i> 32GB RAM</li> <li><i class="fas fa-tv"></i> RTX 3060 Ti</li> <li><i class="fas fa-desktop"></i> 27" 1440p 144Hz</li> </ul> <a href="#pricing" class="btn-secondary">View Pricing</a> </div> </div> </div> <div class="swiper-slide"> <div class="setup-card"> <div class="setup-image"> <img src="https://images.unsplash.com/photo-1552831388-6a0b3575b32a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Elite Setup"> </div> <div class="setup-details"> <h3>Elite Setup</h3> <ul class="specs"> <li><i class="fas fa-microchip"></i> Intel Core i9</li> <li><i class="fas fa-memory"></i> 64GB RAM</li> <li><i class="fas fa-tv"></i> RTX 4090</li> <li><i class="fas fa-desktop"></i> 32" 4K 240Hz</li> </ul> <a href="#pricing" class="btn-secondary">View Pricing</a> </div> </div> </div> <div class="swiper-slide"> <div class="setup-card"> <div class="setup-image"> <img src="https://images.unsplash.com/photo-1585076641399-5c06d1b3365f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="VR Setup"> </div> <div class="setup-details"> <h3>VR Setup</h3> <ul class="specs"> <li><i class="fas fa-microchip"></i> Intel Core i7</li> <li><i class="fas fa-memory"></i> 32GB RAM</li> <li><i class="fas fa-tv"></i> RTX 3080</li> <li><i class="fas fa-vr-cardboard"></i> Valve Index</li> </ul> <a href="#pricing" class="btn-secondary">View Pricing</a> </div> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </section> <!-- Events Section --> <section class="events" id="events"> <div class="container"> <span class="section-tag">JOIN THE ACTION</span> <h2 class="section-title">Upcoming <span>Events</span></h2> <p class="section-subtitle">Tournaments, LAN parties, and special events</p> <div class="events-grid"> <div class="event-card"> <div class="event-date"> <span class="day">15</span> <span class="month">JUN</span> </div> <div class="event-image"> <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="CS:GO Tournament"> <div class="event-badge">Tournament</div> </div> <div class="event-details"> <h3>CS:GO Championship</h3> <p class="event-time"><i class="far fa-clock"></i> 5:00 PM - 10:00 PM</p> <p class="event-desc">$1000 prize pool. Teams of 5. Double elimination bracket.</p> <a href="#" class="btn-event">Register Now</a> </div> </div> <div class="event-card"> <div class="event-date"> <span class="day">22</span> <span class="month">JUN</span> </div> <div class="event-image"> <img src="https://images.unsplash.com/photo-1552831388-6a0b3575b32a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fortnite Event"> <div class="event-badge">Special Event</div> </div> <div class="event-details"> <h3>Fortnite Duos Night</h3> <p class="event-time"><i class="far fa-clock"></i> 6:00 PM - Midnight</p> <p class="event-desc">Special duos tournament with custom rules and prizes.</p> <a href="#" class="btn-event">Register Now</a> </div> </div> <div class="event-card"> <div class="event-date"> <span class="day">30</span> <span class="month">JUN</span> </div> <div class="event-image"> <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="LAN Party"> <div class="event-badge">LAN Party</div> </div> <div class="event-details"> <h3>24-Hour LAN Party</h3> <p class="event-time"><i class="far fa-clock"></i> 12:00 PM - Next Day</p> <p class="event-desc">Multiple games, tournaments, and free food for participants.</p> <a href="#" class="btn-event">Register Now</a> </div> </div> </div> </div> </section> <!-- Food & Drinks Section --> <section class="food" id="food"> <div class="container"> <span class="section-tag">REFRESHMENTS</span> <h2 class="section-title">Food & <span>Drinks</span></h2> <p class="section-subtitle">Fuel your gaming sessions with our delicious menu</p> <div class="menu-tabs"> <div class="tab-buttons"> <button class="menu-tab-btn active" data-tab="snacks">Snacks</button> <button class="menu-tab-btn" data-tab="meals">Meals</button> <button class="menu-tab-btn" data-tab="drinks">Drinks</button> <button class="menu-tab-btn" data-tab="combos">Combos</button> </div> <div class="tab-content"> <div class="menu-grid" data-category="snacks"> <div class="menu-item"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Nachos"> </div> <div class="item-details"> <h3>Loaded Nachos</h3> <p class="item-desc">Tortilla chips with cheese, jalapeΓ±os, salsa, and sour cream</p> <p class="item-price">$5.99</p> </div> </div> <div class="menu-item"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1606755456206-b25206bfa433?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Wings"> </div> <div class="item-details"> <h3>Buffalo Wings</h3> <p class="item-desc">Crispy chicken wings with your choice of sauce</p> <p class="item-price">$7.99</p> </div> </div> <div class="menu-item"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1607013251379-e6eecfffe234?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fries"> </div> <div class="item-details"> <h3>Loaded Fries</h3> <p class="item-desc">French fries topped with cheese, bacon, and green onions</p> <p class="item-price">$4.99</p> </div> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials" id="testimonials"> <div class="container"> <span class="section-tag">WHAT GAMERS SAY</span> <h2 class="section-title">Customer <span>Testimonials</span></h2> <p class="section-subtitle">Hear from our satisfied customers</p> <div class="testimonial-slider"> <div class="swiper testimonialSwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Best gaming cafe I've been to! The PCs are top-notch, internet is blazing fast, and the atmosphere is perfect for gaming."</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Alex K."> <div> <h4>Alex K.</h4> <span>Regular Customer</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"The VR setup here is incredible. I come every weekend just for the VR experience. Staff is super friendly too!"</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah M."> <div> <h4>Sarah M.</h4> <span>VR Enthusiast</span> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial-card"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Our esports team practices here regularly. The tournament organization is professional and the equipment never disappoints."</p> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="David R."> <div> <h4>David R.</h4> <span>Esports Team Captain</span> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="contact-content"> <span class="section-tag">GET IN TOUCH</span> <h2 class="section-title">Visit <span>Us</span></h2> <p class="section-subtitle">We're here to answer your questions</p> <div class="contact-info"> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-content"> <h3>Our Location</h3> <p>123 Gaming Street<br>Downtown, City 10001</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-content"> <h3>Phone Number</h3> <p>+1 (234) 567-8900<br>24/7 Support</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="far fa-envelope"></i> </div> <div class="info-content"> <h3>Email Address</h3> <p>info@cyberzone.com<br>support@cyberzone.com</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="far fa-clock"></i> </div> <div class="info-content"> <h3>Opening Hours</h3> <p>Monday - Sunday<br>Open 24 Hours</p> </div> </div> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" placeholder="Phone Number"> </div> <div class="form-group"> <select required> <option value="">Select Subject</option> <option value="general">General Inquiry</option> <option value="booking">Booking Question</option> <option value="event">Event Inquiry</option> <option value="feedback">Feedback</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea placeholder="Your Message" rows="5" required></textarea> </div> <button type="submit" class="btn-primary">Send Message</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-top"> <div class="footer-about"> <a href="#" class="logo">CYBER<span>ZONE</span></a> <p>Premium gaming and internet cafe with the best equipment and atmosphere for gamers.</p> <div class="footer-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-discord"></i></a> </div> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#gaming">Gaming Setup</a></li> <li><a href="#events">Events</a></li> <li><a href="#food">Food Menu</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-links"> <h3>Services</h3> <ul> <li><a href="#">Gaming PCs</a></li> <li><a href="#">VR Experience</a></li> <li><a href="#">Internet Access</a></li> <li><a href="#">Printing Services</a></li> <li><a href="#">Private Rooms</a></li> <li><a href="#">Tournaments</a></li> <li><a href="#">Snack Bar</a></li> </ul> </div> <div class="footer-newsletter"> <h3>Newsletter</h3> <p>Subscribe to get updates on events and special offers.</p> <form> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 CyberZone. All Rights Reserved.</p> <div class="footer-legal"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">FAQ</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #6c5ce7; --secondary-color: #a29bfe; --accent-color: #fd79a8; --dark-color: #2d3436; --light-color: #f5f6fa; --text-color: #333; --text-light: #777; --white: #fff; --black: #000; --transition: all 0.3s ease; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --box-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.2); --border-radius: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 62.5%; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); background-color: var(--white); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .btn { display: inline-block; padding: 1.2rem 2.4rem; border-radius: var(--border-radius); font-weight: 600; font-size: 1.6rem; text-align: center; transition: var(--transition); cursor: pointer; border: none; } .btn-primary { background-color: var(--primary-color); color: var(--white); border: 2px solid var(--primary-color); } .btn-primary:hover { background-color: transparent; color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn-secondary:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn-nav { padding: 0.8rem 1.6rem; font-size: 1.4rem; background-color: var(--primary-color); color: var(--white); border-radius: 30px; transition: var(--transition); } .btn-nav:hover { background-color: var(--accent-color); transform: translateY(-3px); box-shadow: var(--box-shadow); } .section-tag { display: block; font-size: 1.4rem; color: var(--accent-color); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; text-align: center; } .section-title { font-size: 3.6rem; margin-bottom: 1.5rem; text-align: center; position: relative; } .section-title span { color: var(--primary-color); position: relative; } .section-title span::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: rgba(108, 92, 231, 0.2); z-index: -1; } .section-subtitle { font-size: 1.6rem; color: var(--text-light); text-align: center; margin-bottom: 5rem; max-width: 700px; margin-left: auto; margin-right: auto; } /* Preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-color); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .loading-animation { display: flex; gap: 1rem; margin-bottom: 2rem; } .loading-bar { width: 10px; height: 40px; background-color: var(--primary-color); animation: loadingBounce 1s infinite ease-in-out; } .loading-bar:nth-child(1) { animation-delay: 0s; } .loading-bar:nth-child(2) { animation-delay: 0.1s; } .loading-bar:nth-child(3) { animation-delay: 0.2s; } .loading-bar:nth-child(4) { animation-delay: 0.3s; } .preloader p { font-size: 2.4rem; font-weight: 700; color: var(--white); letter-spacing: 2px; animation: fadeInOut 2s infinite; } @keyframes loadingBounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } } @keyframes fadeInOut { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 0; z-index: 1000; transition: all 0.3s ease; background-color: rgba(45, 52, 54, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 2.4rem; font-weight: 700; color: var(--white); letter-spacing: 1px; } .logo span { color: var(--primary-color); } .nav-links { display: flex; gap: 3rem; } .nav-links a { font-size: 1.6rem; font-weight: 500; color: var(--white); transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 2rem; } .hamburger { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 20px; cursor: pointer; z-index: 1001; } .hamburger span { display: block; width: 100%; height: 3px; background-color: var(--white); transition: all 0.3s ease; } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Hero Section */ .hero { padding: 15rem 0 10rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(45, 52, 54, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); color: var(--white); } .hero .container { display: flex; align-items: center; justify-content: space-between; gap: 5rem; } .hero-content { flex: 1; max-width: 600px; } .hero-title { font-size: 5.5rem; margin-bottom: 2rem; line-height: 1.1; text-align: left; } .hero-title span { color: var(--primary-color); position: relative; } .hero-title span::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: rgba(108, 92, 231, 0.3); z-index: -1; } .hero-subtitle { font-size: 1.8rem; margin-bottom: 3rem; color: rgba(255, 255, 255, 0.8); text-align: left; } .hero-buttons { display: flex; gap: 2rem; margin-bottom: 4rem; } .hero-stats { display: flex; gap: 3rem; } .stat-item { text-align: center; } .stat-item h3 { font-size: 3rem; color: var(--primary-color); margin-bottom: 0.5rem; } .stat-item p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); } .hero-image { flex: 1; position: relative; z-index: 1; } .hero-image img { width: 100%; max-width: 600px; border-radius: var(--border-radius); box-shadow: var(--box-shadow-dark); animation: floating 3s infinite ease-in-out; } .scroll-down { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; } .mouse { width: 25px; height: 40px; border: 2px solid var(--white); border-radius: 20px; position: relative; margin-bottom: 5px; } .mouse::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background-color: var(--white); border-radius: 2px; animation: scrollDown 2s infinite; } .arrow { width: 15px; height: 15px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(45deg); animation: arrowBounce 2s infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes scrollDown { 0% { opacity: 1; transform: translateY(0) translateX(-50%); } 100% { opacity: 0; transform: translateY(15px) translateX(-50%); } } @keyframes arrowBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(-10px) rotate(45deg); } 60% { transform: translateY(-5px) rotate(45deg); } } /* Partners Section */ .partners { padding: 5rem 0; background-color: var(--light-color); } .partners h2 { font-size: 1.6rem; text-align: center; margin-bottom: 3rem; color: var(--text-light); letter-spacing: 2px; text-transform: uppercase; } .scroller-container { overflow: hidden; position: relative; } .scroller { display: flex; width: max-content; animation: scroll 20s linear infinite; } .scroller-inner { display: flex; gap: 5rem; padding: 0 2rem; } .scroller img { height: 40px; filter: grayscale(100%); opacity: 0.7; transition: var(--transition); } .scroller img:hover { filter: grayscale(0); opacity: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Services Section */ .services { padding: 8rem 0; background-color: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .service-card { background-color: var(--white); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); position: relative; overflow: hidden; z-index: 1; } .service-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .service-icon { width: 70px; height: 70px; background-color: rgba(108, 92, 231, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--primary-color); margin-bottom: 2rem; transition: var(--transition); } .service-card:hover .service-icon { background-color: var(--primary-color); color: var(--white); } .service-card h3 { font-size: 2rem; margin-bottom: 1.5rem; } .service-card p { font-size: 1.4rem; color: var(--text-light); } .service-badge { position: absolute; top: 2rem; right: -3rem; background-color: var(--accent-color); color: var(--white); padding: 0.5rem 3rem; font-size: 1.2rem; font-weight: 600; transform: rotate(45deg); } /* Pricing Section */ .pricing { padding: 8rem 0; background-color: var(--light-color); } .pricing-tabs { margin-top: 5rem; } .tab-buttons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; } .tab-btn { padding: 1rem 2rem; background-color: var(--white); border: none; border-radius: 30px; font-size: 1.4rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: var(--transition); } .tab-btn.active, .tab-btn:hover { background-color: var(--primary-color); color: var(--white); } .tab-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .pricing-card { background-color: var(--white); padding: 3rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); text-align: center; position: relative; } .pricing-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .pricing-card.featured { border: 2px solid var(--primary-color); } .featured-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--white); padding: 0.5rem 2rem; border-radius: 30px; font-size: 1.2rem; font-weight: 600; } .pricing-card h3 { font-size: 2rem; margin-bottom: 2rem; } .price { margin-bottom: 2rem; } .price .currency { font-size: 2rem; vertical-align: top; color: var(--primary-color); } .price .amount { font-size: 4rem; font-weight: 700; color: var(--primary-color); } .price .period { font-size: 1.4rem; color: var(--text-light); } .features { margin-bottom: 3rem; text-align: left; } .features li { font-size: 1.4rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .features i.fa-check { color: #00b894; } .features i.fa-times { color: #d63031; } /* Gaming Setup Section */ .gaming { padding: 8rem 0; background-color: var(--white); } .gamingSwiper { padding: 3rem 1rem; margin-top: 5rem; } .swiper-slide { padding: 1rem; } .setup-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); height: 100%; } .setup-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .setup-image { height: 250px; overflow: hidden; } .setup-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .setup-card:hover .setup-image img { transform: scale(1.05); } .setup-details { padding: 2rem; text-align: center; } .setup-details h3 { font-size: 2rem; margin-bottom: 1.5rem; } .specs { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } .specs li { font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .specs i { color: var(--primary-color); } .swiper-button-next, .swiper-button-prev { color: var(--primary-color) !important; background-color: rgba(255, 255, 255, 0.8); width: 50px !important; height: 50px !important; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .swiper-button-next::after, .swiper-button-prev::after { font-size: 1.8rem !important; font-weight: 700; } .swiper-button-next:hover, .swiper-button-prev:hover { background-color: var(--primary-color); color: var(--white) !important; } .swiper-pagination-bullet { background-color: var(--text-light) !important; opacity: 0.5 !important; } .swiper-pagination-bullet-active { background-color: var(--primary-color) !important; opacity: 1 !important; } /* Events Section */ .events { padding: 8rem 0; background-color: var(--light-color); } .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 5rem; } .event-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); display: flex; flex-direction: column; } .event-card:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .event-date { position: absolute; top: 2rem; left: 2rem; background-color: var(--primary-color); color: var(--white); padding: 1rem; border-radius: var(--border-radius); text-align: center; z-index: 2; } .event-date .day { font-size: 2rem; font-weight: 700; line-height: 1; display: block; } .event-date .month { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; } .event-image { height: 200px; position: relative; overflow: hidden; } .event-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .event-card:hover .event-image img { transform: scale(1.05); } .event-badge { position: absolute; top: 2rem; right: 2rem; background-color: var(--accent-color); color: var(--white); padding: 0.5rem 1.5rem; font-size: 1.2rem; font-weight: 600; border-radius: 30px; z-index: 2; } .event-details { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; } .event-details h3 { font-size: 2rem; margin-bottom: 1rem; } .event-time { font-size: 1.4rem; color: var(--primary-color); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .event-desc { font-size: 1.4rem; color: var(--text-light); margin-bottom: 2rem; flex-grow: 1; } .btn-event { display: inline-block; padding: 0.8rem 2rem; background-color: var(--primary-color); color: var(--white); border-radius: 30px; font-size: 1.4rem; font-weight: 600; transition: var(--transition); } .btn-event:hover { background-color: var(--accent-color); transform: translateY(-3px); } /* Food & Drinks Section */ .food { padding: 8rem 0; background-color: var(--white); } .menu-tabs { margin-top: 5rem; } .menu-tab-buttons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .menu-tab-btn { padding: 1rem 2rem; background-color: var(--light-color); border: none; border-radius: 30px; font-size: 1.4rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: var(--transition); } .menu-tab-btn.active, .menu-tab-btn:hover { background-color: var(--primary-color); color: var(--white); } .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .menu-item { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); display: flex; flex-direction: column; } .menu-item:hover { transform: translateY(-10px); box-shadow: var(--box-shadow-dark); } .item-image { height: 200px; overflow: hidden; } .item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .menu-item:hover .item-image img { transform: scale(1.05); } .item-details { padding: 2rem; } .item-details h3 { font-size: 2rem; margin-bottom: 0.5rem; } .item-desc { font-size: 1.4rem; color: var(--text-light); margin-bottom: 1rem; } .item-price { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); } /* Testimonials Section */ .testimonials { padding: 8rem 0; background-color: var(--light-color); } .testimonial-slider { margin-top: 5rem; } .testimonialSwiper { padding: 3rem; } .testimonial-card { background-color: var(--white); border-radius: var(--border-radius); padding: 3rem; box-shadow: var(--box-shadow); transition: var(--transition); height: 100%; } .testimonial-content { position: relative; margin-bottom: 2rem; } .quote-icon { font-size: 4rem; color: rgba(108, 92, 231, 0.1); margin-bottom: 1rem; } .testimonial-content p { font-size: 1.6rem; font-style: italic; color: var(--text-color); margin-bottom: 1.5rem; } .rating { color: #f1c40f; font-size: 1.4rem; } .testimonial-author { display: flex; align-items: center; gap: 1.5rem; } .testimonial-author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .testimonial-author h4 { font-size: 1.6rem; margin-bottom: 0.3rem; } .testimonial-author span { font-size: 1.2rem; color: var(--text-light); } /* Contact Section */ .contact { padding: 8rem 0; background-color: var(--white); } .contact .container { display: flex; gap: 5rem; } .contact-content { flex: 1; } .contact-info { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } .info-item { display: flex; gap: 2rem; align-items: flex-start; } .info-icon { width: 50px; height: 50px; background-color: rgba(108, 92, 231, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary-color); flex-shrink: 0; } .info-content h3 { font-size: 1.8rem; margin-bottom: 0.5rem; } .info-content p { font-size: 1.4rem; color: var(--text-light); } .contact-form { flex: 1; background-color: var(--light-color); padding: 4rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .form-group { margin-bottom: 2rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1.2rem 2rem; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 1.4rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1); } .form-group textarea { resize: vertical; } /* Footer */ .footer { padding: 8rem 0 0; background-color: var(--dark-color); color: var(--white); } .footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4rem; margin-bottom: 5rem; } .footer-about .logo { color: var(--white); margin-bottom: 2rem; display: block; } .footer-about p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .footer-social { display: flex; gap: 1.5rem; } .footer-social a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--primary-color); transform: translateY(-3px); } .footer-links h3, .footer-newsletter h3 { font-size: 1.8rem; margin-bottom: 2rem; position: relative; } .footer-links h3::after, .footer-newsletter h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background-color: var(--primary-color); } .footer-links ul li { margin-bottom: 1rem; } .footer-links ul li a { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); transition: var(--transition); } .footer-links ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-newsletter p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .footer-newsletter form { display: flex; } .footer-newsletter input { flex: 1; padding: 1rem 1.5rem; border: none; border-radius: 30px 0 0 30px; font-size: 1.4rem; } .footer-newsletter button { width: 50px; background-color: var(--primary-color); color: var(--white); border: none; border-radius: 0 30px 30px 0; cursor: pointer; transition: var(--transition); } .footer-newsletter button:hover { background-color: var(--accent-color); } .footer-bottom { padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); } .footer-legal { display: flex; gap: 2rem; } .footer-legal a { font-size: 1.2rem; color: rgba(255, 255, 255, 0.5); transition: var(--transition); } .footer-legal a:hover { color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 1200px) { .hero-title { font-size: 4.8rem; } } @media (max-width: 992px) { .hero .container, .contact .container { flex-direction: column; } .hero-content, .contact-content { max-width: 100%; margin-bottom: 5rem; text-align: center; } .hero-title, .hero-subtitle { text-align: center; } .hero-buttons { justify-content: center; } .hero-stats { justify-content: center; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; background-color: var(--dark-color); flex-direction: column; align-items: center; justify-content: center; gap: 3rem; transition: var(--transition); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.active { right: 0; } .hamburger { display: flex; } .section-title { font-size: 3rem; } .hero-title { font-size: 4rem; } .tab-buttons, .menu-tab-buttons { flex-wrap: wrap; } } @media (max-width: 576px) { .hero-title { font-size: 3.2rem; } .hero-buttons { flex-direction: column; gap: 1.5rem; } .btn { width: 100%; } .hero-stats { flex-direction: column; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; } .footer-legal { flex-wrap: wrap; justify-content: center; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Preloader const preloader = document.querySelector('.preloader'); window.addEventListener('load', function() { setTimeout(function() { preloader.style.opacity = '0'; setTimeout(function() { preloader.style.display = 'none'; }, 500); }, 1000); }); // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Initialize Swipers const teamSwiper = new Swiper('.gamingSwiper', { slidesPerView: 1, spaceBetween: 20, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 768: { slidesPerView: 2, }, 992: { slidesPerView: 3, } } }); const testimonialSwiper = new Swiper('.testimonialSwiper', { slidesPerView: 1, spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, }, }); // Pricing Tabs const pricingTabs = document.querySelectorAll('.tab-btn'); const pricingCards = document.querySelectorAll('.pricing-card'); pricingTabs.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs pricingTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); const filter = this.dataset.tab; pricingCards.forEach(card => { card.style.display = 'block'; if (filter !== 'hourly' && !card.classList.contains('featured')) { card.style.display = 'none'; } }); }); }); // Menu Tabs const menuTabs = document.querySelectorAll('.menu-tab-btn'); const menuGrids = document.querySelectorAll('.menu-grid'); menuTabs.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs menuTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); const filter = this.dataset.tab; menuGrids.forEach(grid => { if (grid.dataset.category === filter) { grid.style.display = 'grid'; } else { grid.style.display = 'none'; } }); }); }); // GSAP Animations gsap.registerPlugin(ScrollTrigger); // Hero section animation gsap.from('.hero-title, .hero-subtitle', { duration: 1, y: 50, opacity: 0, stagger: 0.3, ease: 'power3.out' }); gsap.from('.hero-buttons', { duration: 1, y: 50, opacity: 0, delay: 0.6, ease: 'power3.out' }); gsap.from('.hero-image', { duration: 1, x: 100, opacity: 0, delay: 0.3, ease: 'power3.out' }); gsap.from('.hero-stats', { duration: 1, y: 50, opacity: 0, delay: 0.9, ease: 'power3.out' }); // Section animations gsap.utils.toArray('section').forEach(section => { const sectionId = section.getAttribute('id'); if (sectionId) { gsap.from(`#${sectionId} .section-tag, #${sectionId} .section-title, #${sectionId} .section-subtitle`, { scrollTrigger: { trigger: section, start: 'top 80%', }, y: 50, opacity: 0, duration: 0.8, stagger: 0.2, ease: 'power3.out' }); } }); // Services animation gsap.from('.service-card', { scrollTrigger: { trigger: '.services', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, stagger: 0.1, ease: 'power3.out' }); // Pricing animation gsap.from('.pricing-tabs', { scrollTrigger: { trigger: '.pricing', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Gaming setup animation gsap.from('.gamingSwiper', { scrollTrigger: { trigger: '.gaming', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Events animation gsap.from('.event-card', { scrollTrigger: { trigger: '.events', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, stagger: 0.2, ease: 'power3.out' }); // Food menu animation gsap.from('.menu-tabs', { scrollTrigger: { trigger: '.food', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); gsap.from('.menu-item', { scrollTrigger: { trigger: '.food', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, stagger: 0.1, ease: 'power3.out' }); // Testimonials animation gsap.from('.testimonial-slider', { scrollTrigger: { trigger: '.testimonials', start: 'top 70%', }, y: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Contact animation gsap.from('.contact-content', { scrollTrigger: { trigger: '.contact', start: 'top 70%', }, x: -100, opacity: 0, duration: 0.8, ease: 'power3.out' }); gsap.from('.contact-form', { scrollTrigger: { trigger: '.contact', start: 'top 70%', }, x: 100, opacity: 0, duration: 0.8, ease: 'power3.out' }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); });
Output Preview
Desktop
Mobile
Fullscreen