Modern Library Learning Center
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>StudyHub | Modern Library & Learning Center</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- AOS CSS --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Study<span>Hub</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#facilities">Facilities</a> </li> <li class="nav-item"> <a class="nav-link" href="#resources">Resources</a> </li> <li class="nav-item"> <a class="nav-link" href="#schedule">Schedule</a> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-10" data-aos="fade-right"> <h1>Your Perfect Space for Focused Learning</h1> <p>Discover a modern, quiet environment designed to enhance your study experience and academic success.</p> <div class="hero-buttons"> <a href="#membership" class="btn btn-primary me-3">Become a Member</a> <a href="#schedule" class="btn btn-outline-light">View Schedule</a> </div> </div> </div> </div> </section> <!-- Facilities Section --> <section id="facilities" class="facilities bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Our Facilities</h2> <p>Designed for optimal learning and concentration</p> </div> <div class="row"> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100"> <div class="facility-card"> <div class="facility-img"> <img src="https://plus.unsplash.com/premium_photo-1677567996070-68fa4181775a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Quiet Study Area"> </div> <div class="facility-content"> <h3>Quiet Study Zones</h3> <p>Sound-proof areas designed for deep focus and concentration without distractions.</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Group Study Rooms"> </div> <div class="facility-content"> <h3>Group Study Rooms</h3> <p>Collaborative spaces equipped with whiteboards, monitors, and comfortable seating.</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300"> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1535905557558-afc4877a26fc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Computer Lab"> </div> <div class="facility-content"> <h3>Computer Lab</h3> <p>High-speed computers with specialized software for research and academic work.</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> </div> </div> </section> <!-- Resources Section --> <section id="resources" class="resources"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Learning Resources</h2> <p>Comprehensive tools to support your academic journey</p> </div> <div class="row"> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="resource-card"> <div class="resource-icon"> <i class="fas fa-book"></i> </div> <h4>Extensive Library</h4> <p>Over 50,000 books, journals, and reference materials across various disciplines.</p> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="resource-card"> <div class="resource-icon"> <i class="fas fa-desktop"></i> </div> <h4>Online Databases</h4> <p>Access to premium academic databases and research portals.</p> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="resource-card"> <div class="resource-icon"> <i class="fas fa-chalkboard-teacher"></i> </div> <h4>Tutoring Services</h4> <p>Expert tutors available for one-on-one and group tutoring sessions.</p> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400"> <div class="resource-card"> <div class="resource-icon"> <i class="fas fa-print"></i> </div> <h4>Print & Copy Services</h4> <p>High-quality printing, scanning, and copying facilities.</p> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>About StudyHub</h2> <p>Learn about our mission and values</p> </div> <div class="row"> <div class="col-lg-6" data-aos="fade-right"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1521587760476-6c12a4b040da?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" class="img-fluid rounded" alt="StudyHub Library"> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="about-content"> <h3>Creating the Ideal Learning Environment</h3> <p>Founded in 2010, StudyHub has been dedicated to providing students and professionals with a perfect environment for focused learning and academic achievement.</p> <p>Our center is designed to minimize distractions and maximize productivity, with carefully planned spaces that cater to different learning styles and needs.</p> <ul> <li><i class="fas fa-check-circle me-2 text-primary"></i> Expertly designed study spaces</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> Comprehensive learning resources</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> Supportive academic community</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> Affordable membership options</li> </ul> </div> </div> </div> </div> </section> <!-- Stats Section --> <section class="stats-section"> <div class="container"> <div class="row text-center"> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="100"> <div class="stat-item"> <div class="stat-number" data-count="5000">0</div> <p>Active Members</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="200"> <div class="stat-item"> <div class="stat-number" data-count="50">0</div> <p>Study Rooms</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="300"> <div class="stat-item"> <div class="stat-number" data-count="12">0</div> <p>Years Experience</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="400"> <div class="stat-item"> <div class="stat-number" data-count="98">0</div> <p>Success Rate</p> </div> </div> </div> </div> </section> <!-- Membership Section --> <section id="membership" class="membership"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Membership Plans</h2> <p>Choose the plan that works best for you</p> </div> <div class="row"> <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="membership-card"> <h3>Basic</h3> <div class="membership-price">$29<span>/month</span></div> <ul class="membership-features"> <li><i class="fas fa-check"></i> Access to quiet study areas</li> <li><i class="fas fa-check"></i> Wi-Fi connectivity</li> <li><i class="fas fa-check"></i> Basic printing (50 pages/month)</li> <li><i class="fas fa-times"></i> Group study rooms</li> <li><i class="fas fa-times"></i> Computer lab access</li> </ul> <a href="#" class="btn btn-outline-primary w-100">Get Started</a> </div> </div> <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="membership-card featured"> <h3>Standard</h3> <div class="membership-price">$49<span>/month</span></div> <ul class="membership-features"> <li><i class="fas fa-check"></i> All Basic features</li> <li><i class="fas fa-check"></i> Group study rooms (4 hrs/week)</li> <li><i class="fas fa-check"></i> Computer lab access</li> <li><i class="fas fa-check"></i> Extended printing (100 pages/month)</li> <li><i class="fas fa-times"></i> Tutoring sessions</li> </ul> <a href="#" class="btn btn-primary w-100">Get Started</a> </div> </div> <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="membership-card"> <h3>Premium</h3> <div class="membership-price">$79<span>/month</span></div> <ul class="membership-features"> <li><i class="fas fa-check"></i> All Standard features</li> <li><i class="fas fa-check"></i> Unlimited group study rooms</li> <li><i class="fas fa-check"></i> 2 tutoring sessions/month</li> <li><i class="fas fa-check"></i> Priority seating</li> <li><i class="fas fa-check"></i> Free coffee & snacks</li> </ul> <a href="#" class="btn btn-outline-primary w-100">Get Started</a> </div> </div> </div> </div> </section> <!-- Schedule Section --> <section id="schedule" class="schedule bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Opening Hours</h2> <p>Plan your study sessions</p> </div> <div class="row justify-content-center"> <div class="col-lg-8" data-aos="fade-up"> <div class="schedule-table"> <div class="d-flex justify-content-between p-3 border-bottom"> <span class="schedule-day">Monday - Friday</span> <span>7:00 AM - 11:00 PM</span> </div> <div class="d-flex justify-content-between p-3 border-bottom"> <span class="schedule-day">Saturday</span> <span>8:00 AM - 10:00 PM</span> </div> <div class="d-flex justify-content-between p-3 border-bottom"> <span class="schedule-day">Sunday</span> <span>9:00 AM - 9:00 PM</span> </div> <div class="d-flex justify-content-between p-3"> <span class="schedule-day">Holiday Hours</span> <span>10:00 AM - 6:00 PM</span> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Student Testimonials</h2> <p>What our members say about us</p> </div> <div class="row"> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Student"> </div> <div class="testimonial-content"> <h4>Michael Johnson</h4> <p class="text-primary">Graduate Student</p> <p>"StudyHub transformed my academic performance. The quiet zones helped me focus, and the resources available were invaluable for my research."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Student"> </div> <div class="testimonial-content"> <h4>Sarah Williams</h4> <p class="text-primary">Medical Student</p> <p>"The group study rooms at StudyHub are perfect for our study group. We've been able to collaborate effectively and our grades have improved significantly."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mx-auto" data-aos="fade-up" data-aos-delay="300"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Student"> </div> <div class="testimonial-content"> <h4>Robert Chen</h4> <p class="text-primary">Law Student</p> <p>"The resources and environment at StudyHub helped me pass the bar exam. I couldn't have done it without access to such a perfect study space."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star-half-alt text-warning"></i> </div> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="row"> <div class="col-lg-4 mb-5"> <h3 class="text-white mb-4">StudyHub</h3> <p>Creating optimal learning environments since 2010. We are committed to helping students achieve academic excellence through focused study spaces and comprehensive resources.</p> <div class="social-icons mt-4"> <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-linkedin-in"></i></a> </div> </div> <div class="col-lg-2 col-md-4 col-6 mb-5"> <div class="footer-links"> <h5>Quick Links</h5> <ul> <li><a href="#home">Home</a></li> <li><a href="#facilities">Facilities</a></li> <li><a href="#resources">Resources</a></li> <li><a href="#membership">Membership</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-4 col-6 mb-5"> <div class="footer-links"> <h5>Resources</h5> <ul> <li><a href="#">Study Tips</a></li> <li><a href="#">Research Databases</a></li> <li><a href="#">Tutoring Services</a></li> <li><a href="#">Event Calendar</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-4 mb-5"> <div class="footer-links"> <h5>Newsletter</h5> <p>Subscribe to our newsletter for study tips, event updates, and special offers.</p> <form class="mt-3"> <div class="input-group"> <input type="email" class="form-control" placeholder="Your Email"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> </div> <div class="text-center border-top pt-4"> <p>© 2023 StudyHub. All Rights Reserved.</p> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- AOS JS --> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <!-- GSAP --> <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> </body> </html>
CSS
:root { --primary: #1a76d2; --secondary: #0d47a1; --accent: #2196f3; --light: #e8f4fd; --dark: #0d2f5a; --neutral: #607d8b; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; color: #333; background-color: #fafafa; } /* Navigation */ .navbar { background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px 0; transition: all 0.3s ease; } .navbar-brand { font-weight: 700; color: var(--primary); font-size: 1.8rem; } .navbar-brand span { color: var(--accent); } .nav-link { color: #333; font-weight: 500; margin: 0 10px; transition: all 0.3s; } .nav-link:hover { color: var(--primary); } .navbar-toggler { border: none; } /* Hero Section */ .hero { background: linear-gradient(rgba(13, 71, 161, 0.7), rgba(13, 71, 161, 0.8)), url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; min-height: 100vh; display: flex; align-items: center; color: white; padding: 100px 0 80px; } .hero h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; } .hero p { font-size: 1.2rem; margin-bottom: 30px; } /* Buttons */ .btn-primary { background-color: var(--primary); border-color: var(--primary); padding: 12px 30px; border-radius: 8px; font-weight: 600; transition: all 0.3s; } .btn-primary:hover { background-color: var(--secondary); border-color: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .btn-outline-light { padding: 12px 30px; border-radius: 8px; font-weight: 600; transition: all 0.3s; } .btn-outline-light:hover { background-color: white; color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } /* Section Common Styles */ section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-weight: 700; color: var(--dark); position: relative; display: inline-block; margin-bottom: 15px; } .section-title h2::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--primary); } /* Facilities Section */ .facility-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; height: 100%; margin-bottom: 30px; } .facility-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .facility-img { height: 250px; overflow: hidden; position: relative; } .facility-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .facility-card:hover .facility-img img { transform: scale(1.1); } .facility-content { padding: 25px; } .facility-content h3 { color: var(--dark); margin-bottom: 15px; } /* Resources Section */ .resource-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; height: 100%; margin-bottom: 30px; text-align: center; padding: 30px 20px; } .resource-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); background: var(--light); } .resource-icon { width: 80px; height: 80px; background: var(--light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: all 0.3s; } .resource-card:hover .resource-icon { background: var(--primary); transform: scale(1.1); } .resource-icon i { font-size: 2.5rem; color: var(--primary); transition: all 0.3s; } .resource-card:hover .resource-icon i { color: white; } /* About Section */ .about-content { background-color: var(--light); border-radius: 15px; padding: 40px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } /* Membership Section */ .membership-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s; margin-bottom: 30px; text-align: center; padding: 40px 30px; border: 2px solid transparent; } .membership-card.featured { border-color: var(--primary); transform: scale(1.05); } .membership-card.featured:hover { transform: scale(1.05) translateY(-10px); } .membership-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .membership-price { font-size: 2.5rem; font-weight: 700; color: var(--primary); margin: 20px 0; } .membership-features { list-style: none; padding: 0; margin: 20px 0; } .membership-features li { margin-bottom: 12px; color: #666; } .membership-features li i { color: var(--primary); margin-right: 10px; } /* Testimonials */ .testimonial-card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin: 15px; position: relative; } .testimonial-card::before { content: '\201C'; font-size: 5rem; color: var(--light); position: absolute; top: 10px; left: 20px; font-family: Arial, sans-serif; line-height: 1; } .testimonial-img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 3px solid var(--primary); } .testimonial-img img { width: 100%; height: 100%; object-fit: cover; } /* Stats Section */ .stats-section { background: linear-gradient(rgba(13, 71, 161, 0.9), rgba(13, 71, 161, 0.9)), url('https://images.unsplash.com/photo-1521587760476-6c12a4b040da?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') fixed center/cover; color: white; } .stat-item { text-align: center; padding: 30px; } .stat-number { font-size: 3rem; font-weight: 700; margin-bottom: 10px; } /* Schedule Section */ .schedule-table { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 30px; } .schedule-day { font-weight: 600; color: var(--dark); } /* Footer */ footer { background-color: var(--dark); color: white; padding: 60px 0 30px; } .footer-links h5 { font-weight: 600; margin-bottom: 25px; position: relative; } .footer-links h5::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 40px; height: 2px; background-color: var(--accent); } .footer-links ul { list-style: none; padding: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #ccc; text-decoration: none; transition: all 0.3s; } .footer-links a:hover { color: white; padding-left: 5px; } .social-icons a { display: inline-block; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; text-align: center; line-height: 40px; color: white; margin-right: 10px; transition: all 0.3s; } .social-icons a:hover { background: var(--primary); transform: translateY(-5px); } /* Responsive Styles */ @media (max-width: 992px) { .hero h1 { font-size: 2.8rem; } .section-title h2 { font-size: 2rem; } .membership-card.featured { transform: scale(1); } } @media (max-width: 768px) { .hero h1 { font-size: 2.3rem; } .hero p { font-size: 1rem; } section { padding: 60px 0; } .stat-number { font-size: 2.5rem; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .btn-primary, .btn-outline-light { padding: 10px 20px; font-size: 0.9rem; } .section-title { margin-bottom: 40px; } .about-content, .contact-form { padding: 25px; } }
JavaScript
// Initialize AOS AOS.init({ duration: 1000, once: true, offset: 100 }); // GSAP Animations gsap.registerPlugin(ScrollTrigger); // Animate stats counter document.addEventListener('DOMContentLoaded', function() { const statElements = document.querySelectorAll('.stat-number'); const statsSection = document.querySelector('.stats-section'); // Animate navbar on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.style.padding = '10px 0'; navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; } else { navbar.style.padding = '15px 0'; navbar.style.boxShadow = 'none'; } }); // Animate stats when in view if (statsSection) { ScrollTrigger.create({ trigger: statsSection, start: 'top 80%', onEnter: () => animateStats(), once: true }); } function animateStats() { statElements.forEach(stat => { const target = parseInt(stat.getAttribute('data-count')); const duration = 2000; const step = target / (duration / 16); let current = 0; const timer = setInterval(() => { current += step; if (current >= target) { clearInterval(timer); current = target; } stat.textContent = Math.round(current); }, 16); }); } // Animate facility cards on hover const facilityCards = document.querySelectorAll('.facility-card'); facilityCards.forEach(card => { card.addEventListener('mouseenter', () => { gsap.to(card, { y: -10, duration: 0.3 }); }); card.addEventListener('mouseleave', () => { gsap.to(card, { y: 0, duration: 0.3 }); }); }); });
Output Preview
Desktop
Mobile
Fullscreen