School Template
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>Elite Academy | Premier Private School</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> </head> <body> <!-- Preloader --> <div class="preloader"> <div class="loader"> <div class="book"> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div> </div> </div> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <h1>Elite<span>Academy</span></h1> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#academics">Academics</a></li> <li><a href="#admissions">Admissions</a></li> <li><a href="#faculty">Faculty</a></li> <li><a href="#facilities">Facilities</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#events">Events</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="menu-toggle"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h2 class="animate__animated animate__fadeInUp">Excellence in Education</h2> <h1 class="animate__animated animate__fadeInUp animate__delay-1s">Shaping Future Leaders</h1> <p class="animate__animated animate__fadeInUp animate__delay-2s">A premier private school providing exceptional education from Pre-K through 12th grade.</p> <div class="hero-buttons animate__animated animate__fadeInUp animate__delay-3s"> <a href="#admissions" class="btn">Apply Now</a> <a href="#contact" class="btn btn-outline">Schedule Tour</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about section-padding"> <div class="container"> <div class="section-title"> <h2>About Our School</h2> <p>Our mission, vision, and values</p> </div> <div class="about-content"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350" alt="School Building"> </div> <div class="about-text"> <h3>Established 1995</h3> <p>Elite Academy is an independent, co-educational day school serving students from Pre-Kindergarten through Grade 12. Our school is committed to academic excellence, character development, and preparing students for success in college and beyond.</p> <p>With a student-teacher ratio of 8:1, we provide personalized attention to each student, fostering intellectual curiosity and a lifelong love of learning.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-graduation-cap"></i> <h4>100% College Acceptance</h4> </div> <div class="feature"> <i class="fas fa-trophy"></i> <h4>Championship Athletics</h4> </div> <div class="feature"> <i class="fas fa-music"></i> <h4>Arts Programs</h4> </div> </div> </div> </div> </div> </section> <!-- Academics Section --> <section id="academics" class="academics section-padding bg-light"> <div class="container"> <div class="section-title"> <h2>Academic Programs</h2> <p>Rigorous curriculum designed for success</p> </div> <div class="academics-grid"> <div class="academic-card"> <div class="academic-icon"> <i class="fas fa-school"></i> </div> <h3>Lower School</h3> <p>Pre-K to Grade 5</p> <ul> <li>Foundational literacy & numeracy</li> <li>STEM exploration</li> <li>Social-emotional learning</li> </ul> <a href="#" class="btn btn-small">Learn More</a> </div> <div class="academic-card"> <div class="academic-icon"> <i class="fas fa-book-open"></i> </div> <h3>Middle School</h3> <p>Grades 6-8</p> <ul> <li>Departmentalized instruction</li> <li>Leadership development</li> <li>Exploratory electives</li> </ul> <a href="#" class="btn btn-small">Learn More</a> </div> <div class="academic-card"> <div class="academic-icon"> <i class="fas fa-university"></i> </div> <h3>Upper School</h3> <p>Grades 9-12</p> <ul> <li>College preparatory curriculum</li> <li>25+ AP courses</li> <li>Internship opportunities</li> </ul> <a href="#" class="btn btn-small">Learn More</a> </div> </div> </div> </section> <!-- Admissions Section --> <section id="admissions" class="admissions section-padding"> <div class="container"> <div class="section-title"> <h2>Admissions Process</h2> <p>Join our community of learners</p> </div> <div class="admissions-steps"> <div class="step"> <div class="step-number">1</div> <h3>Inquiry</h3> <p>Submit an inquiry form or attend an open house to learn more about our school.</p> </div> <div class="step"> <div class="step-number">2</div> <h3>Application</h3> <p>Complete our online application and submit required documents.</p> </div> <div class="step"> <div class="step-number">3</div> <h3>Assessment</h3> <p>Students participate in age-appropriate assessments and interviews.</p> </div> <div class="step"> <div class="step-number">4</div> <h3>Decision</h3> <p>Admissions decisions are communicated within two weeks.</p> </div> </div> <div class="admissions-info"> <div class="info-card"> <h3>Tuition & Financial Aid</h3> <p>We believe in making quality education accessible. Over 30% of our students receive financial assistance.</p> <a href="#" class="btn">Financial Aid Info</a> </div> <div class="info-card"> <h3>Upcoming Open Houses</h3> <p>Join us for a campus tour and meet our faculty and students.</p> <div class="dates"> <p><strong>October 15</strong> - 10:00 AM</p> <p><strong>November 12</strong> - 1:00 PM</p> </div> <a href="#contact" class="btn">RSVP Now</a> </div> </div> </div> </section> <!-- Faculty Section --> <section id="faculty" class="faculty section-padding bg-light"> <div class="container"> <div class="section-title"> <h2>Our Distinguished Faculty</h2> <p>Dedicated educators inspiring excellence</p> </div> <div class="faculty-grid"> <div class="faculty-card"> <div class="faculty-img"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a" alt="Dr. Sarah Johnson"> <div class="social-links"> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <h3>Dr. Sarah Johnson</h3> <p>Head of School</p> <p class="bio">PhD in Educational Leadership, 20+ years experience</p> </div> <div class="faculty-card"> <div class="faculty-img"> <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e" alt="Mr. David Chen"> <div class="social-links"> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <h3>Mr. David Chen</h3> <p>STEM Department Chair</p> <p class="bio">M.S. in Physics, Former NASA Scientist</p> </div> <div class="faculty-card"> <div class="faculty-img"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2" alt="Ms. Emily Wilson"> <div class="social-links"> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <h3>Ms. Emily Wilson</h3> <p>Humanities Department Chair</p> <p class="bio">M.A. in English Literature, Published Author</p> </div> <div class="faculty-card"> <div class="faculty-img"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df" alt="Coach Michael Brown"> <div class="social-links"> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <h3>Coach Michael Brown</h3> <p>Athletic Director</p> <p class="bio">Former Professional Athlete, 15+ Years Coaching</p> </div> </div> <div class="faculty-stats"> <div class="stat"> <div class="number">85%</div> <p>Hold Advanced Degrees</p> </div> <div class="stat"> <div class="number">12</div> <p>Average Years Experience</p> </div> <div class="stat"> <div class="number">8:1</div> <p>Student-Teacher Ratio</p> </div> </div> </div> </section> <!-- Facilities Section --> <section id="facilities" class="facilities section-padding"> <div class="container"> <div class="section-title"> <h2>Our Campus Facilities</h2> <p>State-of-the-art learning environment</p> </div> <div class="facilities-grid"> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350" alt="Academic Building"> </div> <h3>Academic Buildings</h3> <p>Modern classrooms equipped with smart technology and collaborative learning spaces.</p> </div> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc" alt="Science Lab"> </div> <h3>Science & Tech Labs</h3> <p>Fully equipped laboratories for biology, chemistry, physics, and computer science.</p> </div> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24" alt="Library"> </div> <h3>Learning Commons</h3> <p>25,000-volume library with digital resources and quiet study areas.</p> </div> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f" alt="Athletic Center"> </div> <h3>Athletic Complex</h3> <p>Gymnasium, fitness center, swimming pool, and outdoor sports fields.</p> </div> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1501612780327-45045538702b" alt="Arts Center"> </div> <h3>Performing Arts Center</h3> <p>500-seat theater, music rooms, and art studios for creative expression.</p> </div> <div class="facility-card"> <div class="facility-img"> <img src="https://images.unsplash.com/photo-1519865885898-a54a6f2c7eea" alt="Dining Hall"> </div> <h3>Dining Commons</h3> <p>Healthy meal options prepared by our on-campus culinary team.</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials section-padding bg-light"> <div class="container"> <div class="section-title"> <h2>What Our Community Says</h2> <p>Hear from students, parents, and alumni</p> </div> <div class="testimonials-slider"> <div class="testimonial-card active"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="Student"> </div> <div class="client-review"> <p>"Elite Academy challenged me academically while supporting my growth as a person. The small class sizes allowed me to form meaningful relationships with my teachers who truly cared about my success."</p> <h4>Ryan Thompson</h4> <p class="role">Class of 2022, Harvard University</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> <div class="testimonial-card"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2" alt="Parent"> </div> <div class="client-review"> <p>"As parents, we couldn't be happier with the education our children are receiving. The faculty goes above and beyond to nurture each child's unique talents and interests."</p> <h4>Lisa Rodriguez</h4> <p class="role">Parent of 4th and 7th Grade Students</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> <div class="testimonial-card"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df" alt="Alumni"> </div> <div class="client-review"> <p>"The leadership opportunities I had at Elite Academy prepared me for success in college and my career. The alumni network continues to be an invaluable resource."</p> <h4>Michael Johnson</h4> <p class="role">Class of 2010, Google Product Manager</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-half-alt"></i> </div> </div> </div> <div class="slider-controls"> <button class="prev-btn"><i class="fas fa-chevron-left"></i></button> <button class="next-btn"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Events Section --> <section id="events" class="events section-padding"> <div class="container"> <div class="section-title"> <h2>Upcoming Events</h2> <p>Join our school community</p> </div> <div class="events-grid"> <div class="event-card"> <div class="event-date"> <div class="day">15</div> <div class="month">Oct</div> </div> <div class="event-details"> <h3>Fall Open House</h3> <p class="time"><i class="far fa-clock"></i> 10:00 AM - 2:00 PM</p> <p class="location"><i class="fas fa-map-marker-alt"></i> Main Campus</p> <p>Tour our facilities and meet faculty, staff, and current students.</p> <a href="#" class="btn btn-small">RSVP</a> </div> </div> <div class="event-card"> <div class="event-date"> <div class="day">22</div> <div class="month">Oct</div> </div> <div class="event-details"> <h3>STEM Fair</h3> <p class="time"><i class="far fa-clock"></i> 9:00 AM - 4:00 PM</p> <p class="location"><i class="fas fa-map-marker-alt"></i> Science Building</p> <p>Student projects showcasing innovation in science and technology.</p> <a href="#" class="btn btn-small">Learn More</a> </div> </div> <div class="event-card"> <div class="event-date"> <div class="day">5</div> <div class="month">Nov</div> </div> <div class="event-details"> <h3>Fall Theater Production</h3> <p class="time"><i class="far fa-clock"></i> 7:00 PM</p> <p class="location"><i class="fas fa-map-marker-alt"></i> Performing Arts Center</p> <p>Our students present "A Midsummer Night's Dream".</p> <a href="#" class="btn btn-small">Get Tickets</a> </div> </div> </div> <div class="events-cta"> <a href="#" class="btn">View Full Calendar</a> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery section-padding bg-light"> <div class="container"> <div class="section-title"> <h2>School Life Gallery</h2> <p>Moments from our community</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1" alt="Students in Class"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24" alt="Library"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d" alt="Science Lab"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" alt="Team Meeting"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc" alt="Chemistry Experiment"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f" alt="Basketball Game"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact section-padding"> <div class="container"> <div class="section-title"> <h2>Contact Us</h2> <p>We'd love to hear from you</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="info-box"> <div class="icon"> <i class="fas fa-map-marker-alt"></i> </div> <h4>Address</h4> <p>123 Education Lane<br>Academic City, AC 12345</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-phone-alt"></i> </div> <h4>Phone</h4> <p>Admissions: (123) 456-7890<br>Main Office: (123) 456-7891</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-envelope"></i> </div> <h4>Email</h4> <p>admissions@eliteacademy.edu<br>info@eliteacademy.edu</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-clock"></i> </div> <h4>Office Hours</h4> <p>Monday-Friday: 8:00 AM - 5:00 PM<br>Saturday: 9:00 AM - 12:00 PM</p> </div> </div> <div class="contact-form"> <form id="contactForm"> <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="">I'm interested in...</option> <option>Admissions Information</option> <option>Scheduling a Tour</option> <option>Employment Opportunities</option> <option>General Inquiry</option> </select> </div> <div class="form-group"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Map Section --> <section class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215209179329!2d-73.98784492423958!3d40.74844047138951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQ0JzU0LjQiTiA3M8KwNTknMDkuNyJX!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h3>Stay Connected</h3> <p>Subscribe to our newsletter for school updates, events, and more.</p> <form class="newsletter-form"> <input type="email" placeholder="Your Email Address" required> <button type="submit" class="btn">Subscribe</button> </form> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Elite Academy</h3> <p>Preparing students for success in college and life through academic excellence, character development, and community engagement.</p> <div class="social-links"> <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> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#academics">Academics</a></li> <li><a href="#admissions">Admissions</a></li> <li><a href="#faculty">Faculty</a></li> </ul> </div> <div class="footer-col"> <h3>Resources</h3> <ul> <li><a href="#">Calendar</a></li> <li><a href="#">Parent Portal</a></li> <li><a href="#">Student Portal</a></li> <li><a href="#">Alumni</a></li> <li><a href="#">Employment</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Info</h3> <ul> <li><i class="fas fa-map-marker-alt"></i> 123 Education Lane, AC 12345</li> <li><i class="fas fa-phone-alt"></i> (123) 456-7890</li> <li><i class="fas fa-envelope"></i> info@eliteacademy.edu</li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 Elite Academy. All Rights Reserved.</p> <div class="footer-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> <a href="#">Sitemap</a> </div> </div> </div> </footer> <!-- Back to Top Button --> <a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #0056b3; --secondary-color: #003366; --accent-color: #ffc107; --text-color: #333; --light-color: #f8f9fa; --dark-color: #212529; --gray-color: #6c757d; --white-color: #ffffff; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } .section-padding { padding: 100px 0; } .bg-light { background-color: var(--light-color); } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-size: 36px; font-weight: 700; color: var(--secondary-color); margin-bottom: 15px; text-transform: uppercase; position: relative; display: inline-block; } .section-title h2::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--accent-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .section-title p { font-size: 18px; color: var(--gray-color); } .btn { display: inline-block; background: var(--primary-color); color: var(--white-color); padding: 12px 30px; border: none; border-radius: 5px; font-size: 16px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn:hover { background: #004494; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3); } .btn-outline { background: transparent; border: 2px solid var(--white-color); margin-left: 15px; } .btn-outline:hover { background: var(--white-color); color: var(--primary-color); } .btn-small { padding: 8px 20px; font-size: 14px; } /* Preloader Styles */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white-color); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: var(--transition); } .loader { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } .book { width: 60px; height: 45px; position: relative; perspective: 150px; } .page { position: absolute; width: 30px; height: 45px; background: var(--primary-color); border-radius: 3px 6px 6px 3px; transform-origin: left center; animation: flip 1.5s infinite ease-in-out; } .page:nth-child(1) { animation-delay: 0.1s; background: rgba(0, 86, 179, 0.8); } .page:nth-child(2) { animation-delay: 0.3s; background: rgba(0, 86, 179, 0.6); } .page:nth-child(3) { animation-delay: 0.5s; background: rgba(0, 86, 179, 0.4); } @keyframes flip { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(-160deg); } } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .logo h1 { font-size: 28px; font-weight: 700; color: var(--secondary-color); } .logo h1 span { color: var(--primary-color); } .navbar ul { display: flex; list-style: none; } .navbar ul li { margin-left: 30px; } .navbar ul li a { color: var(--secondary-color); font-size: 16px; font-weight: 600; text-decoration: none; transition: var(--transition); position: relative; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--accent-color); bottom: -5px; left: 0; transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .menu-toggle { display: none; cursor: pointer; font-size: 24px; color: var(--secondary-color); } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1') no-repeat center center/cover; display: flex; align-items: center; text-align: center; color: var(--white-color); padding-top: 80px; } .hero-content h2 { font-size: 28px; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; } .hero-content h1 { font-size: 60px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 3px; } .hero-content p { font-size: 18px; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; justify-content: center; gap: 15px; } /* About Section */ .about-content { display: flex; align-items: center; gap: 50px; } .about-img { flex: 1; } .about-img img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .about-text { flex: 1; } .about-text h3 { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: var(--secondary-color); } .about-text p { margin-bottom: 20px; color: var(--gray-color); } .about-features { display: flex; justify-content: space-between; margin-top: 30px; } .feature { text-align: center; padding: 20px; border-radius: 5px; transition: var(--transition); } .feature:hover { transform: translateY(-10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .feature i { font-size: 40px; color: var(--accent-color); margin-bottom: 15px; } .feature h4 { font-size: 18px; font-weight: 600; } /* Academics Section */ .academics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .academic-card { background: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .academic-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .academic-icon { width: 80px; height: 80px; background: rgba(0, 86, 179, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: var(--transition); } .academic-card:hover .academic-icon { background: var(--primary-color); color: var(--white-color); } .academic-icon i { font-size: 30px; color: var(--primary-color); transition: var(--transition); } .academic-card:hover .academic-icon i { color: var(--white-color); } .academic-card h3 { font-size: 22px; margin-bottom: 10px; color: var(--secondary-color); } .academic-card p { color: var(--primary-color); font-weight: 600; margin-bottom: 15px; } .academic-card ul { list-style: none; margin-bottom: 20px; text-align: left; } .academic-card ul li { padding: 8px 0; border-bottom: 1px solid #eee; color: var(--gray-color); } .academic-card ul li:last-child { border-bottom: none; } /* Admissions Section */ .admissions-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 50px; } .step { text-align: center; padding: 30px; background: var(--white-color); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .step:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .step-number { width: 60px; height: 60px; background: var(--primary-color); color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; margin: 0 auto 20px; } .step h3 { font-size: 20px; margin-bottom: 15px; color: var(--secondary-color); } .step p { color: var(--gray-color); } .admissions-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; } .info-card { background: var(--primary-color); color: var(--white-color); padding: 30px; border-radius: 10px; transition: var(--transition); } .info-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .info-card h3 { font-size: 22px; margin-bottom: 15px; } .info-card p { margin-bottom: 20px; } .dates { margin-bottom: 20px; } .dates p { margin-bottom: 5px; } /* Faculty Section */ .faculty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px; } .faculty-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; padding-bottom: 30px; } .faculty-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .faculty-img { position: relative; overflow: hidden; height: 300px; } .faculty-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .faculty-card:hover .faculty-img img { transform: scale(1.1); } .social-links { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; background: rgba(0, 86, 179, 0.8); padding: 10px; transition: var(--transition); } .faculty-card:hover .social-links { bottom: 0; } .social-links a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--white-color); color: var(--primary-color); border-radius: 50%; margin: 0 5px; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); color: var(--white-color); } .faculty-card h3 { font-size: 22px; margin-top: 20px; margin-bottom: 5px; color: var(--secondary-color); } .faculty-card p { color: var(--primary-color); font-weight: 600; margin-bottom: 5px; } .faculty-card .bio { color: var(--gray-color); font-size: 14px; padding: 0 20px; } .faculty-stats { display: flex; justify-content: center; gap: 30px; margin-top: 30px; } .stat { text-align: center; padding: 20px; background: var(--white-color); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); width: 200px; } .stat:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .number { font-size: 36px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; } .stat p { color: var(--gray-color); } /* Facilities Section */ .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .facility-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .facility-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .facility-img { height: 250px; overflow: hidden; } .facility-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .facility-card:hover .facility-img img { transform: scale(1.1); } .facility-card h3 { font-size: 20px; padding: 20px; color: var(--secondary-color); } .facility-card p { padding: 0 20px 20px; color: var(--gray-color); } /* Testimonials Section */ .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial-card { background: var(--white-color); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: none; } .testimonial-card.active { display: flex; align-items: center; gap: 30px; } .client-img { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 5px solid var(--primary-color); } .client-img img { width: 100%; height: 100%; object-fit: cover; } .client-review p { font-style: italic; margin-bottom: 15px; color: var(--gray-color); } .client-review h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .client-review .role { color: var(--primary-color); font-weight: 600; margin-bottom: 10px; font-size: 14px; } .rating { color: var(--accent-color); } .slider-controls { position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; } .slider-controls button { background: var(--primary-color); color: var(--white-color); width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 16px; transition: var(--transition); } .slider-controls button:hover { background: #004494; } /* Events Section */ .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-bottom: 40px; } .event-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: flex; transition: var(--transition); } .event-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .event-date { background: var(--primary-color); color: var(--white-color); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 100px; } .day { font-size: 36px; font-weight: 700; line-height: 1; } .month { font-size: 18px; text-transform: uppercase; font-weight: 600; } .event-details { padding: 20px; flex: 1; } .event-details h3 { font-size: 20px; margin-bottom: 10px; color: var(--secondary-color); } .event-details .time, .event-details .location { display: flex; align-items: center; margin-bottom: 10px; color: var(--gray-color); } .event-details .time i, .event-details .location i { margin-right: 8px; color: var(--primary-color); } .event-details p { margin-bottom: 15px; color: var(--gray-color); } .events-cta { text-align: center; } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white-color); font-size: 40px; } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .info-box { display: flex; align-items: flex-start; margin-bottom: 30px; } .icon { width: 60px; height: 60px; background: rgba(0, 86, 179, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; flex-shrink: 0; } .icon i { font-size: 24px; color: var(--primary-color); } .info-box h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .info-box p { color: var(--gray-color); } .contact-form { flex: 1; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary-color); outline: none; } .form-group textarea { height: 150px; resize: none; } /* Map Section */ .map { width: 100%; height: 450px; } /* Newsletter Section */ .newsletter { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1') no-repeat center center/cover; padding: 80px 0; color: var(--white-color); text-align: center; } .newsletter-content { max-width: 600px; margin: 0 auto; } .newsletter h3 { font-size: 28px; margin-bottom: 20px; } .newsletter p { margin-bottom: 30px; } .newsletter-form { display: flex; } .newsletter-form input { width: 100%; padding: 15px; border: none; border-radius: 5px 0 0 5px; font-family: 'Poppins', sans-serif; } .newsletter-form button { background: var(--accent-color); color: var(--dark-color); border: none; padding: 0 30px; border-radius: 0 5px 5px 0; cursor: pointer; font-weight: 600; transition: var(--transition); } .newsletter-form button:hover { background: #e0a800; } /* Footer */ .footer { background: var(--secondary-color); color: var(--white-color); padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px; } .footer-col h3 { font-size: 20px; margin-bottom: 25px; position: relative; } .footer-col h3::after { content: ''; position: absolute; width: 50px; height: 2px; background: var(--accent-color); bottom: -10px; left: 0; } .footer-col p { margin-bottom: 20px; color: #b3b3b3; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--white-color); margin-right: 10px; transition: var(--transition); } .social-links a:hover { background: var(--accent-color); color: var(--dark-color); transform: translateY(-5px); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 15px; display: flex; align-items: center; } .footer-col ul li i { margin-right: 10px; color: var(--accent-color); } .footer-col ul li a { color: #b3b3b3; text-decoration: none; transition: var(--transition); } .footer-col ul li a:hover { color: var(--accent-color); transform: translateX(5px); } .footer-bottom { text-align: center; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #b3b3b3; font-size: 14px; display: flex; flex-direction: column; align-items: center; } .footer-links { margin-top: 15px; display: flex; gap: 20px; } .footer-links a { color: #b3b3b3; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent-color); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--primary-color); color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 99; opacity: 0; visibility: hidden; transition: var(--transition); } .back-to-top.active { opacity: 1; visibility: visible; } .back-to-top:hover { background: #004494; transform: translateY(-5px); } /* Responsive Styles */ @media (max-width: 1200px) { .facilities-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } @media (max-width: 992px) { .about-content { flex-direction: column; } .contact-content { flex-direction: column; } .testimonial-card.active { flex-direction: column; text-align: center; } .client-img { margin-bottom: 20px; } .admissions-info { grid-template-columns: 1fr; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--white-color); transition: var(--transition); z-index: 999; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; align-items: center; justify-content: center; height: 100%; } .navbar ul li { margin: 15px 0; } .menu-toggle { display: block; } .hero-content h1 { font-size: 40px; } .hero-content h2 { font-size: 20px; } .section-title h2 { font-size: 30px; } .slider-controls { position: static; transform: none; justify-content: center; margin-top: 30px; } .slider-controls button { margin: 0 10px; } .hero-buttons { flex-direction: column; gap: 15px; } .btn-outline { margin-left: 0; } .events-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .hero-content h1 { font-size: 32px; } .section-title h2 { font-size: 26px; } .about-features { flex-direction: column; } .feature { margin-bottom: 20px; } .feature:last-child { margin-bottom: 0; } .newsletter-form { flex-direction: column; } .newsletter-form input { border-radius: 5px; margin-bottom: 10px; } .newsletter-form button { border-radius: 5px; padding: 15px; } .faculty-stats { flex-direction: column; align-items: center; } .stat { width: 100%; max-width: 200px; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Preloader const preloader = document.querySelector('.preloader'); window.addEventListener('load', function() { preloader.style.display = 'none'; }); // Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const navbar = document.querySelector('.navbar'); menuToggle.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); }); // Close mobile menu when clicking on a link const navLinks = document.querySelectorAll('.navbar ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); menuToggle.querySelector('i').classList.remove('fa-times'); }); }); // Sticky Header window.addEventListener('scroll', function() { const header = document.querySelector('.header'); header.classList.toggle('sticky', window.scrollY > 0); }); // Testimonial Slider const testimonialCards = document.querySelectorAll('.testimonial-card'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); let currentIndex = 0; function showTestimonial(index) { testimonialCards.forEach(card => card.classList.remove('active')); testimonialCards[index].classList.add('active'); } prevBtn.addEventListener('click', function() { currentIndex = (currentIndex - 1 + testimonialCards.length) % testimonialCards.length; showTestimonial(currentIndex); }); nextBtn.addEventListener('click', function() { currentIndex = (currentIndex + 1) % testimonialCards.length; showTestimonial(currentIndex); }); // Initialize first testimonial showTestimonial(currentIndex); // Auto slide testimonials let testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonialCards.length; showTestimonial(currentIndex); }, 5000); // Pause auto slide on hover const testimonialSlider = document.querySelector('.testimonials-slider'); testimonialSlider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); testimonialSlider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonialCards.length; showTestimonial(currentIndex); }, 5000); }); // 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' }); } }); }); // Back to Top Button const backToTopBtn = document.querySelector('.back-to-top'); window.addEventListener('scroll', function() { if (window.pageYOffset > 300) { backToTopBtn.classList.add('active'); } else { backToTopBtn.classList.remove('active'); } }); backToTopBtn.addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Gallery Lightbox (would need additional HTML/CSS for full implementation) const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('click', function() { // In a real implementation, this would open a lightbox // with the clicked image alert('Gallery lightbox would open here in a full implementation'); }); }); // Form submission const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will contact you soon.'); this.reset(); }); } // Newsletter form const newsletterForm = document.querySelector('.newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); alert(`Thank you for subscribing with ${emailInput.value}!`); emailInput.value = ''; }); } // Animation on scroll function animateOnScroll() { const elements = document.querySelectorAll('.about-content, .academic-card, .step, .faculty-card, .facility-card, .event-card, .gallery-item'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } // Set initial state for animated elements const animatedElements = document.querySelectorAll('.about-content, .academic-card, .step, .faculty-card, .facility-card, .event-card, .gallery-item'); animatedElements.forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(50px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); // Run on load and scroll window.addEventListener('load', animateOnScroll); window.addEventListener('scroll', animateOnScroll); });
Output Preview
Desktop
Mobile
Fullscreen
