EduHub School Education Center 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>EduHub - School & Education Center</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Poppins:wght@500;700&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-container">
            <a href="#" class="logo fade-in visible"><i class="fa-solid fa-book-open-reader"></i> EduHub</a>
            
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#programs">Courses</a></li>
                <li><a href="#activities">Activities</a></li>
                <li><a href="#news">Blog</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>

<section class="hero" id="home">
        <div class="hero-content fade-up visible">
            <h1>Unlock Your Child's Potential to Get Success</h1>
            <p>We provide a nurturing environment where children can learn, play, and grow. Join our community for a brighter future.</p>
            <div class="hero-btns">
                <a href="#programs" class="btn btn-primary">Our Courses</a>
                <a href="#contact" class="btn btn-outline">Contact Us</a>
            </div>
        </div>
        
        
        <div class="custom-shape-divider-bottom">
            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
            </svg>
        </div>
    </section>

<section class="section-padding" id="about">
        <div class="container about-grid">
            <div class="about-text fade-up">
                <h2>We are <span style="color: var(--secondary);">EduHub</span></h2>
                <p>Education is the process of facilitating learning, or the acquisition of knowledge, skills, values, beliefs, and habits. Educational methods include teaching, training, storytelling, discussion and directed research.</p>
                <p>We believe in a structured environment where playful purpose is building students' confidence and preparing them for the world ahead.</p>
                <a href="#" class="btn btn-primary" style="margin-top: 15px;">Read More</a>
            </div>
            <div class="about-img fade-up" style="transition-delay: 0.2s;">
                <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?q=80&w=2070&auto=format&fit=crop" alt="Kids playing">
            </div>
        </div>
    </section>

<section class="section-padding programs" id="programs">
        <div class="container">
            <div class="section-title fade-up">
                <h2>Our Age Groups</h2>
                <p style="color: #ddd;">Tailored learning programs for every stage of early childhood.</p>
            </div>
            
            <div class="program-grid">
                
                <div class="program-card fade-up">
                    <div class="program-img">
                        <img src="https://images.unsplash.com/photo-1516627145497-ae6968895b74?q=80&w=2040&auto=format&fit=crop" alt="Toddlers">
                    </div>
                    <h3>Class 2-3 years old</h3>
                    <p>Focuses on socialization, sensory play, and early language skills in a safe environment.</p>
                    <a href="#" class="btn btn-outline" style="border-color: var(--yellow); color: var(--yellow);">Learn More</a>
                </div>
                
                <div class="program-card fade-up" style="transition-delay: 0.2s;">
                    <div class="program-img" style="border-color: var(--primary);">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=2040&auto=format&fit=crop" alt="Preschool">
                    </div>
                    <h3>Class 3-5 years old</h3>
                    <p>Introducing foundational concepts in math, science, and literacy through interactive activities.</p>
                    <a href="#" class="btn btn-outline" style="border-color: var(--primary); color: var(--primary);">Learn More</a>
                </div>
                
                <div class="program-card fade-up" style="transition-delay: 0.4s;">
                    <div class="program-img" style="border-color: var(--secondary);">
                        <img src="https://images.unsplash.com/photo-1452860606245-08befc0ff44b?q=80&w=2070&auto=format&fit=crop" alt="Kindergarten">
                    </div>
                    <h3>Class 5-6 years old</h3>
                    <p>Preparing kids for primary school with structured learning, reading, and problem-solving.</p>
                    <a href="#" class="btn btn-outline" style="border-color: var(--secondary); color: var(--secondary);">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding activities" id="activities">
        <div class="container">
            <div class="section-title fade-up">
                <h2>Baby Activities</h2>
                <p>Engaging activities to develop diverse skills.</p>
            </div>

<div class="activity-grid">
                <div class="activity-card bg-orange fade-up">
                    <div class="activity-icon"><i class="fa-solid fa-language"></i></div>
                    <div class="activity-info">
                        <h4>Learn Language</h4>
                        <p>Stories, songs, and vocabulary building.</p>
                    </div>
                </div>
                <div class="activity-card bg-green fade-up" style="transition-delay: 0.1s;">
                    <div class="activity-icon"><i class="fa-solid fa-leaf"></i></div>
                    <div class="activity-info">
                        <h4>Learning in Nature</h4>
                        <p>Outdoor exploration and environment care.</p>
                    </div>
                </div>
                <div class="activity-card bg-blue fade-up" style="transition-delay: 0.2s;">
                    <div class="activity-icon"><i class="fa-solid fa-music"></i></div>
                    <div class="activity-info">
                        <h4>Learning to Musical</h4>
                        <p>Rhythm, singing, and basic instruments.</p>
                    </div>
                </div>
                <div class="activity-card bg-pink fade-up" style="transition-delay: 0.3s;">
                    <div class="activity-icon"><i class="fa-solid fa-futbol"></i></div>
                    <div class="activity-info">
                        <h4>Play more Sport</h4>
                        <p>Physical education and team games.</p>
                    </div>
                </div>
                <div class="activity-card bg-purple fade-up" style="transition-delay: 0.4s;">
                    <div class="activity-icon"><i class="fa-solid fa-puzzle-piece"></i></div>
                    <div class="activity-info">
                        <h4>Intellectual Games</h4>
                        <p>Puzzles, logic games, and building blocks.</p>
                    </div>
                </div>
                <div class="activity-card bg-yellow fade-up" style="transition-delay: 0.5s;">
                    <div class="activity-icon"><i class="fa-solid fa-palette"></i></div>
                    <div class="activity-info">
                        <h4>Paint Class</h4>
                        <p>Drawing, coloring, and creative arts.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding testimonials">
        <div class="container">
            <div class="section-title fade-up">
                <h2>Testimonial</h2>
                <p style="color: #ccc;">What parents say about our school.</p>
            </div>

<div class="testimonial-grid">
                <div class="testimonial-card fade-up">
                    <i class="fa-solid fa-quote-left"></i>
                    <p class="testimonial-text">"When I commenced the programme I gave myself one year to challenge my thinking, change my outlook and choose my next step. This could not have been achieved without the remarkable opportunities provided here."</p>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Parent">
                        </div>
                        <div class="client-details">
                            <h4>Maria Lusia</h4>
                            <span>Mother</span>
                        </div>
                    </div>
                </div>
                
                <div class="testimonial-card fade-up" style="transition-delay: 0.2s;">
                    <i class="fa-solid fa-quote-left"></i>
                    <p class="testimonial-text">"The environment is fantastic. My son loves going to school every day. The teachers are caring and the curriculum is wonderfully engaging. I have seen tremendous growth in his confidence."</p>
                    <div class="client-info">
                        <div class="client-img">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Parent">
                        </div>
                        <div class="client-details">
                            <h4>John Doe</h4>
                            <span>Father</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding" id="news">
        <div class="container">
            <div class="section-title fade-up">
                <h2>Latest News</h2>
                <p>Updates and stories from our school life.</p>
            </div>

<div class="news-grid">
                
                <div class="news-card fade-up">
                    <div class="news-img">
                        <span class="news-date">12 Oct</span>
                        <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?q=80&w=2132&auto=format&fit=crop" alt="Classroom">
                    </div>
                    <div class="news-content">
                        <h3>Open class training skills for kids</h3>
                        <p>Preschools provide education from ages approximately three to seven, depending on the country when children enter...</p>
                        <div class="news-footer">
                            <span><i class="fa-regular fa-user"></i> Admin</span>
                            <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                
                
                <div class="news-card fade-up" style="transition-delay: 0.2s;">
                    <div class="news-img">
                        <span class="news-date" style="background: var(--secondary);">08 Oct</span>
                        <img src="https://images.unsplash.com/photo-1524069290683-0457abfe42c3?q=80&w=2070&auto=format&fit=crop" alt="Event">
                    </div>
                    <div class="news-content">
                        <h3>Workshop Reward student scholarships</h3>
                        <p>We are proud to announce the winners of this year's academic scholarships recognizing outstanding effort and...</p>
                        <div class="news-footer">
                            <span><i class="fa-regular fa-user"></i> Admin</span>
                            <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>

<div class="news-card fade-up" style="transition-delay: 0.4s;">
                    <div class="news-img">
                        <span class="news-date" style="background: var(--yellow); color: var(--dark);">01 Oct</span>
                        <img src="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=2073&auto=format&fit=crop" alt="Library">
                    </div>
                    <div class="news-content">
                        <h3>Learning environment well receive</h3>
                        <p>Our new reading corner has been a massive hit among the students, encouraging daily reading habits...</p>
                        <div class="news-footer">
                            <span><i class="fa-regular fa-user"></i> Admin</span>
                            <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="newsletter fade-up">
        <div class="container">
            <h2>Newsletter</h2>
            <p>Subscribe now to receive useful information.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Your email address..." required>
                <button type="submit" class="btn btn-dark" style="background: var(--dark); color: white;">Subscribe</button>
            </form>
        </div>
    </section>

<footer id="contact">
        <div class="container">
            <div class="footer-grid fade-up">
                <div class="footer-col">
                    <a href="#" class="footer-logo"><i class="fa-solid fa-book-open-reader"></i> EduHub</a>
                    <p class="footer-text">We are Education, create your passion and inspiration. And hope success will come for your dream. Please send email and get latest news.</p>
                    <ul class="contact-info">
                        <li><i class="fa-solid fa-location-dot"></i> 123 Education Road, Cityville, State 12345</li>
                        <li><i class="fa-solid fa-phone"></i> +1 (555) 123-4567</li>
                        <li><i class="fa-solid fa-envelope"></i> hello@eduhub.com</li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>Information</h3>
                    <ul class="footer-links">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Admission</a></li>
                        <li><a href="#">Career Opportunities</a></li>
                        <li><a href="#">Student Affairs</a></li>
                        <li><a href="#">Our Policies</a></li>
                    </ul>
                </div>

<div class="footer-col">
                    <h3>Our Courses</h3>
                    <ul class="footer-links">
                        <li><a href="#">Math Basics</a></li>
                        <li><a href="#">English Language</a></li>
                        <li><a href="#">Kids Painting</a></li>
                        <li><a href="#">Sport Activities</a></li>
                        <li><a href="#">Music & Art</a></li>
                    </ul>
                </div>

<div class="footer-col">
                    <h3>Instagram</h3>
                    <div class="instagram-grid">
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=200&auto=format&fit=crop" alt="Insta">
                        <img src="https://images.unsplash.com/photo-1516627145497-ae6968895b74?q=80&w=200&auto=format&fit=crop" alt="Insta">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=200&auto=format&fit=crop" alt="Insta">
                        <img src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?q=80&w=200&auto=format&fit=crop" alt="Insta">
                        <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?q=80&w=200&auto=format&fit=crop" alt="Insta">
                        <img src="https://images.unsplash.com/photo-1452860606245-08befc0ff44b?q=80&w=200&auto=format&fit=crop" alt="Insta">
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                <p>&copy; 2023 EduHub School. All rights reserved.</p>
                <div class="social-icons">
                    <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>
    </footer>

</body>
</html>

CSS

/* --- CSS Variables & Reset --- */
        :root {
            --primary: #ff6b6b;      /* Coral Red */
            --secondary: #4ecdc4;    /* Turquoise */
            --yellow: #ffd166;       /* Sunny Yellow */
            --blue: #118ab2;         /* Ocean Blue */
            --green: #06d6a0;        /* Mint Green */
            --purple: #9d4edd;       /* Purple */
            --dark: #2b2d42;         /* Dark Slate */
            --light: #f8f9fa;        /* Off White */
            --text-main: #4a4e69;
            --font-head: 'Poppins', sans-serif;
            --font-body: 'Nunito', sans-serif;
            --transition: all 0.3s ease;
        }

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

body {
            font-family: var(--font-body);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #fff;
        }

h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-head);
            color: var(--dark);
            margin-bottom: 15px;
        }

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: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.section-padding {
            padding: 80px 0;
        }

.text-center {
            text-align: center;
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
        }

.section-title h2 {
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Buttons */
        .btn {
            display: inline-block;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            border: none;
        }

.btn-primary { background-color: var(--primary); color: white; }
        .btn-primary:hover { background-color: #e65555; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255,107,107,0.3); }
        
        .btn-secondary { background-color: var(--secondary); color: white; }
        .btn-secondary:hover { background-color: #3bb3ab; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(78,205,196,0.3); }

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

/* --- Animations on Scroll --- */
        .fade-up { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
        
        .fade-in { opacity: 0; transition: opacity 1s ease-out; }
        .fade-in.visible { opacity: 1; }

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

header.sticky {
            position: fixed;
            background: white;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 15px 0;
        }

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

.logo {
            font-family: var(--font-head);
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.logo i { color: var(--secondary); }

.nav-links {
            display: flex;
            gap: 30px;
        }

.nav-links a {
            font-weight: 600;
            color: var(--dark);
            font-size: 1rem;
        }
        
        header:not(.sticky) .nav-links a {
            color: white; /* White links when transparent on hero */
        }
        
        header:not(.sticky) .logo { color: white; }
        header:not(.sticky) .logo i { color: var(--yellow); }

.nav-links a:hover { color: var(--primary); }

.mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--dark);
        }
        
        header:not(.sticky) .mobile-toggle { color: white; }

/* --- Hero Section --- */
        .hero {
            position: relative;
            height: 100vh;
            min-height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(rgba(43, 45, 66, 0.4), rgba(43, 45, 66, 0.6)), url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=2022&auto=format&fit=crop') center/cover no-repeat;
            color: white;
        }

.hero-content {
            max-width: 800px;
            z-index: 2;
            padding: 0 20px;
        }

.hero h1 {
            color: white;
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

.hero-btns {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

/* Shape Divider Bottom */
        .custom-shape-divider-bottom {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
            z-index: 10;
        }

.custom-shape-divider-bottom svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 80px;
        }

.custom-shape-divider-bottom .shape-fill { fill: #ffffff; }

/* --- About Section --- */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

.about-img {
            position: relative;
        }

.about-img img {
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

.about-text h2 {
            color: var(--primary);
            font-size: 2.2rem;
            margin-bottom: 20px;
        }

.about-text p {
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

/* --- Programs Section --- */
        .programs {
            background: linear-gradient(rgba(43, 45, 66, 0.8), rgba(43, 45, 66, 0.9)), url('https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?q=80&w=2070&auto=format&fit=crop') center/cover fixed;
            color: white;
        }

.programs .section-title h2 { color: white; }

.program-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

.program-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            transition: var(--transition);
        }

.program-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.2);
        }

.program-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 20px;
            overflow: hidden;
            border: 4px solid var(--yellow);
        }

.program-img img { width: 100%; height: 100%; object-fit: cover; }
        
        .program-card h3 { color: white; margin-bottom: 15px; }
        .program-card p { margin-bottom: 25px; font-size: 0.95rem; opacity: 0.9; }

/* --- Activities Section --- */
        .activities { background-color: var(--light); }

.activity-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

.activity-card {
            flex: 1 1 300px;
            max-width: 350px;
            display: flex;
            align-items: center;
            padding: 20px 30px;
            border-radius: 50px; /* Pill shape */
            color: white;
            transition: var(--transition);
            cursor: default;
        }

.activity-card:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.activity-icon {
            font-size: 2rem;
            margin-right: 20px;
            background: rgba(255,255,255,0.3);
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

.activity-info h4 { color: white; margin-bottom: 5px; font-size: 1.2rem; }
        .activity-info p { font-size: 0.85rem; opacity: 0.9; line-height: 1.3; }

/* Colors for activity cards */
        .bg-orange { background-color: #ff8fa3; }
        .bg-green { background-color: #52b788; }
        .bg-blue { background-color: #4cc9f0; }
        .bg-pink { background-color: #ff99c8; }
        .bg-purple { background-color: #a06cd5; }
        .bg-yellow { background-color: #f4d06f; color: var(--dark) !important; }
        .bg-yellow h4, .bg-yellow p { color: var(--dark) !important; }
        .bg-yellow .activity-icon { background: rgba(0,0,0,0.1); }

/* --- Testimonials Section --- */
        .testimonials {
            background: url('https://www.transparenttextures.com/patterns/black-board.png'), #2c3e50;
            color: white;
            position: relative;
            padding-top: 100px;
        }
        
        /* Colorful border approximation at top */
        .testimonials::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 15px;
            background: linear-gradient(to right, var(--primary) 20%, var(--yellow) 20% 40%, var(--green) 40% 60%, var(--secondary) 60% 80%, var(--purple) 80%);
        }

.testimonials .section-title h2 { color: white; }

.testimonial-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

.testimonial-card {
            background: rgba(0,0,0,0.2);
            padding: 40px;
            border-radius: 10px;
            border-left: 4px solid var(--secondary);
            position: relative;
        }
        
        .testimonial-card i.fa-quote-left {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 3rem;
            color: rgba(255,255,255,0.1);
        }

.testimonial-text { font-style: italic; margin-bottom: 25px; font-size: 1.1rem; }

.client-info { display: flex; align-items: center; gap: 15px; }
        .client-img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }
        .client-img img { width: 100%; height: 100%; object-fit: cover; }
        .client-details h4 { color: var(--secondary); margin-bottom: 2px; }
        .client-details span { font-size: 0.85rem; opacity: 0.7; }

/* --- News Section --- */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

.news-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: var(--transition);
        }

.news-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.news-img { height: 200px; overflow: hidden; position: relative;}
        .news-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
        .news-card:hover .news-img img { transform: scale(1.1); }
        
        .news-date {
            position: absolute;
            top: 15px; left: 15px;
            background: var(--primary);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }

.news-content { padding: 25px; }
        .news-content h3 { font-size: 1.2rem; margin-bottom: 10px; }
        .news-content p { font-size: 0.95rem; margin-bottom: 20px; color: #666; }
        
        .news-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 15px;}
        .read-more { color: var(--secondary); font-weight: bold; font-size: 0.9rem;}
        .read-more:hover { color: var(--primary); }

/* --- Newsletter --- */
        .newsletter {
            background-color: var(--primary);
            color: white;
            padding: 60px 0;
            text-align: center;
            background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

.newsletter h2 { color: white; margin-bottom: 10px; }
        .newsletter p { margin-bottom: 30px; }

.newsletter-form {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            background: white;
            border-radius: 50px;
            padding: 5px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

.newsletter-form input {
            flex: 1;
            border: none;
            padding: 15px 25px;
            border-radius: 50px;
            outline: none;
            font-family: var(--font-body);
            font-size: 1rem;
        }

.newsletter-form .btn { margin-left: 5px; }

/* --- Footer --- */
        footer {
            background-color: #1a1c29;
            color: #a0a5b5;
            padding: 80px 0 0;
        }

.footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 50px;
        }

.footer-col h3 { color: white; font-size: 1.3rem; margin-bottom: 25px; position: relative; padding-bottom: 10px;}
        .footer-col h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--primary); }

.footer-logo { font-size: 2rem; color: white; margin-bottom: 20px; display: inline-block;}
        .footer-logo i { color: var(--primary); }
        
        .footer-text { margin-bottom: 20px; }
        
        .contact-info li { display: flex; gap: 15px; margin-bottom: 15px; }
        .contact-info i { color: var(--secondary); margin-top: 5px; }

.footer-links li { margin-bottom: 12px; }
        .footer-links a:hover { color: var(--primary); padding-left: 5px; }

.instagram-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .instagram-grid img { border-radius: 5px; width: 100%; height: 70px; object-fit: cover; }

.footer-bottom {
            background-color: #11121a;
            padding: 20px 0;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

.social-icons { margin-top: 15px; display: flex; justify-content: center; gap: 15px; }
        .social-icons a {
            width: 35px; height: 35px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; transition: var(--transition);
        }
        .social-icons a:hover { background: var(--primary); transform: translateY(-3px); }

/* --- Responsive Design --- */
        @media (max-width: 992px) {
            .about-grid, .testimonial-grid { grid-template-columns: 1fr; gap: 40px; }
            .program-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .hero h1 { font-size: 3rem; }
        }

@media (max-width: 768px) {
            .mobile-toggle { display: block; z-index: 101;}
            
            .nav-links {
                position: fixed;
                top: 0; right: -100%;
                width: 70%; height: 100vh;
                background: white;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: 0.4s ease-in-out;
                box-shadow: -5px 0 20px rgba(0,0,0,0.1);
            }

.nav-links.active { right: 0; }
            
            .nav-links a { color: var(--dark) !important; font-size: 1.2rem; }

.program-grid, .news-grid, .footer-grid { grid-template-columns: 1fr; }
            
            .hero h1 { font-size: 2.2rem; }
            .hero p { font-size: 1rem; }
            .hero-btns { flex-direction: column; }
            .hero-btns .btn { width: 100%; text-align: center; }
            
            .activity-card { flex-basis: 100%; max-width: 100%; }
            .newsletter-form { flex-direction: column; background: transparent; box-shadow: none; padding: 0; gap: 15px;}
            .newsletter-form input, .newsletter-form .btn { border-radius: 10px; width: 100%; margin: 0; }
        }

JavaScript

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

// Mobile Menu Toggle
        const mobileToggle = document.getElementById('mobileToggle');
        const navLinks = document.querySelector('.nav-links');

mobileToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            
            // Change icon
            const icon = mobileToggle.querySelector('i');
            if(navLinks.classList.contains('active')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-xmark');
            } else {
                icon.classList.remove('fa-xmark');
                icon.classList.add('fa-bars');
            }
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileToggle.querySelector('i').classList.remove('fa-xmark');
                mobileToggle.querySelector('i').classList.add('fa-bars');
            });
        });

// Intersection Observer for Scroll Animations
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.15 // Trigger when 15% of element is visible
        };

// Select all elements to animate
        const animatedElements = document.querySelectorAll('.fade-up, .fade-in');
        
        // Remove 'visible' class initially (in case JS loads after CSS applies it to elements already in view on load, though we set default to invisible in CSS)
        // Then observe them
        animatedElements.forEach(el => {
            if(!el.closest('#home')) { // Don't delay hero animations
                el.classList.remove('visible'); 
            }
            observer.observe(el);
        });

EduHub School Education Center Template Preview

Download Options