Lumina International School Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lumina International School | Excellence in Education</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
   
</head>
<body>

<header id="header">
        <div class="container nav-wrapper">
            <a href="#" class="logo">
                <i class="fa-solid fa-graduation-cap"></i> Lumina
            </a>
            
            <nav class="nav-links">
                <a href="#home">Home</a>
                <a href="#about">About Us</a>
                <a href="#academics">Academics</a>
                <a href="#campus">Campus Life</a>
                <a href="#admissions">Admissions</a>
                <a href="#contact" class="btn btn-primary" style="color: white; border:none; padding: 10px 24px;">Apply Now</a>
            </nav>

<section class="hero" id="home">
        <div class="container hero-grid">
            <div class="hero-content reveal-left">
                <h1>Ignite Your Child's Potential for a <span>Brighter Future</span></h1>
                <p>Providing a world-class, holistic educational experience that nurtures creativity, builds critical thinking, and prepares future leaders for a dynamic world.</p>
                <div class="hero-btns">
                    <a href="#academics" class="btn btn-primary">Discover Programs</a>
                    <a href="#tour" class="btn btn-outline">Take a Tour</a>
                </div>
            </div>
            <div class="hero-image reveal-right">
                <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&q=80&w=1000" alt="Students Learning" class="hero-img-main">
                
                <div class="floating-card card-top-right">
                    <i class="fa-solid fa-star"></i>
                    <div>
                        <h4>4.9/5 Rating</h4>
                        <p>Parent Satisfaction</p>
                    </div>
                </div>

<div class="floating-card card-bottom-left">
                    <i class="fa-solid fa-award"></i>
                    <div>
                        <h4>#1 Ranked</h4>
                        <p>In Regional Academics</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="container reveal">
        <div class="stats-wrapper">
            <div class="stat-item">
                <h3>15+</h3>
                <p>Years of Excellence</p>
            </div>
            <div class="stat-item">
                <h3>50+</h3>
                <p>Certified Educators</p>
            </div>
            <div class="stat-item">
                <h3>100%</h3>
                <p>University Acceptance</p>
            </div>
            <div class="stat-item">
                <h3>1200+</h3>
                <p>Active Students</p>
            </div>
        </div>
    </div>

<section class="section" id="about">
        <div class="container about-grid">
            <div class="image-composition reveal-left">
                <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&q=80" alt="Library" class="img-back">
                <img src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?auto=format&fit=crop&q=80" alt="Classroom" class="img-front">
            </div>
            <div class="about-content reveal-right">
                <span class="section-subtitle">Our Philosophy</span>
                <h2 class="section-title">Fostering a Culture of Continuous Growth</h2>
                <p>At Lumina International School, we go beyond traditional textbooks. We cultivate an inspiring environment where intellectual curiosity meets character development. Our innovative pedagogy ensures that every student develops the academic rigor and emotional intelligence required to thrive globally.</p>
                
                <ul>
                    <li><i class="fa-solid fa-check"></i> Globally Recognized Curriculum standards</li>
                    <li><i class="fa-solid fa-check"></i> State-of-the-art STEM laboratories & creative arts studios</li>
                    <li><i class="fa-solid fa-check"></i> Personalized learning pathways for every student</li>
                </ul>
                
                <a href="#about-more" class="btn btn-primary" style="margin-top: 15px;">Read Our Story</a>
            </div>
        </div>
    </section>

<section class="section bg-light" id="academics">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-subtitle">Academic Excellence</span>
                <h2 class="section-title">Tailored Educational Pathways</h2>
                <p>From the foundational early years to rigorous high school preparations, our programs are designed to engage, challenge, and inspire students at every developmental milestone.</p>
            </div>

<div class="program-grid">
                
                <div class="program-card reveal">
                    <div class="program-img">
                        <span class="age-badge">Ages 3 - 5</span>
                        <img src="https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&q=80" alt="Early Years Foundation">
                    </div>
                    <div class="program-info">
                        <h3>Early Years Foundation</h3>
                        <p>A play-based, inquiry-driven approach focusing on cognitive development, sensory exploration, and early social skills in a secure setting.</p>
                        <a href="#" class="program-link">Explore Curriculum <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>

<div class="program-card reveal" style="transition-delay: 0.1s;">
                    <div class="program-img">
                        <span class="age-badge">Ages 6 - 11</span>
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80" alt="Primary School">
                    </div>
                    <div class="program-info">
                        <h3>Primary School</h3>
                        <p>Building strong foundations in literacy, numeracy, and science while nurturing independent thinking and collaborative problem-solving.</p>
                        <a href="#" class="program-link">Explore Curriculum <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>

<div class="program-card reveal" style="transition-delay: 0.2s;">
                    <div class="program-img">
                        <span class="age-badge">Ages 12 - 18</span>
                        <img src="https://images.unsplash.com/photo-1524069290683-0457abfe42c3?auto=format&fit=crop&q=80" alt="Middle & High School">
                    </div>
                    <div class="program-info">
                        <h3>Middle & High School</h3>
                        <p>Rigorous academic preparation with advanced placements, leadership training, and comprehensive college counseling for global universities.</p>
                        <a href="#" class="program-link">Explore Curriculum <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section features" id="campus">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-subtitle">The Lumina Advantage</span>
                <h2 class="section-title">Why Parents Trust Us</h2>
                <p>We provide a comprehensive ecosystem that supports not just academic achievement, but total physical, emotional, and social well-being.</p>
            </div>

<div class="features-grid">
                <div class="feature-box reveal">
                    <div class="feature-icon"><i class="fa-solid fa-microscope"></i></div>
                    <h4>Advanced Facilities</h4>
                    <p>Access to modern science labs, smart classrooms, and expansive sports complexes designed for optimal learning.</p>
                </div>
                <div class="feature-box reveal" style="transition-delay: 0.1s;">
                    <div class="feature-icon"><i class="fa-solid fa-globe"></i></div>
                    <h4>Global Perspective</h4>
                    <p>A diverse community and international curriculum that prepares students to be responsible global citizens.</p>
                </div>
                <div class="feature-box reveal" style="transition-delay: 0.2s;">
                    <div class="feature-icon"><i class="fa-solid fa-palette"></i></div>
                    <h4>Arts & Culture</h4>
                    <p>Rich extracurricular programs in visual arts, music, drama, and digital media to spark creative talents.</p>
                </div>
                <div class="feature-box reveal" style="transition-delay: 0.3s;">
                    <div class="feature-icon"><i class="fa-solid fa-shield-heart"></i></div>
                    <h4>Safe Environment</h4>
                    <p>24/7 campus security, dedicated wellness counselors, and a strict anti-bullying policy for peace of mind.</p>
                </div>
            </div>
        </div>
    </section>

<section class="cta-section" id="admissions">
        <div class="container">
            <div class="cta-box reveal">
                <div class="cta-content">
                    <h2>Ready to Shape Your Child's Future?</h2>
                    <p>Enrollment for the upcoming academic year is now open. Schedule a personalized campus tour and discover the Lumina difference today.</p>
                </div>
                <div>
                    <a href="#apply" class="btn cta-btn">Begin Application Form</a>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid reveal">
                <div class="footer-about">
                    <a href="#" class="logo"><i class="fa-solid fa-graduation-cap"></i> Lumina</a>
                    <p>Empowering the next generation through innovative education, ethical grounding, and a commitment to academic excellence.</p>
                    <div class="social-links">
                        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                    </div>
                </div>

<div>
                    <h4 class="footer-title">Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="#about">About Lumina</a></li>
                        <li><a href="#academics">Our Curriculum</a></li>
                        <li><a href="#admissions">Admissions Process</a></li>
                        <li><a href="#">Tuition & Fees</a></li>
                        <li><a href="#">Careers</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="footer-title">Contact Us</h4>
                    <ul class="footer-links">
                        <li><i class="fa-solid fa-location-dot" style="color: var(--secondary); margin-right: 10px;"></i> 450 Education Blvd, Innovation City, ST 12345</li>
                        <li><i class="fa-solid fa-phone" style="color: var(--secondary); margin-right: 10px;"></i> +1 (800) 123-4567</li>
                        <li><i class="fa-solid fa-envelope" style="color: var(--secondary); margin-right: 10px;"></i> admissions@luminaschool.edu</li>
                    </ul>
                </div>

<div>
                    <h4 class="footer-title">Stay Updated</h4>
                    <p>Subscribe to our newsletter for the latest school updates and educational insights.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="Enter your email address" required>
                        <button type="submit"><i class="fa-solid fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <p>&copy; 2024 Lumina International School. All rights reserved. Designed for Excellence.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* --- Core Variables & Reset --- */
        :root {
            --primary: #1E3A8A; /* Deep Navy Blue */
            --secondary: #F97316; /* Vibrant Orange */
            --accent: #38BDF8; /* Light Blue */
            --text-dark: #0F172A;
            --text-light: #64748B;
            --bg-light: #F8FAFC;
            --white: #FFFFFF;
            --font-heading: 'Montserrat', sans-serif;
            --font-body: 'Open Sans', sans-serif;
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --radius: 12px;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: var(--font-body);
            color: var(--text-light);
            line-height: 1.7;
            background-color: var(--white);
            overflow-x: hidden;
        }

h1, h2, h3, h4 {
            font-family: var(--font-heading);
            color: var(--text-dark);
            line-height: 1.2;
        }

a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }

.container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

.section { padding: 100px 0; }
        .bg-light { background-color: var(--bg-light); }

/* --- Buttons --- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 32px;
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid transparent;
            gap: 10px;
        }

.btn-primary { background-color: var(--secondary); color: var(--white); }
        .btn-primary:hover { background-color: #EA580C; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); }

.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
        .btn-outline:hover { background-color: var(--primary); color: var(--white); transform: translateY(-2px); }

/* --- Animations --- */
        .reveal { opacity: 0; transform: translateY(40px); transition: 0.8s all ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .reveal-left { opacity: 0; transform: translateX(-40px); transition: 0.8s all ease; }
        .reveal-left.active { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(40px); transition: 0.8s all ease; }
        .reveal-right.active { opacity: 1; transform: translateX(0); }

/* --- Header --- */
        header {
            position: fixed;
            top: 0; left: 0; width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: var(--transition);
        }

header.scrolled {
            background-color: var(--white);
            padding: 15px 0;
            box-shadow: var(--shadow-sm);
        }

.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }

.logo {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        header.scrolled .logo { color: var(--primary); }
        .logo i { color: var(--secondary); font-size: 1.8rem; }

.nav-links { display: flex; gap: 35px; align-items: center; }
        .nav-links a { font-weight: 600; color: var(--white); font-size: 0.95rem; }
        .nav-links a:hover { color: var(--secondary); }
        header.scrolled .nav-links a { color: var(--text-dark); }
        header.scrolled .nav-links a:hover { color: var(--secondary); }

.menu-btn { display: none; font-size: 1.5rem; color: var(--white); cursor: pointer; }
        header.scrolled .menu-btn { color: var(--text-dark); }

/* --- Hero Section --- */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--primary);
            overflow: hidden;
            padding-top: 80px;
        }

/* Abstract Background Elements */
        .hero::before {
            content: ''; position: absolute; top: -10%; right: -5%;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(249,115,22,0) 70%);
            border-radius: 50%;
        }

.hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

.hero-content h1 {
            color: var(--white);
            font-size: 3.5rem;
            margin-bottom: 24px;
            font-weight: 800;
        }

.hero-content h1 span { color: var(--secondary); }

.hero-content p {
            color: #CBD5E1;
            font-size: 1.15rem;
            margin-bottom: 40px;
            max-width: 90%;
        }

.hero-btns { display: flex; gap: 20px; }
        .hero-btns .btn-outline { border-color: var(--white); color: var(--white); }
        .hero-btns .btn-outline:hover { background: var(--white); color: var(--primary); }

.hero-image { position: relative; }
        .hero-img-main {
            border-radius: 24px;
            box-shadow: var(--shadow-lg);
            position: relative;
            z-index: 2;
        }

.floating-card {
            position: absolute;
            background: var(--white);
            padding: 15px 25px;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 3;
            animation: float 6s ease-in-out infinite;
        }

.card-top-right { top: 20px; right: -30px; }
        .card-bottom-left { bottom: 30px; left: -40px; animation-delay: 2s; }

.floating-card i {
            background: #FEF08A; color: #CA8A04;
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
        }
        .card-bottom-left i { background: #BBF7D0; color: #16A34A; }

.floating-card div h4 { font-size: 1.1rem; margin-bottom: 2px; }
        .floating-card div p { font-size: 0.85rem; color: var(--text-light); margin: 0; }

@keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

/* --- Stats Bar --- */
        .stats-wrapper {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 40px;
            margin-top: -60px;
            position: relative;
            z-index: 10;
        }

.stat-item {
            text-align: center;
            border-right: 1px solid #E2E8F0;
        }
        .stat-item:last-child { border-right: none; }
        .stat-item h3 { font-size: 2.5rem; color: var(--primary); margin-bottom: 5px; }
        .stat-item p { font-weight: 600; color: var(--text-dark); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;}

/* --- Section Titles --- */
        .section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
        .section-subtitle {
            color: var(--secondary); font-weight: 700; text-transform: uppercase;
            letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 10px; display: block;
        }
        .section-title { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }

/* --- About Section --- */
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        
        .image-composition { position: relative; }
        .img-back { border-radius: var(--radius); width: 80%; transform: translate(20%, 20%); }
        .img-front { border-radius: var(--radius); position: absolute; top: 0; left: 0; width: 70%; border: 10px solid var(--white); box-shadow: var(--shadow-md); }

.about-content ul { margin: 30px 0; }
        .about-content li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-weight: 600; color: var(--text-dark); }
        .about-content li i { color: var(--accent); background: #E0F2FE; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* --- Academic Programs --- */
        .program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        
        .program-card {
            background: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border: 1px solid #E2E8F0;
        }
        .program-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
        
        .program-img { height: 240px; overflow: hidden; position: relative; }
        .program-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s all; }
        .program-card:hover .program-img img { transform: scale(1.1); }
        
        .age-badge {
            position: absolute; top: 20px; right: 20px;
            background: var(--secondary); color: var(--white);
            padding: 5px 15px; border-radius: 30px; font-weight: 700; font-size: 0.85rem;
        }

.program-info { padding: 30px; }
        .program-info h3 { margin-bottom: 15px; font-size: 1.4rem; }
        .program-info p { margin-bottom: 20px; font-size: 0.95rem; }
        .program-link { color: var(--primary); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
        .program-link:hover { color: var(--secondary); }

/* --- Why Choose Us (Features) --- */
        .features {
            background: linear-gradient(rgba(30, 58, 138, 0.95), rgba(30, 58, 138, 0.95)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&q=80') fixed center/cover;
            color: var(--white);
        }
        .features .section-title { color: var(--white); }
        .features .section-subtitle { color: var(--accent); }
        
        .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
        
        .feature-box {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 30px;
            border-radius: var(--radius);
            text-align: center;
            transition: var(--transition);
        }
        .feature-box:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px); }
        
        .feature-icon {
            width: 70px; height: 70px; margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--secondary), #EA580C);
            border-radius: 20px; display: flex; align-items: center; justify-content: center;
            font-size: 2rem; color: var(--white); transform: rotate(45deg);
        }
        .feature-icon i { transform: rotate(-45deg); }
        .feature-box h4 { color: var(--white); font-size: 1.2rem; margin-bottom: 15px; }
        .feature-box p { color: #CBD5E1; font-size: 0.9rem; }

/* --- CTA Section --- */
        .cta-section {
            background-color: var(--bg-light);
            padding: 80px 0;
        }
        .cta-box {
            background: var(--secondary);
            border-radius: 24px;
            padding: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--white);
            box-shadow: var(--shadow-lg);
            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
        }
        .cta-content h2 { color: var(--white); font-size: 2.5rem; margin-bottom: 15px; }
        .cta-content p { font-size: 1.1rem; opacity: 0.9; max-width: 500px;}
        .cta-btn { background: var(--white); color: var(--secondary); }
        .cta-btn:hover { background: var(--primary); color: var(--white); box-shadow: none;}

/* --- Footer --- */
        footer { background: #0F172A; color: #94A3B8; padding: 80px 0 0; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; }
        
        .footer-about .logo { color: var(--white); margin-bottom: 20px; }
        .footer-about p { margin-bottom: 25px; }
        .social-links { display: flex; gap: 15px; }
        .social-links a {
            width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05);
            display: flex; align-items: center; justify-content: center; color: var(--white);
        }
        .social-links a:hover { background: var(--secondary); transform: translateY(-3px); }

.footer-title { color: var(--white); font-size: 1.2rem; margin-bottom: 25px; font-family: var(--font-heading); }
        .footer-links li { margin-bottom: 15px; }
        .footer-links a:hover { color: var(--accent); padding-left: 5px; }

.newsletter-form { position: relative; margin-top: 20px; }
        .newsletter-form input {
            width: 100%; padding: 15px 20px; border-radius: 8px; border: none;
            background: rgba(255,255,255,0.05); color: var(--white); outline: none;
        }
        .newsletter-form button {
            position: absolute; right: 5px; top: 5px; bottom: 5px;
            background: var(--secondary); border: none; border-radius: 6px;
            color: var(--white); padding: 0 20px; cursor: pointer; transition: var(--transition);
        }
        .newsletter-form button:hover { background: var(--primary); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 25px 0; text-align: center; font-size: 0.9rem; }

/* --- Responsive --- */
        @media (max-width: 1024px) {
            .hero-content h1 { font-size: 2.8rem; }
            .stats-wrapper { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 30px; }
            .stat-item:nth-child(2) { border-right: none; }
            .about-grid, .cta-box { grid-template-columns: 1fr; flex-direction: column; text-align: center; gap: 40px; }
            .image-composition { margin-bottom: 40px; }
            .about-content li { justify-content: center; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }

@media (max-width: 768px) {
            .menu-btn { display: block; }
            .nav-links {
                position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px);
                background: var(--white); flex-direction: column; padding: 40px 20px;
                transition: var(--transition); box-shadow: var(--shadow-md);
            }
            .nav-links.active { left: 0; }
            .nav-links a { color: var(--text-dark) !important; font-size: 1.2rem; border-bottom: 1px solid #eee; width: 100%; padding-bottom: 15px; }
            .nav-links .btn { width: 100%; margin-top: 20px; }
            
            .hero { padding-top: 120px; text-align: center; }
            .hero-grid { grid-template-columns: 1fr; }
            .hero-content p { max-width: 100%; margin: 0 auto 30px; }
            .hero-btns { justify-content: center; }
            
            .stats-wrapper { margin-top: 40px; grid-template-columns: 1fr; }
            .stat-item { border-right: none; border-bottom: 1px solid #E2E8F0; padding-bottom: 20px; }
            .stat-item:last-child { border-bottom: none; padding-bottom: 0; }
            
            .program-grid, .features-grid, .footer-grid { grid-template-columns: 1fr; }
            .section-title { font-size: 2rem; }
        }

JavaScript

// Sticky Navbar Logic
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Mobile Menu Toggle
        const menuBtn = document.getElementById('menuToggle');
        const navLinks = document.querySelector('.nav-links');
        const menuIcon = menuBtn.querySelector('i');

menuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            if(navLinks.classList.contains('active')) {
                menuIcon.classList.remove('fa-bars');
                menuIcon.classList.add('fa-xmark');
            } else {
                menuIcon.classList.remove('fa-xmark');
                menuIcon.classList.add('fa-bars');
            }
        });

// Close menu on link click
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                menuIcon.classList.remove('fa-xmark');
                menuIcon.classList.add('fa-bars');
            });
        });

// Intersection Observer for Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

// Select elements to animate
        document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
            observer.observe(el);
        });

// Trigger animations for elements visible on load (like Hero section)
        setTimeout(() => {
            document.querySelectorAll('.hero .reveal-left, .hero .reveal-right').forEach(el => {
                el.classList.add('active');
            });
        }, 100);

Lumina International School Template Preview

Download Options