Excellence in Education Academy School
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>Bright Future Academy - Excellence in Education</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.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fas fa-graduation-cap"></i> Bright Academy </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="#programs">Programs</a> </li> <li class="nav-item"> <a class="nav-link" href="#faculty">Faculty</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#admissions">Admissions</a> </li> <li class="nav-item"> <button class="btn btn-apply" onclick="applyNow()"> <i class="fas fa-user-plus me-2"></i>Apply Now </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title">Shaping Tomorrow's Leaders</h1> <p class="hero-subtitle">Excellence in education through innovative teaching methods, state-of-the-art facilities, and a nurturing environment that inspires students to reach their full potential.</p> <div class="hero-stats"> <div class="stat-item"> <span class="stat-number">1,200+</span> <span class="stat-label">Students Enrolled</span> </div> <div class="stat-item"> <span class="stat-number">25+</span> <span class="stat-label">Years of Excellence</span> </div> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">College Acceptance</span> </div> </div> <div class="hero-buttons"> <a href="#programs" class="btn btn-custom btn-primary-custom">Explore Programs</a> <a href="#admissions" class="btn btn-custom btn-secondary-custom">Apply Today</a> </div> </div> </div> </div> </div> </section> <!-- Programs Section --> <section id="programs" class="programs-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Academic Programs</h2> <p class="section-subtitle animate-on-scroll">Comprehensive educational programs designed to nurture every student's potential</p> </div> </div> <!-- Grade Level Filters --> <div class="grade-filters animate-on-scroll"> <button class="filter-btn active" onclick="filterPrograms('all')">All Programs</button> <button class="filter-btn" onclick="filterPrograms('elementary')">Elementary</button> <button class="filter-btn" onclick="filterPrograms('middle')">Middle School</button> <button class="filter-btn" onclick="filterPrograms('high')">High School</button> </div> <div class="row" id="programsContainer"> <!-- Elementary Programs --> <div class="col-lg-4 col-md-6 mb-4 program-item elementary"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-child"></i> </div> <h4 class="program-title">Elementary Education</h4> <p class="program-description">Foundation learning with focus on literacy, numeracy, and social skills development in a nurturing environment.</p> <ul class="program-features"> <li>Reading & Writing Fundamentals</li> <li>Mathematics & Problem Solving</li> <li>Science Exploration</li> <li>Arts & Creative Expression</li> <li>Physical Education & Health</li> <li>Character Development</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4 program-item middle"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-users"></i> </div> <h4 class="program-title">Middle School Program</h4> <p class="program-description">Transitional education focusing on academic growth, leadership skills, and preparing for high school challenges.</p> <ul class="program-features"> <li>Advanced Core Subjects</li> <li>Leadership Development</li> <li>Technology Integration</li> <li>Foreign Language Options</li> <li>Extracurricular Activities</li> <li>College Prep Foundation</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4 program-item high"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-graduation-cap"></i> </div> <h4 class="program-title">High School Excellence</h4> <p class="program-description">College preparatory program with Advanced Placement courses, career guidance, and university partnerships.</p> <ul class="program-features"> <li>AP & Honors Courses</li> <li>College Counseling</li> <li>Career Exploration</li> <li>Research Projects</li> <li>Internship Programs</li> <li>University Partnerships</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4 program-item all"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-palette"></i> </div> <h4 class="program-title">Arts & Creative Studies</h4> <p class="program-description">Comprehensive arts education including visual arts, music, theater, and digital media across all grade levels.</p> <ul class="program-features"> <li>Visual Arts & Design</li> <li>Music & Performance</li> <li>Theater & Drama</li> <li>Digital Media Arts</li> <li>Creative Writing</li> <li>Art Exhibitions</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4 program-item all"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-laptop-code"></i> </div> <h4 class="program-title">STEM Education</h4> <p class="program-description">Science, Technology, Engineering, and Mathematics programs with hands-on learning and innovation labs.</p> <ul class="program-features"> <li>Computer Programming</li> <li>Robotics & Engineering</li> <li>Advanced Sciences</li> <li>Mathematics Olympiad</li> <li>Innovation Labs</li> <li>Science Fair Competitions</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4 program-item all"> <div class="program-card animate-on-scroll"> <div class="program-icon"> <i class="fas fa-running"></i> </div> <h4 class="program-title">Athletics & Wellness</h4> <p class="program-description">Comprehensive sports and wellness programs promoting physical fitness, teamwork, and healthy lifestyle habits.</p> <ul class="program-features"> <li>Competitive Sports Teams</li> <li>Physical Fitness Training</li> <li>Health & Nutrition Education</li> <li>Outdoor Adventure Programs</li> <li>Mental Health Support</li> <li>Championship Competitions</li> </ul> </div> </div> </div> </div> </section> <!-- Faculty Section --> <section id="faculty" class="faculty-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Our Distinguished Faculty</h2> <p class="section-subtitle animate-on-scroll">Experienced educators dedicated to inspiring and guiding every student</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Dr. Michael Thompson</h5> <p class="faculty-position">Principal & Educational Leader</p> <p class="faculty-bio">25+ years in education leadership. PhD in Educational Administration. Passionate about innovative teaching methods and student success.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('michael', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('michael', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('michael', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1494790108755-2616c96c5e24?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Prof. Sarah Johnson</h5> <p class="faculty-position">Mathematics Department Head</p> <p class="faculty-bio">Award-winning mathematics educator with expertise in advanced calculus and statistics. Makes complex concepts accessible to all students.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('sarah', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('sarah', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('sarah', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Dr. James Rodriguez</h5> <p class="faculty-position">Science Department Chair</p> <p class="faculty-bio">Research scientist turned educator. Specializes in physics and chemistry with hands-on laboratory experiences and real-world applications.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('james', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('james', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('james', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Ms. Emily Chen</h5> <p class="faculty-position">English & Literature Teacher</p> <p class="faculty-bio">Published author and literature enthusiast. Inspires students through creative writing workshops and classic literature analysis.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('emily', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('emily', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('emily', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Coach Robert Wilson</h5> <p class="faculty-position">Athletics Director</p> <p class="faculty-bio">Former professional athlete with 15+ years coaching experience. Develops championship teams while emphasizing character and sportsmanship.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('robert', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('robert', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('robert', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="faculty-card animate-on-scroll"> <div class="faculty-avatar" style="background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <h5 class="faculty-name">Ms. Lisa Martinez</h5> <p class="faculty-position">Arts & Music Coordinator</p> <p class="faculty-bio">Professional musician and visual artist. Creates inspiring arts programs that help students discover and develop their creative talents.</p> <div class="faculty-contact"> <button class="contact-btn" onclick="contactFaculty('lisa', 'phone')"> <i class="fas fa-phone"></i> </button> <button class="contact-btn" onclick="contactFaculty('lisa', 'email')"> <i class="fas fa-envelope"></i> </button> <button class="contact-btn" onclick="contactFaculty('lisa', 'calendar')"> <i class="fas fa-calendar"></i> </button> </div> </div> </div> </div> </div> </section> <!-- Facilities Section --> <section id="facilities" class="facilities-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">World-Class Facilities</h2> <p class="section-subtitle animate-on-scroll">State-of-the-art learning environments designed to inspire and educate</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=2028&q=80')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('library')">Explore Library</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Modern Library & Media Center</h5> <p class="facility-description">Extensive collection of books, digital resources, and collaborative study spaces with advanced technology integration.</p> <div class="facility-features"> <span class="facility-tag">50,000+ Books</span> <span class="facility-tag">Digital Resources</span> <span class="facility-tag">Study Rooms</span> <span class="facility-tag">Computer Lab</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('science-lab')">Tour Lab</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Advanced Science Laboratories</h5> <p class="facility-description">Fully equipped chemistry, physics, and biology labs with modern equipment for hands-on scientific exploration.</p> <div class="facility-features"> <span class="facility-tag">Chemistry Lab</span> <span class="facility-tag">Physics Lab</span> <span class="facility-tag">Biology Lab</span> <span class="facility-tag">Safety Equipment</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('sports-complex')">View Complex</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Athletic Complex & Gymnasium</h5> <p class="facility-description">Multi-purpose gymnasium, outdoor fields, and fitness facilities supporting various sports and physical activities.</p> <div class="facility-features"> <span class="facility-tag">Full Gymnasium</span> <span class="facility-tag">Soccer Field</span> <span class="facility-tag">Track & Field</span> <span class="facility-tag">Fitness Center</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=2072&q=80')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('computer-lab')">See Technology</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Technology & Computer Labs</h5> <p class="facility-description">State-of-the-art computer labs with latest software and hardware for programming, design, and digital learning.</p> <div class="facility-features"> <span class="facility-tag">Latest Computers</span> <span class="facility-tag">Programming Software</span> <span class="facility-tag">Design Tools</span> <span class="facility-tag">3D Printing</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('auditorium')">Visit Theater</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Performing Arts Theater</h5> <p class="facility-description">Professional-grade auditorium with advanced lighting and sound systems for concerts, plays, and presentations.</p> <div class="facility-features"> <span class="facility-tag">500 Seats</span> <span class="facility-tag">Professional Stage</span> <span class="facility-tag">Sound System</span> <span class="facility-tag">Lighting</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="facility-card animate-on-scroll"> <div class="facility-image" style="background-image: url('https://images.unsplash.com/photo-1562815240-be666d2600ce?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Q2FmZXRlcmlhfGVufDB8fDB8fHww')"> <div class="facility-overlay"> <button class="facility-view-btn" onclick="viewFacility('cafeteria')">See Dining</button> </div> </div> <div class="facility-info"> <h5 class="facility-title">Cafeteria & Dining Hall</h5> <p class="facility-description">Spacious dining facility serving nutritious meals with options for various dietary needs and preferences.</p> <div class="facility-features"> <span class="facility-tag">Healthy Meals</span> <span class="facility-tag">Dietary Options</span> <span class="facility-tag">Fresh Ingredients</span> <span class="facility-tag">Social Space</span> </div> </div> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="about-text animate-on-scroll"> <h2 class="section-title text-start">Excellence in Education Since 1999</h2> <p class="section-subtitle text-start">For over 25 years, Bright Future Academy has been committed to providing exceptional education that prepares students for success in college, career, and life.</p> <p>Our mission is to create a nurturing environment where every student can discover their potential, develop critical thinking skills, and become confident, compassionate leaders of tomorrow.</p> <p>We believe in holistic education that balances academic excellence with character development, creativity, and social responsibility. Our innovative teaching methods and dedicated faculty ensure that each student receives personalized attention and support.</p> <div class="about-stats"> <div class="about-stat"> <span class="about-stat-number">1,200+</span> <span class="about-stat-label">Students Enrolled</span> </div> <div class="about-stat"> <span class="about-stat-number">85+</span> <span class="about-stat-label">Expert Faculty</span> </div> <div class="about-stat"> <span class="about-stat-number">25+</span> <span class="about-stat-label">Years of Excellence</span> </div> <div class="about-stat"> <span class="about-stat-number">98%</span> <span class="about-stat-label">College Acceptance</span> </div> </div> </div> </div> <div class="col-lg-6"> <div class="about-image animate-on-scroll"> <div class="achievement-badge"> <span class="achievement-years">25+</span> <span>Years</span> </div> </div> </div> </div> </div> </section> <!-- Events Section --> <section id="events" class="events-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Upcoming Events</h2> <p class="section-subtitle animate-on-scroll">Join us for exciting educational and community events throughout the year</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">15</span> <span class="event-month">Dec</span> </div> <h5 class="event-title">Winter Science Fair</h5> <p class="event-description">Students showcase their innovative science projects and research findings in our annual winter science fair competition.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>9:00 AM - 3:00 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Main Gymnasium</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>All Grade Levels</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>Free Admission</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">22</span> <span class="event-month">Dec</span> </div> <h5 class="event-title">Holiday Concert</h5> <p class="event-description">Join our talented students for a festive holiday concert featuring choir, band, and orchestra performances.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>7:00 PM - 9:00 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Performing Arts Theater</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>Families Welcome</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>$5 Suggested Donation</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">08</span> <span class="event-month">Jan</span> </div> <h5 class="event-title">Open House</h5> <p class="event-description">Prospective families are invited to tour our campus, meet faculty, and learn about our academic programs.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>10:00 AM - 2:00 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Campus-wide Tours</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>Prospective Families</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>Registration Required</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">20</span> <span class="event-month">Jan</span> </div> <h5 class="event-title">Basketball Championship</h5> <p class="event-description">Cheer on our varsity basketball teams as they compete in the regional championship tournament.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>6:00 PM - 9:00 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Main Gymnasium</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>All Ages Welcome</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>$3 Students, $5 Adults</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">14</span> <span class="event-month">Feb</span> </div> <h5 class="event-title">Art Exhibition Opening</h5> <p class="event-description">Celebrate student creativity at our annual art exhibition featuring works from all grade levels and art programs.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>5:00 PM - 8:00 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Art Gallery & Hallways</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>Community Event</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>Free & Open to Public</span> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="event-card animate-on-scroll"> <div class="event-date"> <span class="event-day">05</span> <span class="event-month">Mar</span> </div> <h5 class="event-title">College Fair</h5> <p class="event-description">High school students and families can meet with representatives from over 50 colleges and universities.</p> <div class="event-details"> <div class="event-detail"> <i class="fas fa-clock"></i> <span>6:00 PM - 8:30 PM</span> </div> <div class="event-detail"> <i class="fas fa-map-marker-alt"></i> <span>Main Gymnasium</span> </div> <div class="event-detail"> <i class="fas fa-users"></i> <span>High School Students</span> </div> <div class="event-detail"> <i class="fas fa-ticket-alt"></i> <span>Free Admission</span> </div> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">What Our Community Says</h2> <p class="section-subtitle animate-on-scroll text-white-50">Hear from students, parents, and alumni about their Bright Future Academy experience</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Bright Future Academy has been incredible for my daughter. The teachers are caring and challenging, and she's grown so much academically and personally. The small class sizes make all the difference.</p> <div class="testimonial-author"> <div class="author-avatar" style="background-image: url('https://images.unsplash.com/photo-1494790108755-2616c96c5e24?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <div class="author-info"> <h6>Jennifer Martinez</h6> <p class="author-role">Parent of 8th Grade Student</p> </div> </div> <div class="rating-stars"> <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="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">The education I received at Bright Future Academy prepared me perfectly for college. The AP courses and college counseling program helped me get into my dream university with scholarships.</p> <div class="testimonial-author"> <div class="author-avatar" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <div class="author-info"> <h6>Alex Thompson</h6> <p class="author-role">Class of 2023 Alumni</p> </div> </div> <div class="rating-stars"> <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="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-quote">"</div> <p class="testimonial-text">I love coming to school every day! My teachers make learning fun and I've made amazing friends. The science lab experiments and art classes are my favorites.</p> <div class="testimonial-author"> <div class="author-avatar" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=387&q=80')"> </div> <div class="author-info"> <h6>Emma Johnson</h6> <p class="author-role">5th Grade Student</p> </div> </div> <div class="rating-stars"> <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> </div> </section> <!-- Admissions Section --> <section id="admissions" class="admissions-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Admissions Information</h2> <p class="section-subtitle animate-on-scroll">Join our community of learners and begin your journey to academic excellence</p> </div> </div> <div class="row"> <div class="col-lg-6 mb-4"> <div class="admission-info animate-on-scroll"> <h4 class="mb-4">Admission Process</h4> <div class="admission-item"> <div class="admission-icon"> <i class="fas fa-file-alt"></i> </div> <div> <h6>Application Submission</h6> <p>Complete online application with required documents and transcripts</p> </div> </div> <div class="admission-item"> <div class="admission-icon"> <i class="fas fa-calendar-check"></i> </div> <div> <h6>Campus Visit & Interview</h6> <p>Schedule a campus tour and meet with our admissions team</p> </div> </div> <div class="admission-item"> <div class="admission-icon"> <i class="fas fa-clipboard-list"></i> </div> <div> <h6>Assessment & Evaluation</h6> <p>Academic assessment and review of student portfolio</p> </div> </div> <div class="admission-item"> <div class="admission-icon"> <i class="fas fa-envelope-open"></i> </div> <div> <h6>Admission Decision</h6> <p>Receive admission decision within 2 weeks of completed application</p> </div> </div> <div class="admission-item"> <div class="admission-icon"> <i class="fas fa-handshake"></i> </div> <div> <h6>Enrollment & Orientation</h6> <p>Complete enrollment process and attend new student orientation</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="admission-form animate-on-scroll"> <h4 class="mb-4">Request Information</h4> <form id="admissionForm"> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Student First Name" required> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Student Last Name" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Parent/Guardian Name" required> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Email Address" required> </div> </div> <div class="row"> <div class="col-md-6"> <input type="tel" class="form-control" placeholder="Phone Number" required> </div> <div class="col-md-6"> <select class="form-control" required> <option value="">Grade Level Applying For</option> <option value="kindergarten">Kindergarten</option> <option value="elementary">Elementary (1st-5th)</option> <option value="middle">Middle School (6th-8th)</option> <option value="high">High School (9th-12th)</option> </select> </div> </div> <input type="text" class="form-control" placeholder="Current School (if applicable)"> <select class="form-control" required> <option value="">Preferred Start Date</option> <option value="fall-2024">Fall 2024</option> <option value="spring-2025">Spring 2025</option> <option value="fall-2025">Fall 2025</option> </select> <textarea class="form-control" rows="4" placeholder="Tell us about your child's interests, goals, and any special considerations" required></textarea> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" id="tourRequest"> <label class="form-check-label" for="tourRequest"> I would like to schedule a campus tour </label> </div> <button type="submit" class="btn btn-submit"> <i class="fas fa-paper-plane me-2"></i>Request Information </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand">? Bright Academy</div> <p class="text-white-50 mb-4">Excellence in education through innovative teaching methods, state-of-the-art facilities, and a nurturing environment that inspires students to reach their full potential.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></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="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Academics</h5> <div class="footer-links"> <a href="#programs">Elementary Program</a> <a href="#programs">Middle School</a> <a href="#programs">High School</a> <a href="#programs">STEM Education</a> <a href="#programs">Arts Program</a> <a href="#programs">Athletics</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#about">About Us</a> <a href="#faculty">Faculty & Staff</a> <a href="#facilities">Campus Facilities</a> <a href="#events">Events Calendar</a> <a href="#admissions">Admissions</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Contact Info</h5> <div class="footer-links"> <a href="tel:+15551234567">? +1 (555) 123-4567</a> <a href="mailto:info@brightfuture.edu">✉️ info@brightfuture.edu</a> <a href="#">? 123 Education Blvd, Learning City</a> <a href="#">? Mon-Fri: 7:30 AM - 4:00 PM</a> <a href="#">? Library Hours: 7:00 AM - 6:00 PM</a> <a href="#">? Transportation Available</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 Bright Future Academy. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Student Handbook</a> <a href="#" class="text-white-50">Accreditation</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Message sent successfully!</span> </div> <!-- Bootstrap JS --> <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:'9769592cb7596ee2',t:'MTc1NjQ0MjE5Ni4wMDAwMDA='};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
:root { --primary-blue: #1e40af; --secondary-green: #059669; --accent-orange: #ea580c; --accent-purple: #7c3aed; --dark-navy: #1e293b; --light-gray: #f8fafc; --success-green: #10b981; --warning-yellow: #f59e0b; --white: #ffffff; --gradient-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); --gradient-secondary: linear-gradient(135deg, #059669 0%, #10b981 100%); --gradient-accent: linear-gradient(135deg, #ea580c 0%, #f97316 100%); --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-navy); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 600; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-gray); } ::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 4px; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-light); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--primary-blue) !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 10px; font-size: 2rem; color: var(--accent-orange); } .nav-link { font-weight: 500; color: var(--dark-navy) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-blue) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-apply { background: var(--gradient-primary); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-left: 15px; transition: all 0.3s ease; } .btn-apply:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(30, 64, 175, 0.386), rgba(30, 41, 59, 0.452)), url('https://plus.unsplash.com/premium_photo-1680807869780-e0876a6f3cd5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c2Nob29sfGVufDB8fDB8fHww') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 45px; font-weight: 700; color: white; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); /* margin-bottom: 3rem; */ animation: fadeInUp 1s ease-out 0.3s both; } .hero-stats { display: flex; gap: 3rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; } .stat-item { text-align: center; color: white; } .stat-number { font-size: 3rem; font-weight: 700; color: var(--warning-yellow); display: block; } .stat-label { font-size: 1rem; opacity: 0.9; } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 15px 35px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; } .btn-primary-custom { background: var(--gradient-accent); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); color: white; } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--primary-blue); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary-blue); text-align: center; } .section-subtitle { font-size: 1.2rem; color: var(--dark-navy); margin-bottom: 4rem; text-align: center; opacity: 0.8; } /* Programs Section */ .programs-section { background: var(--light-gray); } .program-card { background: white; border-radius: 20px; padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; border: 1px solid rgba(30, 64, 175, 0.1); } .program-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.3s ease; } .program-card:hover::before { transform: scaleX(1); } .program-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); } .program-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; transition: transform 0.3s ease; } .program-card:hover .program-icon { transform: scale(1.1) rotate(5deg); } .program-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-blue); } .program-description { color: var(--dark-navy); margin-bottom: 2rem; opacity: 0.8; } .program-features { list-style: none; text-align: left; } .program-features li { padding: 0.5rem 0; color: var(--dark-navy); position: relative; padding-left: 2rem; } .program-features li::before { content: '✓'; position: absolute; left: 0; color: var(--success-green); font-weight: bold; } /* Faculty Section */ .faculty-section { background: white; } .faculty-card { background: white; border-radius: 20px; padding: 2rem; text-align: center; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; } .faculty-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .faculty-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.5rem; background-size: cover; background-position: center; background-repeat: no-repeat; border: 4px solid var(--primary-blue); position: relative; box-shadow: var(--shadow-medium); } .faculty-name { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-blue); } .faculty-position { color: var(--accent-orange); font-weight: 500; margin-bottom: 1rem; } .faculty-bio { color: var(--dark-navy); opacity: 0.8; margin-bottom: 1.5rem; } .faculty-contact { display: flex; justify-content: center; gap: 1rem; } .contact-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--light-gray); color: var(--dark-navy); border: none; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .contact-btn:hover { background: var(--primary-blue); color: white; transform: translateY(-2px); } /* Facilities Section */ .facilities-section { background: var(--light-gray); } .facility-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; position: relative; } .facility-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .facility-image { height: 250px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } .facility-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, var(--primary-blue), var(--secondary-green)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .facility-card:hover .facility-overlay { opacity: 0.9; } .facility-view-btn { background: white; color: var(--primary-blue); border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; transform: translateY(20px); transition: transform 0.3s ease; } .facility-card:hover .facility-view-btn { transform: translateY(0); } .facility-info { padding: 2rem; } .facility-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-blue); } .facility-description { color: var(--dark-navy); opacity: 0.8; margin-bottom: 1.5rem; } .facility-features { display: flex; flex-wrap: wrap; gap: 0.5rem; } .facility-tag { background: var(--light-gray); color: var(--primary-blue); padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 500; } /* About Section */ .about-section { background: white; } .about-content { display: flex; align-items: center; gap: 4rem; } .about-text { flex: 1; } .about-image { flex: 1; height: 500px; background: url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2032&q=80') center/cover; border-radius: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-heavy); } .about-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 64, 175, 0.3), rgba(30, 41, 59, 0.3)); border-radius: 20px; } .achievement-badge { position: absolute; top: 2rem; right: 2rem; background: var(--warning-yellow); color: var(--primary-blue); padding: 1rem 2rem; border-radius: 15px; text-align: center; font-weight: 700; } .achievement-years { font-size: 2rem; display: block; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .about-stat { text-align: center; padding: 2rem; background: var(--light-gray); border-radius: 15px; box-shadow: var(--shadow-light); } .about-stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-blue); display: block; } .about-stat-label { color: var(--dark-navy); font-weight: 500; } /* Events Section */ .events-section { background: var(--light-gray); } .event-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-light); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; } .event-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .event-date { position: absolute; top: 2rem; right: 2rem; background: var(--gradient-accent); color: white; padding: 1rem; border-radius: 15px; text-align: center; font-weight: 700; min-width: 80px; } .event-day { font-size: 1.5rem; display: block; } .event-month { font-size: 0.9rem; opacity: 0.9; } .event-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-blue); padding-right: 100px; } .event-description { color: var(--dark-navy); opacity: 0.8; margin-bottom: 1.5rem; } .event-details { display: flex; flex-direction: column; gap: 0.5rem; } .event-detail { display: flex; align-items: center; color: var(--dark-navy); font-size: 0.9rem; } .event-detail i { margin-right: 0.5rem; color: var(--accent-orange); width: 16px; } /* Testimonials Section */ .testimonials-section { background: var(--gradient-primary); color: white; } .testimonial-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; height: 100%; } .testimonial-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); } .testimonial-quote { font-size: 4rem; color: var(--warning-yellow); opacity: 0.5; margin-bottom: 1rem; } .testimonial-text { font-size: 1.1rem; margin-bottom: 2rem; font-style: italic; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 3px solid var(--warning-yellow); box-shadow: var(--shadow-light); } .author-info h6 { margin-bottom: 0.25rem; font-weight: 600; } .author-role { font-size: 0.9rem; opacity: 0.8; } .rating-stars { color: var(--warning-yellow); margin-top: 1rem; } /* Admissions Section */ .admissions-section { background: white; } .admission-info { background: var(--light-gray); border-radius: 20px; padding: 3rem; box-shadow: var(--shadow-light); height: 100%; } .admission-item { display: flex; align-items: center; margin-bottom: 2rem; padding: 1.5rem; background: white; border-radius: 15px; transition: all 0.3s ease; } .admission-item:hover { background: var(--primary-blue); color: white; transform: translateX(10px); } .admission-icon { width: 50px; height: 50px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; color: white; } .admission-item:hover .admission-icon { background: white; color: var(--primary-blue); } .admission-form { background: var(--light-gray); border-radius: 20px; padding: 3rem; box-shadow: var(--shadow-light); } .form-control { border: 2px solid var(--light-gray); border-radius: 10px; padding: 15px; margin-bottom: 1.5rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 0.2rem rgba(30, 64, 175, 0.25); } .btn-submit { background: var(--gradient-primary); color: white; border: none; padding: 15px 40px; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--dark-navy); color: white; padding: 80px 0 40px; } .footer-brand { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--warning-yellow); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.5rem; } .footer-links a:hover { color: var(--warning-yellow); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--gradient-primary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 20px; background: var(--success-green); color: white; padding: 15px 25px; border-radius: 10px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; } .success-message.show { transform: translateX(0); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .section-title { font-size: 2.2rem; } .hero-stats { flex-direction: column; gap: 1rem; } .about-content { flex-direction: column; gap: 2rem; } .about-image { height: 300px; } .about-stats { grid-template-columns: 1fr; } } /* Loading Animation */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Grade Level Filters */ .grade-filters { display: flex; justify-content: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 10px; } .filter-btn { background: white; border: 2px solid var(--light-gray); color: var(--dark-navy); padding: 12px 25px; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; } .filter-btn.active { background: var(--gradient-primary); color: white; border-color: var(--primary-blue); } .filter-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
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 function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)'; } animateOnScroll(); }); // Program filtering function filterPrograms(category) { // Update active button document.querySelectorAll('.filter-btn').forEach(btn => { btn.classList.remove('active'); }); event.target.classList.add('active'); // Filter programs const programs = document.querySelectorAll('.program-item'); programs.forEach(program => { if (category === 'all' || program.classList.contains(category)) { program.style.display = 'block'; setTimeout(() => { program.style.opacity = '1'; program.style.transform = 'translateY(0)'; }, 100); } else { program.style.opacity = '0'; program.style.transform = 'translateY(20px)'; setTimeout(() => { program.style.display = 'none'; }, 300); } }); showSuccessMessage(`Showing ${category === 'all' ? 'all' : category} programs`); } // View facility details function viewFacility(facilityId) { const facilityDetails = { 'library': { name: 'Modern Library & Media Center', description: 'Our state-of-the-art library features over 50,000 books, digital resources, and collaborative study spaces.', details: 'Features: 50,000+ books, Digital databases, Study rooms, Computer lab, 3D printing station, Maker space\nHours: Monday-Friday 7:00 AM - 6:00 PM\nServices: Research assistance, Tutoring, Technology support' }, 'science-lab': { name: 'Advanced Science Laboratories', description: 'Fully equipped chemistry, physics, and biology labs with modern equipment for hands-on scientific exploration.', details: 'Labs: Chemistry, Physics, Biology, Earth Science\nEquipment: Microscopes, Spectrometers, Safety equipment\nCapacity: 24 students per lab\nSafety: Full ventilation and emergency systems' }, 'sports-complex': { name: 'Athletic Complex & Gymnasium', description: 'Multi-purpose facilities supporting various sports and physical activities for all grade levels.', details: 'Facilities: Full gymnasium, Soccer field, Track & field, Tennis courts, Fitness center\nTeams: Basketball, Soccer, Track, Tennis, Cross Country\nEvents: Championships, Tournaments, Community games' } }; const facility = facilityDetails[facilityId]; if (facility) { alert(`? FACILITY TOUR ?\n\n${facility.name}\n\n${facility.description}\n\n${facility.details}\n\n✅ This is a virtual tour\n? Contact us to schedule an in-person visit`); } } // Apply now function function applyNow() { document.getElementById('admissions').scrollIntoView({ behavior: 'smooth' }); showSuccessMessage('Ready to apply? Fill out the form below!'); } // Contact faculty member function contactFaculty(member, method) { const contacts = { 'michael': { name: 'Dr. Michael Thompson', phone: '+1 (555) 123-4567', email: 'mthompson@brightfuture.edu' }, 'sarah': { name: 'Prof. Sarah Johnson', phone: '+1 (555) 123-4568', email: 'sjohnson@brightfuture.edu' }, 'james': { name: 'Dr. James Rodriguez', phone: '+1 (555) 123-4569', email: 'jrodriguez@brightfuture.edu' }, 'emily': { name: 'Ms. Emily Chen', phone: '+1 (555) 123-4570', email: 'echen@brightfuture.edu' }, 'robert': { name: 'Coach Robert Wilson', phone: '+1 (555) 123-4571', email: 'rwilson@brightfuture.edu' }, 'lisa': { name: 'Ms. Lisa Martinez', phone: '+1 (555) 123-4572', email: 'lmartinez@brightfuture.edu' } }; const contact = contacts[member]; if (contact) { let message = ''; switch(method) { case 'phone': message = `? Calling ${contact.name} at ${contact.phone}`; break; case 'email': message = `✉️ Emailing ${contact.name} at ${contact.email}`; break; case 'calendar': message = `? Scheduling meeting with ${contact.name}`; break; } showSuccessMessage(message); } } // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Admission form submission document.getElementById('admissionForm').addEventListener('submit', function(e) { e.preventDefault(); // Get form data const studentFirstName = this.querySelector('input[placeholder="Student First Name"]').value; const studentLastName = this.querySelector('input[placeholder="Student Last Name"]').value; const parentName = this.querySelector('input[placeholder="Parent/Guardian Name"]').value; const email = this.querySelector('input[placeholder="Email Address"]').value; const phone = this.querySelector('input[placeholder="Phone Number"]').value; const gradeLevel = this.querySelector('select').value; const currentSchool = this.querySelector('input[placeholder="Current School (if applicable)"]').value; const startDate = this.querySelectorAll('select')[1].value; const interests = this.querySelector('textarea').value; const tourRequest = this.querySelector('#tourRequest').checked; // Simulate form submission const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Sending...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage(`Thank you ${parentName}! We've received your information request for ${studentFirstName}.`); // Show admission summary setTimeout(() => { alert(`? ADMISSION INFORMATION REQUEST ?\n\nStudent: ${studentFirstName} ${studentLastName}\nParent/Guardian: ${parentName}\nEmail: ${email}\nPhone: ${phone}\nGrade Level: ${gradeLevel}\nStart Date: ${startDate}\nCampus Tour: ${tourRequest ? 'Yes' : 'No'}\n\nInterests: ${interests}\n\n✅ This is a demo submission\n? Our admissions team will contact you within 24 hours\n? We'll schedule your campus tour and provide detailed program information\n\nThank you for your interest in Bright Future Academy!`); }, 1000); }, 2000); }); // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); // Counter animation for stats function animateCounters() { const counters = document.querySelectorAll('.stat-number, .about-stat-number'); counters.forEach(counter => { const target = parseInt(counter.textContent.replace(/[^\d]/g, '')); const increment = target / 100; let current = 0; const updateCounter = () => { if (current < target) { current += increment; if (counter.textContent.includes('+')) { counter.textContent = Math.ceil(current) + '+'; } else if (counter.textContent.includes('%')) { counter.textContent = Math.ceil(current) + '%'; } else { counter.textContent = Math.ceil(current); } requestAnimationFrame(updateCounter); } else { counter.textContent = counter.textContent.replace(/\d+/, target); } }; // Start animation when element is visible const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { updateCounter(); observer.unobserve(entry.target); } }); }); observer.observe(counter); }); } animateCounters(); }); // Program card interactions document.querySelectorAll('.program-card').forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.program-icon'); icon.style.transform = 'scale(1.1) rotate(5deg)'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.program-icon'); icon.style.transform = 'scale(1) rotate(0deg)'; }); }); // Student portal function function studentPortal() { showSuccessMessage('Opening student portal...'); setTimeout(() => { alert('? STUDENT PORTAL ?\n\nAccess your:\n• Grades & Assignments\n• Class Schedules\n• School Calendar\n• Library Resources\n• Lunch Menu\n• Transportation Info\n\n? Available on mobile app\n? Web access 24/7\n? Secure login required\n\nNote: This is a demo portal'); }, 1000); } // Parent portal function function parentPortal() { showSuccessMessage('Loading parent portal...'); setTimeout(() => { alert('???? PARENT PORTAL ????\n\nMonitor your child\'s:\n• Academic Progress\n• Attendance Records\n• Teacher Communications\n• School Events\n• Payment History\n• Transportation Updates\n\n? Email notifications\n? Mobile app available\n? Real-time alerts\n\nNote: This is a demo portal'); }, 1000); } // Virtual tour function function virtualTour() { showSuccessMessage('Starting virtual campus tour...'); setTimeout(() => { alert('? VIRTUAL CAMPUS TOUR ?\n\nExplore our facilities:\n• Modern Classrooms\n• Science Laboratories\n• Library & Media Center\n• Athletic Complex\n• Arts Studios\n• Cafeteria\n• Outdoor Spaces\n\n? 360° Interactive Views\n? Mobile Compatible\n? Audio Narration\n? Interactive Map\n\nNote: This is a demo tour'); }, 1000); }
Output Preview
Desktop
Mobile
Fullscreen