Modern College Banner 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 Banner</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
</head>
<body>
    <div class="banner-container">
        
        <div class="bg-circle circle-1"></div>
        <div class="bg-circle circle-2"></div>
        <div class="bg-circle circle-3"></div>
        <div class="bg-circle circle-4"></div>

<div class="floating-element book">
            <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Book">
        </div>
        <div class="floating-element microscope">
            <img src="https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Microscope">
        </div>
        <div class="floating-element cap">
            <img src="https://plus.unsplash.com/premium_photo-1683749808830-5ece949ce8e4?q=80&w=415&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Graduation Cap">
        </div>

<div class="banner-header">
            <img src="https://images.unsplash.com/photo-1568792923760-d70635a89fdc?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="College Logo" class="college-logo animate-glow">
            <h1 class="college-name">Prestige University</h1>
            <p class="college-motto">"Empowering Minds, Transforming Futures Through Excellence in Education"</p>
            
            
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number animate-count" data-target="150">0</div>
                    <div class="stat-label">Programs</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number animate-count" data-target="25000">0</div>
                    <div class="stat-label">Students</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number animate-count" data-target="1200">0</div>
                    <div class="stat-label">Faculty</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number animate-count" data-target="85">0</div>
                    <div class="stat-label">Countries</div>
                </div>
            </div>

<div class="cta-buttons">
                <a href="#" class="cta-button primary-btn animate-bounce">Apply Now</a>
                <a href="#" class="cta-button secondary-btn">Explore Programs</a>
                <a href="#" class="cta-button secondary-btn">Virtual Tour</a>
            </div>
        </div>

<div class="featured-images">
            <div class="image-card">
                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Students Studying">
                <div class="image-label">Campus Life</div>
            </div>
            <div class="image-card">
                <img src="https://images.unsplash.com/photo-1658235081483-8f06aa0882cf?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Graduation">
                <div class="image-label">Graduation</div>
            </div>
            <div class="image-card">
                <img src="https://plus.unsplash.com/premium_photo-1703701579660-8481915a7991?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Library">
                <div class="image-label">Library</div>
            </div>
            <div class="image-card">
                <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Laboratory">
                <div class="image-label">Laboratory</div>
            </div>
            <div class="image-card">
                <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Classroom">
                <div class="image-label">Classroom</div>
            </div>
        </div>

<div class="countdown-container">
            <div class="countdown-item">
                <div class="countdown-number" id="days">00</div>
                <div class="countdown-label">Days</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="hours">00</div>
                <div class="countdown-label">Hours</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="minutes">00</div>
                <div class="countdown-label">Minutes</div>
            </div>
            <div class="countdown-item">
                <div class="countdown-number" id="seconds">00</div>
                <div class="countdown-label">Seconds</div>
            </div>
        </div>

<div class="testimonial animate-wave">
            <p class="testimonial-text">Prestige University provided me with not just education, but an experience that shaped my career and personality. The faculty and facilities are world-class.</p>
            <p class="testimonial-author">- Sarah Johnson, Computer Science '20</p>
        </div>

<div class="news-ticker">
            <div class="ticker-container">
                <span class="ticker-label">Latest News</span>
                <span class="ticker-item">? Graduation ceremony scheduled for June 15th</span>
                <span class="ticker-item">? University ranked #1 in research excellence</span>
                <span class="ticker-item">? New scholarship program announced</span>
                <span class="ticker-item">? Groundbreaking research published in Nature Journal</span>
                <span class="ticker-item">? International student applications now open</span>
            </div>
        </div>
    </div>

</body>
</html>

CSS

:root {
            --primary-color: #1a73e8;
            --secondary-color: #0d47a1;
            --accent-color: #4285f4;
            --text-color: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.2);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            overflow-x: hidden;
        }

.banner-container {
            width: 100%;
            min-height: 100vh;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
            padding: 2rem;
            text-align: center;
        }

/* Animated Background Elements */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 15s infinite ease-in-out;
        }

.circle-1 {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -100px;
            animation-delay: 0s;
        }

.circle-2 {
            width: 200px;
            height: 200px;
            bottom: -50px;
            right: -50px;
            animation-delay: 2s;
        }

.circle-3 {
            width: 150px;
            height: 150px;
            top: 30%;
            right: 10%;
            animation-delay: 4s;
        }

.circle-4 {
            width: 250px;
            height: 250px;
            bottom: 20%;
            left: 15%;
            animation-delay: 6s;
        }

/* Header Content */
        .banner-header {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

.college-logo {
            width: 120px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 1.5rem;
            animation: pulse 2s infinite alternate;
            filter: drop-shadow(0 4px 8px var(--shadow-color));
        }

.college-name {
            font-size: clamp(2rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 4px 8px var(--shadow-color);
            animation: slideInDown 1s ease-out;
        }

.college-motto {
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 300;
            margin-bottom: 2rem;
            max-width: 800px;
            animation: fadeIn 2s ease-in;
        }

/* Stats Section */
        .stats-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
            margin: 3rem 0;
            animation: fadeInUp 1.5s ease-out;
        }

.stat-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border-radius: 15px;
            min-width: 150px;
            box-shadow: 0 8px 16px var(--shadow-color);
            transition: transform 0.3s ease;
            animation: zoomIn 1s ease-out;
        }

.stat-item:hover {
            transform: translateY(-10px) scale(1.05);
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(to right, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.stat-label {
            font-size: 1rem;
            font-weight: 400;
            opacity: 0.9;
        }

/* CTA Buttons */
        .cta-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 2rem;
            animation: fadeIn 2.5s ease-in;
        }

.cta-button {
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 4px 8px var(--shadow-color);
        }

.primary-btn {
            background: var(--text-color);
            color: var(--primary-color);
        }

.primary-btn:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-3px);
            box-shadow: 0 6px 12px var(--shadow-color);
        }

.secondary-btn {
            background: transparent;
            color: var(--text-color);
            border: 2px solid var(--text-color);
        }

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

/* Featured Images */
        .featured-images {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 3rem 0;
            animation: slideInUp 1.5s ease-out;
        }

.image-card {
            width: 200px;
            height: 150px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 8px 16px var(--shadow-color);
            transition: all 0.3s ease;
            position: relative;
        }

.image-card:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 12px 24px var(--shadow-color);
        }

.image-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

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

.image-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 0.5rem;
            font-size: 0.8rem;
            text-align: center;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

.image-card:hover .image-label {
            transform: translateY(0);
        }

/* Testimonial */
        .testimonial {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 16px var(--shadow-color);
            animation: fadeIn 3s ease-in;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 1rem;
            position: relative;
        }

.testimonial-text::before,
        .testimonial-text::after {
            content: '"';
            font-size: 2rem;
            color: rgba(255, 255, 255, 0.5);
            position: absolute;
        }

.testimonial-text::before {
            top: -10px;
            left: -20px;
        }

.testimonial-text::after {
            bottom: -30px;
            right: -20px;
        }

.testimonial-author {
            font-weight: 600;
            text-align: right;
        }

/* News Ticker */
        .news-ticker {
            width: 100%;
            max-width: 800px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            padding: 0.8rem 1rem;
            margin: 2rem auto;
            overflow: hidden;
            position: relative;
            animation: fadeIn 3.5s ease-in;
        }

.ticker-container {
            display: flex;
            align-items: center;
            white-space: nowrap;
            animation: ticker 30s linear infinite;
        }

.ticker-label {
            background: var(--accent-color);
            color: white;
            padding: 0.2rem 0.8rem;
            border-radius: 20px;
            margin-right: 1rem;
            font-size: 0.8rem;
            font-weight: 600;
        }

.ticker-item {
            margin-right: 3rem;
            font-size: 0.9rem;
        }

/* Floating Elements */
        .floating-element {
            position: absolute;
            opacity: 0.7;
            z-index: 1;
            animation: float 8s infinite ease-in-out;
        }

.book {
            top: 20%;
            left: 5%;
            width: 40px;
            animation-delay: 1s;
        }

.microscope {
            bottom: 25%;
            right: 8%;
            width: 50px;
            animation-delay: 2s;
        }

.cap {
            top: 15%;
            right: 10%;
            width: 35px;
            animation-delay: 3s;
        }

.floating-element img {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 4px 8px var(--shadow-color));
        }

/* Countdown Timer */
        .countdown-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 2rem 0;
            animation: zoomIn 2s ease-out;
        }

.countdown-item {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            padding: 1rem;
            min-width: 80px;
            text-align: center;
            box-shadow: 0 4px 8px var(--shadow-color);
        }

.countdown-number {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.3rem;
        }

.countdown-label {
            font-size: 0.8rem;
            opacity: 0.8;
        }

/* Responsive Adjustments */
        @media (max-width: 768px) {
            .banner-container {
                padding: 1rem;
            }

.college-logo {
                width: 80px;
                height: 80px;
            }

.stats-container {
                gap: 1rem;
            }

.stat-item {
                min-width: 120px;
                padding: 1rem;
            }

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

.featured-images {
                gap: 0.5rem;
            }

.image-card {
                width: 150px;
                height: 100px;
            }

.countdown-container {
                gap: 0.5rem;
            }

.countdown-item {
                min-width: 60px;
                padding: 0.5rem;
            }

.countdown-number {
                font-size: 1.5rem;
            }
        }

@media (max-width: 480px) {
            .college-logo {
                width: 60px;
                height: 60px;
            }

.stats-container {
                flex-direction: column;
                align-items: center;
            }

.stat-item {
                width: 80%;
            }

.cta-buttons {
                flex-direction: column;
                align-items: center;
            }

.cta-button {
                width: 100%;
                text-align: center;
            }

.featured-images {
                flex-direction: column;
                align-items: center;
            }

.image-card {
                width: 100%;
                max-width: 250px;
                height: 150px;
            }

.countdown-container {
                flex-wrap: wrap;
            }

.countdown-item {
                min-width: 70px;
            }
        }

/* Animations */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.1);
            }
        }

@keyframes slideInDown {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

@keyframes slideInUp {
            0% {
                transform: translateY(100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

@keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

@keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes zoomIn {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

@keyframes ticker {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

@keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }

@keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-5px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(5px);
            }
        }

@keyframes flip {
            0% {
                transform: perspective(400px) rotateY(0);
            }
            50% {
                transform: perspective(400px) rotateY(180deg);
            }
            100% {
                transform: perspective(400px) rotateY(360deg);
            }
        }

@keyframes glow {
            0% {
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            }
            100% {
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }
        }

@keyframes wave {
            0%, 100% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(5deg);
            }
            75% {
                transform: rotate(-5deg);
            }
        }

/* Special Animation Classes */
        .animate-rotate {
            animation: rotate 4s linear infinite;
        }

.animate-bounce {
            animation: bounce 2s infinite;
        }

.animate-shake {
            animation: shake 0.5s;
        }

.animate-flip {
            animation: flip 2s;
        }

.animate-glow {
            animation: glow 2s infinite;
        }

.animate-wave {
            animation: wave 2s infinite;
            transform-origin: center bottom;
        }

JavaScript

// Countdown Timer
        function updateCountdown() {
            const now = new Date();
            const nextMonth = new Date();
            nextMonth.setMonth(now.getMonth() + 1);
            nextMonth.setDate(1);
            nextMonth.setHours(0, 0, 0, 0);
            
            const diff = nextMonth - now;
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            document.getElementById('days').textContent = days.toString().padStart(2, '0');
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
        }
        
        setInterval(updateCountdown, 1000);
        updateCountdown();

// Animated Counting Numbers
        function animateCounters() {
            const counters = document.querySelectorAll('.animate-count');
            const speed = 200;
            
            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const increment = target / speed;
                
                if (count < target) {
                    counter.innerText = Math.ceil(count + increment);
                    setTimeout(animateCounters, 1);
                } else {
                    counter.innerText = target;
                }
            });
        }

// Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1
        };

document.querySelectorAll('.animate-count, .stats-container, .featured-images, .testimonial, .news-ticker').forEach(el => {
            observer.observe(el);
        });

// Random animation for stats on hover
        const statItems = document.querySelectorAll('.stat-item');
        const animations = ['animate-rotate', 'animate-bounce', 'animate-shake', 'animate-flip', 'animate-glow', 'animate-wave'];
        
        statItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                const randomAnim = animations[Math.floor(Math.random() * animations.length)];
                item.classList.add(randomAnim);
                
                setTimeout(() => {
                    item.classList.remove(randomAnim);
                }, 1000);
            });
        });

// 15 Animations Included:
        // 1. Floating background circles
        // 2. Pulsing logo
        // 3. Slide down college name
        // 4. Fade in motto
        // 5. Fade up stats container
        // 6. Zoom in stat items
        // 7. Bounce on primary button
        // 8. Slide up featured images
        // 9. Hover scale on image cards
        // 10. Slide up image labels on hover
        // 11. Fade in testimonial
        // 12. News ticker animation
        // 13. Countdown timer
        // 14. Counting numbers animation
        // 15. Random animations on stat hover

// 15 Features Included:
        // 1. Fully responsive design
        // 2. Animated background elements
        // 3. College logo with pulse effect
        // 4. Stats section with hover effects
        // 5. Call-to-action buttons
        // 6. Featured images gallery
        // 7. Image hover effects with labels
        // 8. Countdown timer to next event
        // 9. Testimonial section
        // 10. News ticker with latest updates
        // 11. Floating decorative elements
        // 12. Interactive hover animations
        // 13. Smooth transitions
        // 14. Mobile-first approach
        // 15. Accessibility considerations

Modern College Banner Template Preview

Download Options