About Modern College 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>Modern College - About Us</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;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>
        <nav class="navbar container">
            <a href="#" class="logo">Modern<span>College</span></a>
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Programs</a></li>
                <li><a href="#">Admissions</a></li>
                <li><a href="#">Campus Life</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="hamburger">
                <i class="fas fa-bars"></i>
            </div>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content container">
            <h1>About Modern College</h1>
            <p>Shaping futures through excellence in education, innovation, and community engagement since 1995.</p>
            <a href="#about" class="btn">Explore More</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Our Story</h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>Pioneering Education Since 1995</h3>
                    <p>Modern College was founded with a vision to revolutionize higher education by combining academic rigor with practical skills development. What began as a small institution with just three programs has grown into a comprehensive college offering over 50 undergraduate and graduate programs across various disciplines.</p>
                    <p>Our commitment to innovation in teaching and learning has consistently placed us among the top educational institutions in the region. We take pride in our diverse student body, representing over 30 countries, which creates a rich multicultural learning environment.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="College building">
                </div>
            </div>
        </div>
    </section>

<section class="mission">
        <div class="container">
            <div class="section-title">
                <h2>Our Mission & Vision</h2>
            </div>
            <div class="mission-content">
                <div class="mission-image">
                    <img src="https://images.pexels.com/photos/1454360/pexels-photo-1454360.jpeg" alt="Students studying">
                </div>
                <div class="mission-text">
                    <h3>Empowering Future Leaders</h3>
                    <p>Our mission is to provide a transformative educational experience that prepares students to become critical thinkers, ethical leaders, and engaged citizens in a global society. We achieve this through innovative teaching, cutting-edge research, and meaningful community partnerships.</p>
                    <p>Our vision is to be recognized as a premier institution that sets the standard for excellence in higher education, known for our commitment to student success, faculty innovation, and community impact.</p>
                    <h3 style="margin-top: 1.5rem;">Our Core Principles</h3>
                    <p>We believe in fostering intellectual curiosity, promoting diversity and inclusion, encouraging collaborative learning, and preparing students for lifelong success in their chosen fields.</p>
                </div>
            </div>
        </div>
    </section>

<section class="values">
        <div class="container">
            <div class="section-title">
                <h2>Our Values</h2>
            </div>
            <div class="values-grid">
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3>Innovation</h3>
                    <p>We embrace creative thinking and new approaches to solve complex problems and improve educational outcomes.</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3>Community</h3>
                    <p>We foster a supportive environment where students, faculty, and staff work together toward common goals.</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3>Excellence</h3>
                    <p>We maintain the highest standards in teaching, research, and service to our students and society.</p>
                </div>
                <div class="value-card">
                    <div class="value-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <h3>Global Perspective</h3>
                    <p>We prepare students to thrive in an interconnected world with diverse perspectives and experiences.</p>
                </div>
            </div>
        </div>
    </section>

<section class="campus">
        <div class="container">
            <div class="section-title">
                <h2>Our Campus</h2>
            </div>
            <div class="campus-slider">
                <div class="campus-card">
                    <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Main campus building">
                    <div class="campus-info">
                        <h3>Main Academic Building</h3>
                        <p>Our flagship building houses state-of-the-art classrooms, lecture halls, and faculty offices.</p>
                    </div>
                </div>
                <div class="campus-card">
                    <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Library">
                    <div class="campus-info">
                        <h3>Learning Resource Center</h3>
                        <p>A modern library with over 500,000 volumes, study spaces, and digital resources.</p>
                    </div>
                </div>
                <div class="campus-card">
                    <img src="https://images.unsplash.com/photo-1546519638-68e109498ffc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1490&q=80" alt="Sports complex">
                    <div class="campus-info">
                        <h3>Athletic Complex</h3>
                        <p>Olympic-standard facilities for sports, fitness, and recreational activities.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="faculty">
        <div class="container">
            <div class="section-title">
                <h2>Meet Our Faculty</h2>
            </div>
            <div class="faculty-grid">
                <div class="faculty-card">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Professor Smith">
                    </div>
                    <div class="faculty-info">
                        <h3>Dr. Sarah Smith</h3>
                        <p>Dean of Sciences</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                <div class="faculty-card">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Professor Johnson">
                    </div>
                    <div class="faculty-info">
                        <h3>Prof. Michael Johnson</h3>
                        <p>Head of Engineering</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                <div class="faculty-card">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" alt="Professor Lee">
                    </div>
                    <div class="faculty-info">
                        <h3>Dr. Jennifer Lee</h3>
                        <p>Director of Arts</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
                <div class="faculty-card">
                    <div class="faculty-img">
                        <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Professor Rodriguez">
                    </div>
                    <div class="faculty-info">
                        <h3>Prof. Carlos Rodriguez</h3>
                        <p>Business Department Chair</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="achievements">
        <div class="container">
            <div class="section-title">
                <h2>By The Numbers</h2>
            </div>
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number">10,000+</div>
                    <div class="stat-text">Alumni Worldwide</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">95%</div>
                    <div class="stat-text">Graduate Employment Rate</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">50+</div>
                    <div class="stat-text">Academic Programs</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">30</div>
                    <div class="stat-text">Countries Represented</div>
                </div>
            </div>
        </div>
    </section>

<section class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <p>We'd love to hear from you! Whether you're a prospective student, current student, alumni, or community member, our team is here to assist you.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Address</h4>
                                <p>123 Education Avenue, Knowledge City, KC 12345</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Phone</h4>
                                <p>(123) 456-7890</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@moderncollege.edu</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    Modern<span>College</span>
                </div>
                <div class="footer-links">
                    <a href="#">About</a>
                    <a href="#">Programs</a>
                    <a href="#">Admissions</a>
                    <a href="#">Research</a>
                    <a href="#">Alumni</a>
                    <a href="#">News</a>
                </div>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
                <p class="copyright">© 2023 Modern College. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --secondary-color: #FFC000;
            --dark-color: #333;
            --light-color: #f8f9fa;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

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

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
            overflow-x: hidden;
        }

a {
            text-decoration: none;
            color: var(--dark-color);
        }

ul {
            list-style: none;
        }

img {
            max-width: 100%;
            height: auto;
        }

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

/* Header */
        header {
            background-color: white;
            box-shadow: var(--shadow);
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark-color);
        }

.logo span {
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links a {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

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

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.pexels.com/photos/356065/pexels-photo-356065.jpeg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            padding-top: 80px;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease forwards;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

.btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--dark-color);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

/* About Section */
        .about {
            padding: 5rem 0;
            background-color: var(--light-color);
        }

.section-title {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            display: inline-block;
            position: relative;
        }

.section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary-color);
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 3rem;
        }

.about-text {
            flex: 1;
            opacity: 0;
            transform: translateX(-20px);
            animation: fadeInRight 1s ease forwards 0.5s;
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }

.about-text p {
            margin-bottom: 1.5rem;
        }

.about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateX(20px);
            animation: fadeInLeft 1s ease forwards 0.5s;
        }

/* Mission Section */
        .mission {
            padding: 5rem 0;
            background-color: white;
        }

.mission-content {
            display: flex;
            align-items: center;
            gap: 3rem;
        }

.mission-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateX(-20px);
            animation: fadeInLeft 1s ease forwards;
        }

.mission-text {
            flex: 1;
            opacity: 0;
            transform: translateX(20px);
            animation: fadeInRight 1s ease forwards 0.5s;
        }

.mission-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }

/* Values Section */
        .values {
            padding: 5rem 0;
            background-color: var(--light-color);
        }

.values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.value-card {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
            opacity: 0;
            transform: translateY(20px);
        }

.value-card:nth-child(1) {
            animation: fadeInUp 1s ease forwards 0.2s;
        }

.value-card:nth-child(2) {
            animation: fadeInUp 1s ease forwards 0.4s;
        }

.value-card:nth-child(3) {
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.value-card:nth-child(4) {
            animation: fadeInUp 1s ease forwards 0.8s;
        }

.value-card:hover {
            transform: translateY(-10px);
            background-color: var(--primary-color);
        }

.value-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

.value-card:hover .value-icon {
            color: var(--dark-color);
        }

.value-card h3 {
            margin-bottom: 1rem;
        }

/* Campus Section */
        .campus {
            padding: 5rem 0;
            background-color: white;
        }

.campus-slider {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding: 1rem 0;
            scroll-snap-type: x mandatory;
        }

.campus-slider::-webkit-scrollbar {
            height: 8px;
        }

.campus-slider::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            border-radius: 10px;
        }

.campus-card {
            min-width: 300px;
            scroll-snap-align: start;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
            opacity: 0;
            transform: scale(0.9);
            animation: fadeInScale 1s ease forwards;
        }

.campus-card:nth-child(1) {
            animation-delay: 0.2s;
        }

.campus-card:nth-child(2) {
            animation-delay: 0.4s;
        }

.campus-card:nth-child(3) {
            animation-delay: 0.6s;
        }

.campus-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

.campus-info {
            padding: 1.5rem;
        }

.campus-info h3 {
            margin-bottom: 0.5rem;
        }

/* Faculty Section */
        .faculty {
            padding: 5rem 0;
            background-color: var(--light-color);
        }

.faculty-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.faculty-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            opacity: 0;
            transform: translateY(20px);
        }

.faculty-card:nth-child(1) {
            animation: fadeInUp 1s ease forwards 0.2s;
        }

.faculty-card:nth-child(2) {
            animation: fadeInUp 1s ease forwards 0.4s;
        }

.faculty-card:nth-child(3) {
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.faculty-card:nth-child(4) {
            animation: fadeInUp 1s ease forwards 0.8s;
        }

.faculty-card:hover {
            transform: translateY(-10px);
        }

.faculty-img {
            height: 250px;
            overflow: hidden;
        }

.faculty-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.faculty-card:hover .faculty-img img {
            transform: scale(1.1);
        }

.faculty-info {
            padding: 1.5rem;
            text-align: center;
        }

.faculty-info h3 {
            margin-bottom: 0.5rem;
        }

.faculty-info p {
            color: #777;
            font-size: 0.9rem;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }

.social-links a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--light-color);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.social-links a:hover {
            background-color: var(--primary-color);
            color: white;
        }

/* Achievements Section */
        .achievements {
            padding: 5rem 0;
            background-color: white;
        }

.stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

.stat-item {
            padding: 2rem;
            opacity: 0;
            transform: translateY(20px);
        }

.stat-item:nth-child(1) {
            animation: fadeInUp 1s ease forwards 0.2s;
        }

.stat-item:nth-child(2) {
            animation: fadeInUp 1s ease forwards 0.4s;
        }

.stat-item:nth-child(3) {
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.stat-item:nth-child(4) {
            animation: fadeInUp 1s ease forwards 0.8s;
        }

.stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

.stat-text {
            font-size: 1.2rem;
            font-weight: 500;
        }

/* Contact Section */
        .contact {
            padding: 5rem 0;
            background-color: var(--light-color);
        }

.contact-container {
            display: flex;
            gap: 3rem;
        }

.contact-info {
            flex: 1;
            opacity: 0;
            transform: translateX(-20px);
            animation: fadeInLeft 1s ease forwards;
        }

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }

.contact-details {
            margin-bottom: 2rem;
        }

.contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

.contact-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.contact-form {
            flex: 1;
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateX(20px);
            animation: fadeInRight 1s ease forwards 0.5s;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Poppins', sans-serif;
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 3rem 0;
            text-align: center;
        }

.footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.footer-logo {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

.footer-logo span {
            color: var(--primary-color);
        }

.footer-links {
            display: flex;
            gap: 2rem;
            margin-bottom: 2rem;
        }

.footer-links a {
            color: white;
            transition: var(--transition);
        }

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

.social-icons {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.social-icons a {
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.social-icons a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
        }

.copyright {
            font-size: 0.9rem;
            color: #aaa;
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-content, .mission-content, .contact-container {
                flex-direction: column;
            }

.about-image, .mission-image {
                order: -1;
            }

.hero h1 {
                font-size: 2.8rem;
            }
        }

@media (max-width: 768px) {
            .hamburger {
                display: block;
            }

.nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                padding: 2rem 0;
                transition: var(--transition);
                box-shadow: var(--shadow);
            }

.nav-links.active {
                left: 0;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1rem;
            }

.section-title h2 {
                font-size: 2rem;
            }

.stat-number {
                font-size: 2.5rem;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

.btn {
                padding: 0.6rem 1.5rem;
            }

.section-title h2 {
                font-size: 1.8rem;
            }

.footer-links {
                flex-direction: column;
                gap: 1rem;
            }
        }

JavaScript

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

hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });

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

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Animation on scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.value-card, .faculty-card, .stat-item, .campus-card');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if(elementPosition < screenPosition) {
                    element.style.animation = element.style.animation;
                }
            });
        };

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

About Modern College Template Preview

Download Options