School Program Catalog Card | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Academic Pathways | Program Catalog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        
        <div class="header">
            <h1>Academic Pathways</h1>
            <p>Discover our specialized curricula designed to cultivate intellectual curiosity, critical thinking, and holistic development. Each program offers a unique educational journey tailored to different learning styles and aspirations.</p>
            <div class="header-decoration">
                <div class="decoration-dot"></div>
                <div class="decoration-dot"></div>
                <div class="decoration-dot"></div>
            </div>
        </div>

<div class="cards-container">
            
            <div class="program-card stem">
                <div class="card-content">
                    <div class="card-header">
                        <div class="program-icon">
                            <i class="fas fa-microscope"></i>
                        </div>
                        <div class="program-name-grade">
                            <h2 class="program-name">STEM Innovators Program</h2>
                            <span class="grade-range"><i class="fas fa-graduation-cap"></i> Grades 9-12</span>
                        </div>
                    </div>

<div class="highlights-section">
                        <div class="section-title">
                            <i class="fas fa-star"></i> Key Highlights
                        </div>
                        <ul class="highlights-list">
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-flask"></i>
                                </div>
                                <span class="highlight-text">Project-based learning with industry applications and mentorship</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-robot"></i>
                                </div>
                                <span class="highlight-text">State-of-the-art laboratories, maker spaces, and prototyping equipment</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-handshake"></i>
                                </div>
                                <span class="highlight-text">Partnerships with leading tech companies and research institutions</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <span class="highlight-text">Annual science fair, robotics competitions, and innovation showcases</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <span class="highlight-text">AP and honors courses across all STEM disciplines with college credit options</span>
                            </li>
                        </ul>
                    </div>

<div class="cta-section">
                        <button class="cta-button">
                            Explore STEM Program <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="program-card arts">
                <div class="card-content">
                    <div class="card-header">
                        <div class="program-icon">
                            <i class="fas fa-palette"></i>
                        </div>
                        <div class="program-name-grade">
                            <h2 class="program-name">Liberal Arts & Humanities</h2>
                            <span class="grade-range"><i class="fas fa-graduation-cap"></i> Grades 6-12</span>
                        </div>
                    </div>

<div class="highlights-section">
                        <div class="section-title">
                            <i class="fas fa-star"></i> Key Highlights
                        </div>
                        <ul class="highlights-list">
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-globe-americas"></i>
                                </div>
                                <span class="highlight-text">Interdisciplinary exploration of human culture, thought, and expression</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-pen-fancy"></i>
                                </div>
                                <span class="highlight-text">Advanced writing workshops and critical thinking seminars</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-plane"></i>
                                </div>
                                <span class="highlight-text">Study abroad programs and cultural immersion opportunities</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-comments"></i>
                                </div>
                                <span class="highlight-text">Debate Society, Model UN, and public speaking development</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-book-open"></i>
                                </div>
                                <span class="highlight-text">Integration of visual arts, literature, history, and philosophy</span>
                            </li>
                        </ul>
                    </div>

<div class="cta-section">
                        <button class="cta-button">
                            Discover Curriculum <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="program-card ib">
                <div class="card-content">
                    <div class="card-header">
                        <div class="program-icon">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div class="program-name-grade">
                            <h2 class="program-name">International Baccalaureate</h2>
                            <span class="grade-range"><i class="fas fa-graduation-cap"></i> Grades 11-12</span>
                        </div>
                    </div>

<div class="highlights-section">
                        <div class="section-title">
                            <i class="fas fa-star"></i> Key Highlights
                        </div>
                        <ul class="highlights-list">
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-award"></i>
                                </div>
                                <span class="highlight-text">Globally recognized diploma program with university articulation</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-brain"></i>
                                </div>
                                <span class="highlight-text">Theory of Knowledge (TOK) and 4,000-word Extended Essay</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-hands-helping"></i>
                                </div>
                                <span class="highlight-text">Creativity, Activity, Service (CAS) experiential learning</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <span class="highlight-text">Emphasis on international-mindedness and intercultural understanding</span>
                            </li>
                            <li>
                                <div class="highlight-icon">
                                    <i class="fas fa-university"></i>
                                </div>
                                <span class="highlight-text">Comprehensive preparation for top universities worldwide</span>
                            </li>
                        </ul>
                    </div>

<div class="cta-section">
                        <button class="cta-button">
                            Learn About IB <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

</div>

</body>
</html>

CSS

:root {
            --primary-50: #eff6ff;
            --primary-100: #dbeafe;
            --primary-500: #3b82f6;
            --primary-600: #2563eb;
            --primary-700: #1d4ed8;
            --secondary-500: #8b5cf6;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --stem-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            --arts-gradient: linear-gradient(135deg, #d97706 0%, #92400e 100%);
            --ib-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
            --radius-card: 20px;
            --radius-inner: 12px;
            --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            color: var(--gray-700);
            min-height: 100vh;
            padding: 2rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.container {
            max-width: 1300px;
            width: 100%;
        }

/* Header */
        .header {
            text-align: center;
            margin-bottom: 4rem;
            position: relative;
        }

.header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.2rem;
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: 1.2rem;
            letter-spacing: -0.02em;
            position: relative;
            display: inline-block;
        }

.header h1::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, var(--primary-500), var(--secondary-500));
            border-radius: 2px;
        }

.header p {
            font-size: 1.2rem;
            color: var(--gray-600);
            line-height: 1.7;
            max-width: 700px;
            margin: 0 auto 2rem;
            font-weight: 400;
        }

.header-decoration {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

.decoration-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-500);
            opacity: 0.6;
        }

.decoration-dot:nth-child(2) {
            background: var(--secondary-500);
        }

.decoration-dot:nth-child(3) {
            background: #10b981;
        }

/* Cards Layout */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 2.5rem;
            margin-bottom: 4rem;
        }

/* Card Design */
        .program-card {
            background: white;
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: var(--transition-standard);
            position: relative;
            border: 1px solid transparent;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

.program-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            z-index: 2;
        }

.program-card.stem::before {
            background: var(--stem-gradient);
        }

.program-card.arts::before {
            background: var(--arts-gradient);
        }

.program-card.ib::before {
            background: var(--ib-gradient);
        }

.program-card:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-lg);
            border-color: var(--gray-200);
        }

.card-content {
            padding: 2.2rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

/* Card Header */
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.8rem;
        }

.program-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-inner);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: white;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-standard);
        }

.program-card:hover .program-icon {
            transform: scale(1.05) rotate(5deg);
        }

.stem .program-icon {
            background: var(--stem-gradient);
        }

.arts .program-icon {
            background: var(--arts-gradient);
        }

.ib .program-icon {
            background: var(--ib-gradient);
        }

.program-name-grade {
            flex-grow: 1;
            margin-left: 1.5rem;
        }

.program-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--gray-800);
            line-height: 1.3;
            margin-bottom: 0.5rem;
        }

.grade-range {
            display: inline-flex;
            align-items: center;
            background: var(--gray-50);
            color: var(--gray-700);
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            border: 1px solid var(--gray-200);
        }

.grade-range i {
            margin-right: 0.5rem;
            font-size: 0.75rem;
        }

/* Highlights */
        .highlights-section {
            margin-bottom: 2rem;
        }

.section-title {
            display: flex;
            align-items: center;
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-600);
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

.section-title i {
            margin-right: 0.7rem;
            font-size: 0.9rem;
        }

.stem .section-title {
            color: var(--primary-700);
        }

.arts .section-title {
            color: #92400e;
        }

.ib .section-title {
            color: #047857;
        }

.highlights-list {
            list-style: none;
        }

.highlights-list li {
            padding: 0.75rem 0;
            color: var(--gray-700);
            display: flex;
            align-items: flex-start;
            border-bottom: 1px solid var(--gray-100);
            transition: var(--transition-standard);
        }

.highlights-list li:last-child {
            border-bottom: none;
        }

.highlights-list li:hover {
            transform: translateX(5px);
            color: var(--gray-800);
        }

.highlight-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            margin-right: 1rem;
            flex-shrink: 0;
            font-size: 0.75rem;
        }

.stem .highlight-icon {
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary-700);
        }

.arts .highlight-icon {
            background-color: rgba(217, 119, 6, 0.1);
            color: #92400e;
        }

.ib .highlight-icon {
            background-color: rgba(16, 185, 129, 0.1);
            color: #047857;
        }

.highlight-text {
            line-height: 1.5;
            font-size: 0.98rem;
        }

/* CTA Button */
        .cta-section {
            margin-top: auto;
            padding-top: 1.5rem;
            border-top: 1px solid var(--gray-100);
        }

.cta-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 1rem;
            border-radius: var(--radius-inner);
            font-weight: 600;
            font-size: 1rem;
            transition: var(--transition-standard);
            cursor: pointer;
            border: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            transition: opacity 0.3s ease;
            opacity: 1;
        }

.cta-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.stem .cta-button {
            color: white;
        }

.stem .cta-button::before {
            background: var(--stem-gradient);
        }

.stem .cta-button::after {
            background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%);
        }

.arts .cta-button {
            color: white;
        }

.arts .cta-button::before {
            background: var(--arts-gradient);
        }

.arts .cta-button::after {
            background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
        }

.ib .cta-button {
            color: white;
        }

.ib .cta-button::before {
            background: var(--ib-gradient);
        }

.ib .cta-button::after {
            background: linear-gradient(135deg, #047857 0%, #10b981 100%);
        }

.cta-button:hover::before {
            opacity: 0;
        }

.cta-button:hover::after {
            opacity: 1;
        }

.cta-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

.cta-button i {
            margin-left: 0.7rem;
            transition: transform 0.3s ease;
        }

.cta-button:hover i {
            transform: translateX(4px);
        }

/* Footer */
        .footer {
            text-align: center;
            padding-top: 3rem;
            margin-top: 2rem;
            border-top: 1px solid var(--gray-200);
            width: 100%;
            max-width: 900px;
        }

.footer p {
            color: var(--gray-600);
            font-size: 0.95rem;
            margin-bottom: 0.5rem;
        }

.footer-contact {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 1.5rem;
        }

.contact-link {
            display: flex;
            align-items: center;
            color: var(--gray-600);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s ease;
        }

.contact-link:hover {
            color: var(--primary-600);
        }

.contact-link i {
            margin-right: 0.5rem;
            font-size: 0.9rem;
        }

/* Responsive */
        @media (max-width: 1200px) {
            .cards-container {
                grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
                gap: 2rem;
            }
        }

@media (max-width: 768px) {
            body {
                padding: 1.5rem 1rem;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
            
            .header p {
                font-size: 1.1rem;
            }
            
            .cards-container {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            
            .card-content {
                padding: 1.8rem;
            }
            
            .footer-contact {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }
        }

@media (max-width: 480px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .program-name {
                font-size: 1.6rem;
            }
            
            .card-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .program-icon {
                margin-bottom: 1rem;
            }
            
            .program-name-grade {
                margin-left: 0;
            }
        }

JavaScript

// Enhanced interactivity
        document.querySelectorAll('.cta-button').forEach(button => {
            button.addEventListener('click', function() {
                const card = this.closest('.program-card');
                const programName = card.querySelector('.program-name').textContent;
                
                // Visual feedback
                this.style.transform = 'scale(0.98)';
                
                // Create a ripple effect
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = event.clientX - rect.left - size/2;
                const y = event.clientY - rect.top - size/2;
                
                ripple.style.cssText = `
                    position: absolute;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.7);
                    transform: scale(0);
                    animation: ripple-animation 0.6s linear;
                    width: ${size}px;
                    height: ${size}px;
                    top: ${y}px;
                    left: ${x}px;
                `;
                
                this.appendChild(ripple);
                
                // Remove ripple after animation
                setTimeout(() => {
                    ripple.remove();
                }, 600);
                
                // Show confirmation modal
                setTimeout(() => {
                    this.style.transform = '';
                    showProgramModal(programName);
                }, 300);
            });
        });

// List item hover enhancement
        document.querySelectorAll('.highlights-list li').forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'rgba(241, 245, 249, 0.5)';
                this.style.paddingLeft = '1rem';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '';
                this.style.paddingLeft = '0';
            });
        });

// Modal function
        function showProgramModal(programName) {
            // Create modal overlay
            const modalOverlay = document.createElement('div');
            modalOverlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(15, 23, 42, 0.7);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                backdrop-filter: blur(4px);
                animation: fadeIn 0.3s ease;
            `;
            
            // Create modal content
            const modalContent = document.createElement('div');
            modalContent.style.cssText = `
                background: white;
                border-radius: var(--radius-card);
                padding: 2.5rem;
                max-width: 500px;
                width: 90%;
                box-shadow: var(--shadow-lg);
                text-align: center;
                animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            `;
            
            modalContent.innerHTML = `
                <div style="margin-bottom: 1.5rem;">
                    <i class="fas fa-check-circle" style="font-size: 3.5rem; color: #10b981; margin-bottom: 1rem;"></i>
                    <h2 style="font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--gray-800); margin-bottom: 1rem;">
                        Program Inquiry Sent
                    </h2>
                    <p style="color: var(--gray-600); line-height: 1.6; margin-bottom: 1.5rem;">
                        Thank you for your interest in <strong>${programName}</strong>. Our admissions team will contact you within 24 hours with detailed information and next steps.
                    </p>
                </div>
                <button id="closeModal" style="
                    background: var(--primary-500);
                    color: white;
                    border: none;
                    padding: 0.9rem 2rem;
                    border-radius: var(--radius-inner);
                    font-weight: 600;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: background 0.2s ease;
                ">Continue Browsing</button>
            `;
            
            modalOverlay.appendChild(modalContent);
            document.body.appendChild(modalOverlay);
            
            // Close modal functionality
            document.getElementById('closeModal').addEventListener('click', () => {
                modalOverlay.style.animation = 'fadeOut 0.3s ease';
                modalContent.style.animation = 'slideDown 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(modalOverlay);
                }, 250);
            });
            
            // Close on overlay click
            modalOverlay.addEventListener('click', (e) => {
                if (e.target === modalOverlay) {
                    modalOverlay.style.animation = 'fadeOut 0.3s ease';
                    modalContent.style.animation = 'slideDown 0.3s ease';
                    setTimeout(() => {
                        document.body.removeChild(modalOverlay);
                    }, 250);
                }
            });
        }

// Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple-animation {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
            
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            
            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            @keyframes slideDown {
                from {
                    opacity: 1;
                    transform: translateY(0);
                }
                to {
                    opacity: 0;
                    transform: translateY(20px);
                }
            }
        `;
        document.head.appendChild(style);

School Program Catalog Card Preview

Download Options