Premium Library Study 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 - Premium Library Study Center</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg fixed-top"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fas fa-book-open"></i>StudyHub </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <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="#rooms">Study Rooms</a></li> <li class="nav-item"><a class="nav-link" href="#services">Services</a></li> <li class="nav-item"><a class="nav-link" href="#membership">Membership</a></li> <li class="nav-item"><a class="nav-link" href="#booking">Book Now</a></li> <li class="nav-item"><a class="nav-link" href="#about">About</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-8 hero-content"> <h1 class="hero-title">Your Perfect Study Environment Awaits</h1> <p class="hero-subtitle">Experience premium study spaces designed for academic excellence. From quiet individual pods to collaborative group rooms, we provide the ideal environment for your learning journey.</p> <div class="hero-buttons"> <button class="btn btn-hero">Book Study Room</button> <button class="btn btn-outline-hero">Take Virtual Tour</button> </div> </div> </div> </div> </section> <!-- Study Rooms Section --> <section id="rooms" class="section-padding"> <div class="container"> <div class="row text-center mb-5"> <div class="col-lg-8 mx-auto animate-on-scroll"> <h2 class="section-title">Study Rooms & Spaces</h2> <p class="section-subtitle">Choose from our variety of study environments designed to maximize your productivity and learning potential</p> </div> </div> <div class="row g-4"> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-available">Available</div> <img src="https://images.unsplash.com/photo-1568667256549-094345857637?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Individual Study Pod" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-user"></i> Individual Pod </div> <h3 class="room-title">Private Study Pod</h3> <ul class="room-features"> <li><i class="fas fa-wifi"></i> High-Speed WiFi</li> <li><i class="fas fa-plug"></i> Power Outlets</li> <li><i class="fas fa-lightbulb"></i> Adjustable Lighting</li> <li><i class="fas fa-volume-mute"></i> Soundproof Design</li> <li><i class="fas fa-coffee"></i> Coffee Station Access</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">$8/hour</span> <button class="btn btn-hero btn-sm">Book Now</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-occupied">Occupied</div> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Group Study Room" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-users"></i> 4-6 People </div> <h3 class="room-title">Collaborative Study Room</h3> <ul class="room-features"> <li><i class="fas fa-tv"></i> 55" Smart Display</li> <li><i class="fas fa-marker"></i> Whiteboard Wall</li> <li><i class="fas fa-wifi"></i> Premium WiFi</li> <li><i class="fas fa-chair"></i> Ergonomic Seating</li> <li><i class="fas fa-microphone"></i> Audio System</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">$25/hour</span> <button class="btn btn-secondary btn-sm" disabled>Occupied</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-available">Available</div> <img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Silent Study Zone" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-volume-off"></i> Silent Zone </div> <h3 class="room-title">Silent Study Hall</h3> <ul class="room-features"> <li><i class="fas fa-volume-mute"></i> Complete Silence</li> <li><i class="fas fa-book"></i> Reference Library</li> <li><i class="fas fa-plug"></i> Individual Power</li> <li><i class="fas fa-lamp"></i> Reading Lamps</li> <li><i class="fas fa-lock"></i> Secure Lockers</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">$5/hour</span> <button class="btn btn-hero btn-sm">Book Now</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-reserved">Reserved</div> <img src="https://plus.unsplash.com/premium_photo-1681488394409-5614ef55488c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D" alt="Meeting Room" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-users"></i> 8-12 People </div> <h3 class="room-title">Executive Meeting Room</h3> <ul class="room-features"> <li><i class="fas fa-video"></i> Video Conferencing</li> <li><i class="fas fa-projector"></i> 4K Projector</li> <li><i class="fas fa-coffee"></i> Refreshment Station</li> <li><i class="fas fa-phone"></i> Conference Phone</li> <li><i class="fas fa-clipboard"></i> Presentation Tools</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">$45/hour</span> <button class="btn btn-warning btn-sm" disabled>Reserved</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-available">Available</div> <img src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Computer Lab" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-desktop"></i> 20 Workstations </div> <h3 class="room-title">Computer Lab</h3> <ul class="room-features"> <li><i class="fas fa-desktop"></i> High-End PCs</li> <li><i class="fas fa-code"></i> Development Software</li> <li><i class="fas fa-print"></i> Printing Services</li> <li><i class="fas fa-scanner"></i> Scanning Available</li> <li><i class="fas fa-headphones"></i> Audio Equipment</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">$12/hour</span> <button class="btn btn-hero btn-sm">Book Now</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="room-card"> <div class="room-status status-available">Available</div> <img src="https://images.unsplash.com/photo-1494809610410-160faaed4de0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGxpYnJhcnl8ZW58MHx8MHx8fDA%3D" alt="Reading Lounge" class="room-image" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> <div class="room-content"> <div class="room-capacity"> <i class="fas fa-couch"></i> Lounge Area </div> <h3 class="room-title">Reading Lounge</h3> <ul class="room-features"> <li><i class="fas fa-couch"></i> Comfortable Seating</li> <li><i class="fas fa-book-open"></i> Magazine Collection</li> <li><i class="fas fa-coffee"></i> Café Corner</li> <li><i class="fas fa-leaf"></i> Natural Lighting</li> <li><i class="fas fa-music"></i> Ambient Music</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-primary">Free Access</span> <button class="btn btn-hero btn-sm">Enter Now</button> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="section-padding" style="background: #f8fafc;"> <div class="container"> <div class="row text-center mb-5"> <div class="col-lg-8 mx-auto animate-on-scroll"> <h2 class="section-title">Premium Services</h2> <p class="section-subtitle">Comprehensive facilities and services designed to support your academic and professional success</p> </div> </div> <div class="row g-4"> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-wifi"></i> </div> <h4 class="mb-3">High-Speed Internet</h4> <p>Lightning-fast fiber optic internet with dedicated bandwidth for seamless online research, video calls, and cloud access.</p> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-print"></i> </div> <h4 class="mb-3">Printing & Scanning</h4> <p>Professional printing, copying, and scanning services with color and black & white options available 24/7.</p> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-coffee"></i> </div> <h4 class="mb-3">Café & Refreshments</h4> <p>Premium coffee, healthy snacks, and refreshments to keep you energized throughout your study sessions.</p> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-lock"></i> </div> <h4 class="mb-3">Secure Storage</h4> <p>Personal lockers and secure storage solutions for your belongings, books, and electronic devices.</p> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-chalkboard-teacher"></i> </div> <h4 class="mb-3">Tutoring Services</h4> <p>Expert tutors available for various subjects, exam preparation, and academic consultation services.</p> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h4 class="mb-3">24/7 Support</h4> <p>Round-the-clock technical support and assistance to ensure your study experience is always smooth.</p> </div> </div> </div> </div> </section> <!-- Membership Plans --> <section id="membership" class="section-padding"> <div class="container"> <div class="row text-center mb-5"> <div class="col-lg-8 mx-auto animate-on-scroll"> <h2 class="section-title">Membership Plans</h2> <p class="section-subtitle">Choose the perfect plan that fits your study needs and budget</p> </div> </div> <div class="row g-4 justify-content-center"> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="plan-card"> <div class="plan-icon"> <i class="fas fa-user"></i> </div> <h3 class="plan-title">Basic</h3> <div class="plan-price"> $29 <small>/month</small> </div> <ul class="plan-features"> <li><i class="fas fa-check"></i> 20 hours/month access</li> <li><i class="fas fa-check"></i> Individual study pods</li> <li><i class="fas fa-check"></i> WiFi access</li> <li><i class="fas fa-check"></i> Basic printing (50 pages)</li> <li><i class="fas fa-check"></i> Locker rental</li> </ul> <button class="btn btn-hero w-100">Choose Basic</button> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="plan-card featured"> <div class="plan-badge">Most Popular</div> <div class="plan-icon"> <i class="fas fa-star"></i> </div> <h3 class="plan-title">Premium</h3> <div class="plan-price"> $59 <small>/month</small> </div> <ul class="plan-features"> <li><i class="fas fa-check"></i> Unlimited access</li> <li><i class="fas fa-check"></i> All room types</li> <li><i class="fas fa-check"></i> Priority booking</li> <li><i class="fas fa-check"></i> Unlimited printing</li> <li><i class="fas fa-check"></i> Free refreshments</li> <li><i class="fas fa-check"></i> Tutoring discounts</li> </ul> <button class="btn btn-hero w-100">Choose Premium</button> </div> </div> <div class="col-lg-4 col-md-6 animate-on-scroll"> <div class="plan-card"> <div class="plan-icon"> <i class="fas fa-users"></i> </div> <h3 class="plan-title">Student</h3> <div class="plan-price"> $19 <small>/month</small> </div> <ul class="plan-features"> <li><i class="fas fa-check"></i> 15 hours/month access</li> <li><i class="fas fa-check"></i> Study pods & silent zone</li> <li><i class="fas fa-check"></i> Student WiFi</li> <li><i class="fas fa-check"></i> Basic printing (25 pages)</li> <li><i class="fas fa-check"></i> Study group discounts</li> </ul> <button class="btn btn-hero w-100">Choose Student</button> </div> </div> </div> </div> </section> <!-- Booking Section --> <section id="booking" class="section-padding" style="background: #f8fafc;"> <div class="container"> <div class="row text-center mb-5"> <div class="col-lg-8 mx-auto animate-on-scroll"> <h2 class="section-title">Book Your Study Space</h2> <p class="section-subtitle">Select your preferred date, time, and room to secure your perfect study environment</p> </div> </div> <div class="row"> <div class="col-lg-6 animate-on-scroll"> <div class="calendar-widget"> <div class="calendar-header"> <button class="calendar-nav"> <i class="fas fa-chevron-left"></i> </button> <h4 class="mb-0">December 2024</h4> <button class="calendar-nav"> <i class="fas fa-chevron-right"></i> </button> </div> <div class="calendar-grid"> <div class="calendar-day">S</div> <div class="calendar-day">M</div> <div class="calendar-day">T</div> <div class="calendar-day">W</div> <div class="calendar-day">T</div> <div class="calendar-day">F</div> <div class="calendar-day">S</div> <div class="calendar-day">1</div> <div class="calendar-day">2</div> <div class="calendar-day">3</div> <div class="calendar-day">4</div> <div class="calendar-day">5</div> <div class="calendar-day">6</div> <div class="calendar-day">7</div> <div class="calendar-day">8</div> <div class="calendar-day">9</div> <div class="calendar-day">10</div> <div class="calendar-day">11</div> <div class="calendar-day">12</div> <div class="calendar-day">13</div> <div class="calendar-day">14</div> <div class="calendar-day selected">15</div> <div class="calendar-day">16</div> <div class="calendar-day">17</div> <div class="calendar-day">18</div> <div class="calendar-day">19</div> <div class="calendar-day">20</div> <div class="calendar-day">21</div> <div class="calendar-day">22</div> <div class="calendar-day unavailable">23</div> <div class="calendar-day unavailable">24</div> <div class="calendar-day unavailable">25</div> <div class="calendar-day">26</div> <div class="calendar-day">27</div> <div class="calendar-day">28</div> <div class="calendar-day">29</div> <div class="calendar-day">30</div> <div class="calendar-day">31</div> </div> </div> <div class="calendar-widget"> <h5 class="mb-3">Available Time Slots</h5> <div class="time-slots"> <div class="time-slot">9:00 AM</div> <div class="time-slot">10:00 AM</div> <div class="time-slot unavailable">11:00 AM</div> <div class="time-slot">12:00 PM</div> <div class="time-slot selected">1:00 PM</div> <div class="time-slot">2:00 PM</div> <div class="time-slot">3:00 PM</div> <div class="time-slot unavailable">4:00 PM</div> <div class="time-slot">5:00 PM</div> <div class="time-slot">6:00 PM</div> <div class="time-slot">7:00 PM</div> <div class="time-slot">8:00 PM</div> </div> </div> </div> <div class="col-lg-6 animate-on-scroll"> <div class="calendar-widget"> <h5 class="mb-3">Booking Details</h5> <form class="booking-form"> <div class="mb-3"> <label class="form-label">Room Type</label> <select class="form-control"> <option>Individual Study Pod</option> <option>Group Study Room</option> <option>Silent Zone</option> <option>Meeting Room</option> <option>Computer Lab</option> </select> </div> <div class="mb-3"> <label class="form-label">Duration</label> <select class="form-control"> <option>1 Hour - $8</option> <option>2 Hours - $15</option> <option>4 Hours - $28</option> <option>Full Day - $50</option> </select> </div> <div class="mb-3"> <label class="form-label">Number of People</label> <select class="form-control"> <option>1 Person</option> <option>2-3 People</option> <option>4-6 People</option> <option>7+ People</option> </select> </div> <div class="mb-3"> <label class="form-label">Special Requirements</label> <textarea class="form-control" rows="3" placeholder="Any special equipment or setup needed..."></textarea> </div> <div class="booking-summary p-3 mb-3" style="background: #f8fafc; border-radius: 15px;"> <h6>Booking Summary</h6> <div class="d-flex justify-content-between"> <span>Date:</span> <span>December 15, 2024</span> </div> <div class="d-flex justify-content-between"> <span>Time:</span> <span>1:00 PM - 2:00 PM</span> </div> <div class="d-flex justify-content-between"> <span>Room:</span> <span>Individual Study Pod</span> </div> <hr> <div class="d-flex justify-content-between fw-bold"> <span>Total:</span> <span>$8.00</span> </div> </div> <button type="submit" class="btn btn-hero w-100 btn-lg"> <i class="fas fa-calendar-check me-2"></i>Confirm Booking </button> </form> </div> </div> </div> </div> </section> <!-- Stats Section --> <section class="stats-section section-padding"> <div class="container"> <div class="row text-center"> <div class="col-lg-3 col-md-6 mb-4 animate-on-scroll"> <div class="stat-item"> <span class="stat-number">5000+</span> <span class="stat-label">Happy Students</span> </div> </div> <div class="col-lg-3 col-md-6 mb-4 animate-on-scroll"> <div class="stat-item"> <span class="stat-number">50+</span> <span class="stat-label">Study Rooms</span> </div> </div> <div class="col-lg-3 col-md-6 mb-4 animate-on-scroll"> <div class="stat-item"> <span class="stat-number">24/7</span> <span class="stat-label">Access Available</span> </div> </div> <div class="col-lg-3 col-md-6 mb-4 animate-on-scroll"> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">Satisfaction Rate</span> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="section-padding" style="background: #f8fafc;"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 animate-on-scroll"> <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="About StudyHub" class="img-fluid rounded-4 shadow-lg float-animation" onerror="this.src=''; this.alt='Image failed to load'; this.style.display='none';"> </div> <div class="col-lg-6 animate-on-scroll"> <h2 class="section-title text-start">About StudyHub</h2> <p class="mb-4">StudyHub is more than just a library - we're a comprehensive learning ecosystem designed to maximize your academic potential. Since 2015, we've been providing students, professionals, and lifelong learners with premium study environments.</p> <p class="mb-4">Our state-of-the-art facilities combine cutting-edge technology with thoughtfully designed spaces to create the perfect atmosphere for focused learning, collaboration, and academic success.</p> <div class="row g-3 mb-4"> <div class="col-6"> <div class="d-flex align-items-center"> <i class="fas fa-award text-primary me-3 fs-4"></i> <span>Award-winning Design</span> </div> </div> <div class="col-6"> <div class="d-flex align-items-center"> <i class="fas fa-shield-alt text-primary me-3 fs-4"></i> <span>Secure Environment</span> </div> </div> <div class="col-6"> <div class="d-flex align-items-center"> <i class="fas fa-clock text-primary me-3 fs-4"></i> <span>Flexible Hours</span> </div> </div> <div class="col-6"> <div class="d-flex align-items-center"> <i class="fas fa-users text-primary me-3 fs-4"></i> <span>Community Focused</span> </div> </div> </div> <button class="btn btn-hero">Learn More About Us</button> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-6 animate-on-scroll"> <h2 class="section-title text-white text-start">Visit StudyHub Today</h2> <p class="mb-5">Ready to experience the perfect study environment? Contact us to schedule a tour or get more information about our services and membership plans.</p> <div class="contact-info"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h5 class="mb-1">Visit Our Center</h5> <p class="mb-0">123 Academic Avenue, University District, UD 12345</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div> <h5 class="mb-1">Call Us</h5> <p class="mb-0">+1 (555) 123-STUDY</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div> <h5 class="mb-1">Email Us</h5> <p class="mb-0">info@studyhub.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div> <h5 class="mb-1">Operating Hours</h5> <p class="mb-0">24/7 Access for Members<br>Mon-Sun: 6:00 AM - 12:00 AM (Day Pass)</p> </div> </div> </div> </div> <div class="col-lg-6 animate-on-scroll"> <form class="contact-form"> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Your Email" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="tel" class="form-control" placeholder="Phone Number"> </div> <div class="col-md-6"> <select class="form-control" required> <option value="">Inquiry Type</option> <option>Membership Information</option> <option>Room Booking</option> <option>Group Bookings</option> <option>Corporate Plans</option> <option>General Questions</option> </select> </div> </div> <textarea class="form-control" rows="5" placeholder="How can we help you achieve your study goals?" required></textarea> <button type="submit" class="btn btn-hero btn-lg w-100"> <i class="fas fa-paper-plane me-2"></i>Send Message </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <h4 class="mb-3"> <i class="fas fa-book-open me-2"></i>StudyHub </h4> <p class="mb-4">Empowering academic excellence through premium study environments and comprehensive learning support services.</p> <div class="social-icons"> <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-6 mb-4"> <h5 class="mb-3">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#rooms">Study Rooms</a> <a href="#services">Services</a> <a href="#membership">Membership</a> <a href="#booking">Book Now</a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="mb-3">Services</h5> <div class="footer-links"> <a href="#">Individual Pods</a> <a href="#">Group Rooms</a> <a href="#">Meeting Spaces</a> <a href="#">Computer Lab</a> <a href="#">Tutoring</a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="mb-3">Support</h5> <div class="footer-links"> <a href="#">Help Center</a> <a href="#">Booking Guide</a> <a href="#">Membership FAQ</a> <a href="#">Technical Support</a> <a href="#">Contact Us</a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="mb-3">Company</h5> <div class="footer-links"> <a href="#">About Us</a> <a href="#">Careers</a> <a href="#">Press</a> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="mb-0">© 2024 StudyHub Library Study Center. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <p class="mb-0">Designed for academic excellence ?</p> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'978171f3c40f179c',t:'MTc1NjY5NDg2OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { font-family: 'Inter', sans-serif; } :root { --primary-blue: #1e3a8a; --secondary-blue: #3b82f6; --light-blue: #dbeafe; --dark-blue: #1e293b; --accent-green: #10b981; --light-green: #d1fae5; --accent-orange: #f59e0b; --light-orange: #fef3c7; --gradient-primary: linear-gradient(135deg, #1e3a8a, #3b82f6); --gradient-secondary: linear-gradient(135deg, #10b981, #34d399); --text-dark: #1f2937; --text-light: #6b7280; } body { overflow-x: hidden; line-height: 1.6; color: var(--text-dark); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } .float-animation { animation: float 6s ease-in-out infinite; } /* Navigation */ .navbar { background: rgba(30, 58, 138, 0.95) !important; backdrop-filter: blur(15px); transition: all 0.3s ease; padding: 15px 0; } .navbar-scrolled { background: rgba(30, 58, 138, 0.98) !important; padding: 10px 0; box-shadow: 0 2px 20px rgba(0,0,0,0.1); } .navbar-brand { font-weight: 800; font-size: 2rem; color: white !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 10px; color: var(--accent-green); } .navbar-nav .nav-link { color: white !important; font-weight: 500; margin: 0 15px; transition: all 0.3s ease; position: relative; } .navbar-nav .nav-link:hover { color: var(--light-green) !important; transform: translateY(-2px); } .navbar-nav .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--accent-green); transition: all 0.3s ease; transform: translateX(-50%); } .navbar-nav .nav-link:hover::after { width: 100%; } /* Hero Section */ .hero { background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.8)), url('https://images.unsplash.com/photo-1568667256549-094345857637?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bGlicmFyeXxlbnwwfHwwfHx8MA%3D%3D') center/cover; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.3) 0%, transparent 50%); } .hero-content { animation: slideInLeft 1.2s ease; z-index: 2; } .hero-title { font-size: 4rem; font-weight: 800; color: white; text-shadow: 3px 3px 6px rgba(0,0,0,0.4); margin-bottom: 20px; line-height: 1.2; } .hero-subtitle { font-size: 1.3rem; color: rgba(255,255,255,0.9); margin-bottom: 30px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .btn-hero { background: var(--gradient-secondary); color: white; border: none; padding: 15px 35px; font-weight: 600; border-radius: 50px; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3); margin: 10px; } .btn-hero:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4); color: white; } .btn-outline-hero { background: transparent; color: white; border: 2px solid white; padding: 13px 35px; font-weight: 600; border-radius: 50px; font-size: 1.1rem; transition: all 0.3s ease; margin: 10px; } .btn-outline-hero:hover { background: white; color: var(--primary-blue); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,255,255,0.3); } /* Quick Booking Widget */ .quick-booking { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; margin-top: 50px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); animation: fadeInUp 1s ease 0.5s both; } .booking-input { border: none; border-radius: 15px; padding: 15px 20px; background: #f8fafc; margin-bottom: 15px; transition: all 0.3s ease; } .booking-input:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); background: white; } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3rem; font-weight: 700; color: var(--dark-blue); margin-bottom: 20px; position: relative; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gradient-secondary); border-radius: 2px; } .section-subtitle { color: var(--text-light); font-size: 1.2rem; margin-bottom: 60px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Study Room Cards */ .room-card { background: white; border-radius: 25px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); height: 100%; position: relative; } .room-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .room-image { width: 100%; height: 280px; object-fit: cover; transition: transform 0.4s ease; } .room-card:hover .room-image { transform: scale(1.1); } .room-content { padding: 25px; } .room-status { position: absolute; top: 20px; right: 20px; padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; color: white; } .status-available { background: var(--gradient-secondary); } .status-occupied { background: linear-gradient(135deg, #ef4444, #f87171); } .status-reserved { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .room-capacity { display: flex; align-items: center; color: var(--text-light); margin-bottom: 10px; } .room-capacity i { margin-right: 8px; color: var(--accent-green); } .room-title { font-size: 1.4rem; font-weight: 600; color: var(--dark-blue); margin-bottom: 15px; } .room-features { list-style: none; padding: 0; margin-bottom: 20px; } .room-features li { padding: 3px 0; color: var(--text-light); display: flex; align-items: center; font-size: 0.9rem; } .room-features li i { color: var(--accent-green); margin-right: 8px; width: 16px; } /* Service Cards */ .service-card { background: white; border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gradient-primary); transition: all 0.4s ease; z-index: 1; } .service-card:hover::before { left: 0; } .service-card:hover { transform: translateY(-10px); color: white; } .service-card > * { position: relative; z-index: 2; } .service-icon { width: 90px; height: 90px; background: var(--light-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2.5rem; color: var(--primary-blue); transition: all 0.4s ease; } .service-card:hover .service-icon { background: rgba(255,255,255,0.2); color: white; transform: scale(1.1); } /* Membership Plans */ .plan-card { background: white; border-radius: 25px; padding: 40px 30px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.1); transition: all 0.4s ease; height: 100%; position: relative; border: 3px solid transparent; } .plan-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(0,0,0,0.15); } .plan-card.featured { border-color: var(--accent-green); transform: scale(1.05); } .plan-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gradient-secondary); color: white; padding: 8px 25px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; } .plan-icon { width: 80px; height: 80px; background: var(--light-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: var(--accent-green); } .plan-title { font-size: 1.5rem; font-weight: 600; color: var(--dark-blue); margin-bottom: 15px; } .plan-price { font-size: 3rem; font-weight: 700; color: var(--primary-blue); margin-bottom: 10px; } .plan-price small { font-size: 1rem; color: var(--text-light); font-weight: 400; } .plan-features { list-style: none; padding: 0; margin: 30px 0; text-align: left; } .plan-features li { padding: 8px 0; color: var(--text-light); display: flex; align-items: center; } .plan-features li i { color: var(--accent-green); margin-right: 10px; width: 16px; } /* Stats Section */ .stats-section { background: var(--gradient-primary); color: white; position: relative; overflow: hidden; } .stats-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity: 0.3; } .stat-item { text-align: center; position: relative; z-index: 2; } .stat-number { font-size: 3.5rem; font-weight: 800; display: block; margin-bottom: 10px; } .stat-label { font-size: 1.2rem; opacity: 0.9; font-weight: 500; } /* Booking Calendar */ .calendar-widget { background: white; border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); margin-bottom: 30px; } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .calendar-nav { background: var(--light-blue); border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-blue); transition: all 0.3s ease; } .calendar-nav:hover { background: var(--primary-blue); color: white; transform: scale(1.1); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .calendar-day { aspect-ratio: 1; border: none; background: #f8fafc; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 500; transition: all 0.3s ease; cursor: pointer; } .calendar-day:hover { background: var(--light-green); color: var(--accent-green); } .calendar-day.selected { background: var(--accent-green); color: white; } .calendar-day.unavailable { background: #fee2e2; color: #dc2626; cursor: not-allowed; } /* Time Slots */ .time-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .time-slot { padding: 12px 20px; border: 2px solid var(--light-blue); border-radius: 15px; background: white; text-align: center; font-weight: 500; color: var(--primary-blue); cursor: pointer; transition: all 0.3s ease; } .time-slot:hover { border-color: var(--accent-green); background: var(--light-green); color: var(--accent-green); } .time-slot.selected { background: var(--accent-green); border-color: var(--accent-green); color: white; } .time-slot.unavailable { border-color: #fee2e2; background: #fee2e2; color: #dc2626; cursor: not-allowed; } /* Contact Section */ .contact-section { background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue)); color: white; position: relative; } .contact-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; opacity: 0.1; } .contact-form { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px; position: relative; z-index: 2; } .form-control { border-radius: 15px; border: none; padding: 15px 20px; margin-bottom: 20px; background: rgba(255,255,255,0.9); transition: all 0.3s ease; } .form-control:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); background: white; } .contact-info { position: relative; z-index: 2; } .contact-item { display: flex; align-items: center; margin-bottom: 25px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 15px; backdrop-filter: blur(5px); transition: all 0.3s ease; } .contact-item:hover { background: rgba(255,255,255,0.15); transform: translateX(10px); } .contact-icon { width: 60px; height: 60px; background: var(--gradient-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; font-size: 1.5rem; } /* Footer */ .footer { background: var(--dark-blue); color: white; padding: 60px 0 30px; position: relative; } .footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: all 0.3s ease; display: block; padding: 5px 0; } .footer-links a:hover { color: var(--accent-green); transform: translateX(5px); } .social-icons a { display: inline-block; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; text-align: center; line-height: 50px; margin: 0 10px; color: white; transition: all 0.3s ease; font-size: 1.2rem; } .social-icons a:hover { background: var(--accent-green); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .section-title { font-size: 2rem; } .hero { text-align: center; padding: 100px 0; } .quick-booking { margin-top: 30px; padding: 20px; } .stat-number { font-size: 2.5rem; } .navbar-nav { text-align: center; padding-top: 20px; } .navbar-nav .nav-link { margin: 5px 0; } .calendar-grid { gap: 5px; } .time-slots { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .hero-title { font-size: 2rem; } .btn-hero, .btn-outline-hero { display: block; margin: 10px 0; width: 100%; } .section-padding { padding: 60px 0; } .plan-card.featured { transform: none; } }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); } }); }, observerOptions); document.querySelectorAll('.animate-on-scroll').forEach(el => { observer.observe(el); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.classList.add('navbar-scrolled'); } else { navbar.classList.remove('navbar-scrolled'); } }); // Counter animation for stats function animateCounters() { const counters = document.querySelectorAll('.stat-number'); counters.forEach(counter => { const target = counter.textContent.includes('+') ? parseInt(counter.textContent.replace(/\D/g, '')) : counter.textContent.includes('%') ? parseInt(counter.textContent.replace('%', '')) : counter.textContent.includes('/') ? counter.textContent : parseInt(counter.textContent.replace(/\D/g, '')); if (typeof target === 'number') { const suffix = counter.textContent.replace(/[0-9]/g, ''); let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { counter.textContent = target + suffix; clearInterval(timer); } else { counter.textContent = Math.floor(current) + suffix; } }, 20); } }); } // Trigger counter animation when stats section is visible const statsSection = document.querySelector('.stats-section'); const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); statsObserver.unobserve(entry.target); } }); }); if (statsSection) { statsObserver.observe(statsSection); } // Calendar functionality document.querySelectorAll('.calendar-day').forEach(day => { if (!day.classList.contains('unavailable') && day.textContent.match(/^\d+$/)) { day.addEventListener('click', function() { document.querySelectorAll('.calendar-day.selected').forEach(selected => { selected.classList.remove('selected'); }); this.classList.add('selected'); }); } }); // Time slot selection document.querySelectorAll('.time-slot').forEach(slot => { if (!slot.classList.contains('unavailable')) { slot.addEventListener('click', function() { document.querySelectorAll('.time-slot.selected').forEach(selected => { selected.classList.remove('selected'); }); this.classList.add('selected'); }); } }); // Room booking functionality document.querySelectorAll('.room-card .btn').forEach(btn => { btn.addEventListener('click', function() { if (!this.disabled) { const roomTitle = this.closest('.room-card').querySelector('.room-title').textContent; alert(`Booking ${roomTitle}... This would redirect to the booking system!`); } }); }); // Membership plan selection document.querySelectorAll('.plan-card .btn').forEach(btn => { btn.addEventListener('click', function() { const planTitle = this.closest('.plan-card').querySelector('.plan-title').textContent; alert(`Selecting ${planTitle} plan... This would redirect to the payment system!`); }); }); // Quick booking functionality document.querySelector('.quick-booking .btn').addEventListener('click', function(e) { e.preventDefault(); const roomType = document.querySelector('.quick-booking select').value; if (roomType && roomType !== 'Select Room Type') { document.querySelector('#booking').scrollIntoView({ behavior: 'smooth' }); } else { alert('Please select a room type to search for available spaces.'); } }); // Hero buttons document.querySelectorAll('.hero .btn').forEach(btn => { btn.addEventListener('click', function() { if (this.textContent.includes('Book')) { document.querySelector('#booking').scrollIntoView({ behavior: 'smooth' }); } else if (this.textContent.includes('Tour')) { alert('Virtual tour feature coming soon! Contact us to schedule an in-person tour.'); } }); }); // Form submissions document.querySelector('.contact-form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = '<i class="fas fa-check me-2"></i>Message Sent!'; submitBtn.classList.remove('btn-hero'); submitBtn.classList.add('btn-success'); setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.classList.remove('btn-success'); submitBtn.classList.add('btn-hero'); submitBtn.disabled = false; this.reset(); }, 2000); }, 1500); }); // Booking form submission document.querySelector('.booking-form').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = '<i class="fas fa-check me-2"></i>Booking Confirmed!'; submitBtn.classList.remove('btn-hero'); submitBtn.classList.add('btn-success'); setTimeout(() => { alert('Booking confirmed! You will receive a confirmation email shortly.'); submitBtn.innerHTML = originalText; submitBtn.classList.remove('btn-success'); submitBtn.classList.add('btn-hero'); submitBtn.disabled = false; }, 2000); }, 2000); }); // Calendar navigation document.querySelectorAll('.calendar-nav').forEach(nav => { nav.addEventListener('click', function() { const isNext = this.querySelector('.fa-chevron-right'); const monthElement = document.querySelector('.calendar-header h4'); // This would typically update the calendar with new month data alert(isNext ? 'Loading next month...' : 'Loading previous month...'); }); }); // Add parallax effect to hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const hero = document.querySelector('.hero'); if (hero) { hero.style.transform = `translateY(${scrolled * 0.5}px)`; } });
Output Preview
Desktop
Mobile
Fullscreen