About Us Oakridge Academy 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>About Us | Oakridge Academy Legacy</title>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Great+Vibes&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="index.html" class="logo">
                <i class="fa-solid fa-building-columns"></i> Oakridge
            </a>
            <nav class="nav-links">
                <a href="index.html">Home</a>
                <a href="about.html" class="active">Our Legacy</a>
                <a href="#academics">Academics</a>
                <a href="#campus">Campus</a>
                <a href="#news">News</a>
                <a href="#admissions" class="btn btn-gold" style="color: white; padding: 10px 24px; margin-left: 10px;">Apply Now</a>
            </nav>
            <div class="menu-btn" id="menuToggle">
                <i class="fa-solid fa-bars"></i>
            </div>
        </div>
    </header>

<section class="inner-hero reveal">
        <div class="container hero-text">
            <h1>Our Legacy & History</h1>
            <div class="breadcrumbs">
                <a href="index.html">Home</a> <span>/</span> About Oakridge
            </div>
        </div>
    </section>

<section class="mv-section">
        <div class="container">
            <div class="mv-grid reveal">
                <div class="mv-card mission">
                    <h3><i class="fa-solid fa-bullseye"></i> Our Mission</h3>
                    <p>To cultivate a dynamic and inclusive learning environment that empowers students to achieve academic excellence, develop strong moral character, and become innovative global citizens prepared to lead in a complex world.</p>
                </div>
                <div class="mv-card vision">
                    <h3><i class="fa-regular fa-eye"></i> Our Vision</h3>
                    <p>To be universally recognized as a premier educational institution that sets the standard for holistic education, fostering lifelong learners who inspire positive change and contribute meaningfully to society.</p>
                </div>
            </div>
        </div>
    </section>

<section class="section-padding" style="padding-top: 50px;">
        <div class="container story-grid">
            <div class="story-content reveal-left">
                <span class="subtitle">A Century of Excellence</span>
                <h2>Forging Leaders Since 1920.</h2>
                <p>Oakridge Academy was founded on the belief that education must encompass the whole person—mind, body, and character. What began as a small preparatory school in a heritage manor has grown into a globally respected institution of academic prestige.</p>
                <p class="highlight">"Education is not the learning of facts, but the training of the mind to think and the heart to feel."</p>
                <p>Over the decades, we have remained steadfast in our commitment to rigorous academics, while continuously evolving our pedagogy to embrace technological advancements and a globalized perspective. Our alumni network stretches across continents, leading in fields of science, arts, politics, and business.</p>
            </div>
            <div class="story-img-wrapper reveal-right">
                <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?q=80&w=2070&auto=format&fit=crop" alt="Historical Campus">
            </div>
        </div>
    </section>

<section class="section-padding timeline-section">
        <div class="container">
            <div class="section-title-wrapper reveal">
                <span class="subtitle">Our Milestones</span>
                <h2 class="title">A Journey of Growth</h2>
                <div class="title-line"></div>
            </div>

<div class="timeline">
                <div class="tl-container tl-left reveal">
                    <div class="tl-content">
                        <div class="tl-year">1920</div>
                        <h4>The Foundation</h4>
                        <p>Oakridge Academy opens its doors with just 45 students, dedicated to providing classical education and moral instruction.</p>
                    </div>
                </div>
                
                <div class="tl-container tl-right reveal reveal-delay-1">
                    <div class="tl-content">
                        <div class="tl-year">1955</div>
                        <h4>Campus Expansion</h4>
                        <p>The academy purchases the surrounding 50 acres, building the iconic grand library and modern science laboratories.</p>
                    </div>
                </div>
                
                <div class="tl-container tl-left reveal">
                    <div class="tl-content">
                        <div class="tl-year">1988</div>
                        <h4>International Recognition</h4>
                        <p>Oakridge becomes an authorized IB World School, integrating a globally focused curriculum for high school students.</p>
                    </div>
                </div>
                
                <div class="tl-container tl-right reveal reveal-delay-1">
                    <div class="tl-content">
                        <div class="tl-year">2010</div>
                        <h4>The Innovation Era</h4>
                        <p>Launch of the state-of-the-art STEM complex and the integration of 1-to-1 digital learning across all grade levels.</p>
                    </div>
                </div>

<div class="tl-container tl-left reveal">
                    <div class="tl-content">
                        <div class="tl-year">2024</div>
                        <h4>A Century Beyond</h4>
                        <p>Celebrating over 100 years of excellence with the opening of our new Global Leadership & Arts Pavilion.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="principal-section bg-gray">
        <div class="container principal-grid">
            <div class="principal-img reveal-left">
                <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1974&auto=format&fit=crop" alt="Headmaster">
                <div class="principal-quote-icon"><i class="fa-solid fa-quote-right"></i></div>
            </div>
            <div class="principal-text reveal-right">
                <span class="subtitle">Message from the Headmaster</span>
                <h2>Welcome to a Community of Excellence.</h2>
                <p>Choosing the right school is one of the most critical decisions a family makes. At Oakridge, we recognize the profound trust placed in us. Our dedicated faculty does not simply teach; they mentor, inspire, and challenge students to exceed their own expectations.</p>
                <p>We invite you to visit our campus, feel the energy in our classrooms, and witness firsthand the environment where future leaders are forged. Together, we will uncover the unique brilliance within your child.</p>
                
                <div class="signature">Arthur Pendelton</div>
                <div class="principal-name">Dr. Arthur Pendelton, Ph.D.</div>
                <div class="principal-title">Headmaster, Oakridge Academy</div>
            </div>
        </div>
    </section>

<section class="values-section">
        <div class="container">
            <div class="section-title-wrapper reveal">
                <span class="subtitle">What We Stand For</span>
                <h2 class="title">Our Core Values</h2>
                <div class="title-line"></div>
            </div>

<div class="values-grid">
                <div class="value-card reveal">
                    <i class="fa-solid fa-book-open-reader value-icon"></i>
                    <h3>Academic Rigor</h3>
                    <p>Fostering intellectual curiosity and a commitment to deep, analytical learning.</p>
                </div>
                <div class="value-card reveal reveal-delay-1">
                    <i class="fa-solid fa-scale-balanced value-icon"></i>
                    <h3>Integrity</h3>
                    <p>Cultivating honesty, ethical behavior, and taking responsibility for one's actions.</p>
                </div>
                <div class="value-card reveal reveal-delay-2">
                    <i class="fa-solid fa-earth-americas value-icon"></i>
                    <h3>Global Perspective</h3>
                    <p>Embracing diversity and understanding our role in an interconnected world.</p>
                </div>
                <div class="value-card reveal reveal-delay-2">
                    <i class="fa-solid fa-hand-holding-heart value-icon"></i>
                    <h3>Compassion</h3>
                    <p>Nurturing empathy, kindness, and a dedication to serving the community.</p>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid reveal">
                <div class="footer-brand">
                    <div class="logo"><i class="fa-solid fa-building-columns" style="color: var(--accent); margin-right: 10px;"></i> Oakridge</div>
                    <p>A prestigious educational institution dedicated to fostering academic excellence, ethical leadership, and global citizenship since 1920.</p>
                    <div class="social-icons">
                        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                        <a href="#"><i class="fa-brands fa-twitter"></i></a>
                        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    </div>
                </div>

<div>
                    <h4 class="footer-heading">Academics</h4>
                    <ul class="footer-links">
                        <li><a href="#">Preparatory School</a></li>
                        <li><a href="#">Middle School</a></li>
                        <li><a href="#">Senior Academy</a></li>
                        <li><a href="#">University Counseling</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="footer-heading">Admissions</h4>
                    <ul class="footer-links">
                        <li><a href="#">How to Apply</a></li>
                        <li><a href="#">Tuition & Fees</a></li>
                        <li><a href="#">Visit Campus</a></li>
                        <li><a href="#">Request Info</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="footer-heading">Contact Us</h4>
                    <ul class="contact-info">
                        <li><i class="fa-solid fa-location-dot"></i> <div>100 Prestige Avenue,<br>Education District, ED 90210</div></li>
                        <li><i class="fa-solid fa-phone"></i> <div>+1 (800) 555-0199</div></li>
                        <li><i class="fa-solid fa-envelope"></i> <div>admissions@oakridge.edu</div></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <p>&copy; 2024 Oakridge Academy. All Rights Reserved. Designed for Excellence.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #1A365D; /* Royal Slate Blue */
            --primary-light: #2B4C7E;
            --accent: #D4AF37; /* Soft Gold */
            --accent-hover: #B5952F;
            --text-dark: #1F2937;
            --text-light: #4B5563;
            --bg-light: #F9FAFB;
            --bg-white: #FFFFFF;
            --font-heading: 'Merriweather', serif;
            --font-body: 'Inter', sans-serif;
            --font-signature: 'Great Vibes', cursive;
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

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

h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--primary); line-height: 1.3; }
        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        .section-padding { padding: 100px 0; }
        .bg-gray { background-color: var(--bg-light); }

/* Buttons */
        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 14px 36px; font-family: var(--font-body); font-weight: 500;
            font-size: 1rem; letter-spacing: 0.5px; border-radius: 4px;
            cursor: pointer; transition: var(--transition); border: 1px solid transparent;
        }
        .btn-gold { background-color: var(--accent); color: #fff; }
        .btn-gold:hover { background-color: var(--accent-hover); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); }

/* --- Animations --- */
        .reveal { opacity: 0; transform: translateY(40px); transition: 1s all cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.2s; }
        .reveal-delay-2 { transition-delay: 0.4s; }
        .reveal-left { opacity: 0; transform: translateX(-50px); transition: 1s all ease; }
        .reveal-left.active { opacity: 1; transform: translateX(0); }
        .reveal-right { opacity: 0; transform: translateX(50px); transition: 1s all ease; }
        .reveal-right.active { opacity: 1; transform: translateX(0); }

/* --- Section Titles --- */
        .section-title-wrapper { text-align: center; margin-bottom: 60px; }
        .subtitle {
            font-family: var(--font-body); color: var(--accent); font-weight: 600;
            text-transform: uppercase; letter-spacing: 3px; font-size: 0.85rem; display: block; margin-bottom: 15px;
        }
        .title { font-size: 2.8rem; margin-bottom: 20px; color: var(--primary); }
        .title-line { width: 60px; height: 3px; background-color: var(--accent); margin: 0 auto; }

/* --- 1. Header Navigation --- */
        header {
            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
            padding: 25px 0; transition: var(--transition); border-bottom: 1px solid rgba(255,255,255,0.1);
            background-color: var(--primary); /* Solid for inner pages */
            box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-bottom: none;
        }
        
        .nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--bg-white); display: flex; align-items: center; gap: 10px; }
        .logo i { color: var(--accent); }

.nav-links { display: flex; gap: 30px; align-items: center; }
        .nav-links a { font-family: var(--font-body); font-weight: 500; color: var(--bg-white); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px;}
        .nav-links a:hover, .nav-links a.active { color: var(--accent); }

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

/* --- 2. Inner Page Hero --- */
        .inner-hero {
            position: relative; height: 60vh; min-height: 400px; max-height: 500px;
            background: linear-gradient(rgba(26, 54, 93, 0.85), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=2070&auto=format&fit=crop') center/cover fixed;
            display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin-top: 80px;
        }
        .hero-text h1 { color: #fff; font-size: 4rem; font-weight: 300; margin-bottom: 15px; }
        .breadcrumbs { font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; }
        .breadcrumbs a { color: var(--accent); font-weight: 600; }
        .breadcrumbs span { margin: 0 10px; color: rgba(255,255,255,0.5); }

/* --- 3. The Story Section --- */
        .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        .story-content h2 { font-size: 2.5rem; margin-bottom: 25px; }
        .story-content p { margin-bottom: 20px; font-size: 1.1rem; }
        .story-content .highlight { color: var(--primary); font-weight: 600; font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; border-left: 3px solid var(--accent); padding-left: 20px; margin: 30px 0; }
        
        .story-img-wrapper { position: relative; padding: 20px 20px 0 0; }
        .story-img-wrapper::before { content: ''; position: absolute; top: 0; right: 0; width: 80%; height: 80%; border: 3px solid var(--accent); z-index: 0; }
        .story-img-wrapper img { position: relative; z-index: 1; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

/* --- 4. Mission & Vision --- */
        .mv-section { background-color: var(--primary); color: #fff; position: relative; }
        .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.2); transform: translateY(-50px); }
        .mv-card { padding: 60px; }
        .mv-card.mission { background-color: var(--accent); color: var(--primary); }
        .mv-card.vision { background-color: var(--bg-white); color: var(--text-light); }
        
        .mv-card h3 { font-size: 2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 15px;}
        .mv-card.mission h3 { color: var(--primary); }
        .mv-card.vision h3 { color: var(--primary); }
        .mv-card i { font-size: 2.5rem; }
        .mv-card p { font-size: 1.1rem; line-height: 1.9; }

/* --- 5. Animated Timeline --- */
        .timeline-section { background: url('https://www.transparenttextures.com/patterns/cubes.png'), var(--bg-light); position: relative; }
        .timeline { position: relative; max-width: 1000px; margin: 0 auto; }
        .timeline::after { content: ''; position: absolute; width: 2px; background-color: var(--accent); top: 0; bottom: 0; left: 50%; margin-left: -1px; }

.tl-container { padding: 10px 50px; position: relative; background-color: inherit; width: 50%; }
        .tl-left { left: 0; }
        .tl-right { left: 50%; }

/* The circles on the timeline */
        .tl-container::after {
            content: ''; position: absolute; width: 20px; height: 20px; right: -10px; background-color: var(--bg-white); border: 4px solid var(--accent); top: 30px; border-radius: 50%; z-index: 1; transition: var(--transition);
        }
        .tl-right::after { left: -10px; }
        .tl-container:hover::after { background-color: var(--accent); box-shadow: 0 0 15px var(--accent); }

.tl-content { padding: 30px; background-color: var(--bg-white); position: relative; border-radius: 4px; border: 1px solid #eee; transition: var(--transition); }
        .tl-content:hover { box-shadow: 0 15px 30px rgba(26, 54, 93, 0.08); transform: translateY(-5px); border-color: var(--accent); }
        
        .tl-year { font-family: var(--font-heading); color: var(--accent); font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; line-height: 1;}
        .tl-content h4 { font-size: 1.3rem; margin-bottom: 10px; }
        .tl-content p { font-size: 0.95rem; }

/* --- 6. Principal's Message --- */
        .principal-section { padding: 100px 0; }
        .principal-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
        .principal-img { position: relative; }
        .principal-img img { width: 100%; border-radius: 4px; }
        .principal-quote-icon { position: absolute; bottom: -20px; right: -20px; background: var(--primary); color: var(--accent); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2rem; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.2);}
        
        .principal-text .subtitle { color: var(--text-light); }
        .principal-text h2 { font-size: 2.5rem; margin-bottom: 30px; }
        .principal-text p { margin-bottom: 20px; font-size: 1.1rem; }
        .signature { font-family: var(--font-signature); font-size: 3rem; color: var(--primary); margin-top: 30px; }
        .principal-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--primary); margin-top: 5px; text-transform: uppercase; letter-spacing: 1px;}
        .principal-title { font-size: 0.9rem; color: var(--text-light); }

/* --- 7. Core Values Grid --- */
        .values-section { background-color: var(--primary); padding: 100px 0; color: #fff; }
        .values-section .title { color: #fff; }
        .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
        
        .value-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(212, 175, 55, 0.2); padding: 40px 30px; text-align: center; transition: var(--transition); border-radius: 4px;}
        .value-card:hover { transform: translateY(-10px); background: rgba(255,255,255,0.08); border-color: var(--accent); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        
        .value-icon { font-size: 3rem; color: var(--accent); margin-bottom: 20px; transition: var(--transition); }
        .value-card:hover .value-icon { transform: scale(1.1); }
        .value-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; }
        .value-card p { font-size: 0.9rem; color: #cbd5e1; }

/* --- 8. Footer --- */
        footer { background-color: #0d1b2f; color: #9ca3af; padding: 80px 0 0; font-family: var(--font-body); margin-top: auto;}
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; }
        .footer-brand .logo { margin-bottom: 25px; font-size: 2rem; color: #fff;}
        .footer-brand p { margin-bottom: 30px; font-size: 0.95rem; line-height: 1.8; }
        .social-icons { display: flex; gap: 15px; }
        .social-icons a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; transition: var(--transition); }
        .social-icons a:hover { background: var(--accent); border-color: var(--accent); }
        .footer-heading { color: #fff; font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; }
        .footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--accent); }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a:hover { color: var(--accent); padding-left: 5px; }
        .contact-info li { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; }
        .contact-info i { color: var(--accent); font-size: 1.2rem; margin-top: 5px; }
        .footer-bottom { background: #08111f; padding: 25px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem; }

/* --- Responsive Design --- */
        @media (max-width: 1024px) {
            .story-grid, .principal-grid { grid-template-columns: 1fr; gap: 50px; }
            .story-img-wrapper { max-width: 600px; margin: 0 auto; }
            .mv-grid { grid-template-columns: 1fr; transform: translateY(-30px); }
            .values-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
        }

@media (max-width: 768px) {
            .menu-btn { display: block; z-index: 1001; position: relative; }
            .nav-links {
                position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
                background: var(--primary); flex-direction: column; justify-content: center;
                transition: var(--transition); box-shadow: -5px 0 20px rgba(0,0,0,0.2); padding: 40px;
            }
            .nav-links.active { right: 0; }
            .nav-links a { font-size: 1.2rem; margin-bottom: 15px; display: block; width: 100%; }

.hero-text h1 { font-size: 2.8rem; }
            .title { font-size: 2.2rem; }
            .mv-card { padding: 40px 30px; }
            .values-grid, .footer-grid { grid-template-columns: 1fr; }
            
            /* Timeline Mobile Fix */
            .timeline::after { left: 31px; }
            .tl-container { width: 100%; padding-left: 70px; padding-right: 0; }
            .tl-right { left: 0%; }
            .tl-left::after, .tl-right::after { left: 21px; }
        }

JavaScript

// 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.replace('fa-bars', 'fa-xmark');
            } else {
                menuIcon.classList.replace('fa-xmark', 'fa-bars');
            }
        });

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

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

// Trigger hero animation immediately on load
        window.onload = () => {
            document.querySelector('.inner-hero').classList.add('active');
        }

About Us Oakridge Academy Template Preview

Download Options