Bright Future Academy Hero Section | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bright Future Academy</title>
  
</head>

<body>
    <section class="hero-section">
        <div class="hero-container">
            <div class="hero-content">
                <div class="hero-badge">
                    Excellence in Education Since 2010
                </div>

<h1 class="hero-title">
                    Shaping Tomorrow's<br>
                    <span class="highlight">Leaders Today</span>
                </h1>

<p class="hero-subtitle">
                    Discover a world-class education that nurtures creativity, builds character, and prepares students
                    for success. Our innovative curriculum and dedicated teachers create an inspiring learning
                    environment.
                </p>

<div class="hero-actions">
                    <a href="#" class="btn-primary"
                        onclick="alert(' Let\'s start your enrollment process!'); return false;">
                        Enroll Now
                        <span></span>
                    </a>
                    <a href="#" class="btn-secondary"
                        onclick="alert(' Take a virtual tour of our campus!'); return false;">
                        <span></span>
                        Virtual Tour
                    </a>
                </div>

</div>

<div class="hero-visual">
                <div class="visual-container">
                    <div class="main-showcase">
                        <div class="showcase-frame">
                            <div class="showcase-content">
                                <div class="showcase-badge">
                                    Bright Future Academy
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS

body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
        }

.hero-section {
            min-height: 100vh;
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 50%, #fff3e0 100%);
            position: relative;
            display: flex;
            align-items: center;
            padding: 2rem;
            overflow: hidden;
        }

.hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 25% 25%, rgba(33, 150, 243, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(255, 193, 7, 0.08) 0%, transparent 50%);
            animation: gentleGlow 10s ease-in-out infinite;
        }

.hero-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 6rem;
            align-items: center;
            width: 100%;
            z-index: 2;
            position: relative;
        }

.hero-content {
            animation: slideInLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.hero-badge {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(156, 39, 176, 0.1) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(33, 150, 243, 0.3);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            color: #1976d2;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

.hero-badge::before {
            content: '';
            margin-right: 0.8rem;
            font-size: 1.1rem;
        }

.hero-title {
            font-size: 4rem;
            font-weight: 700;
            color: #1a237e;
            line-height: 1.1;
            margin-bottom: 1rem;
            animation: fadeInUp 1.2s ease-out 0.5s both;
            letter-spacing: -0.02em;
        }

.hero-title .highlight {
            background: linear-gradient(135deg, #2196f3 0%, #9c27b0 50%, #ff9800 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-subtitle {
            font-size: 1.1rem;
            color: #424242;
            line-height: 1.6;
            margin-bottom: 1rem;
            animation: fadeInUp 1.2s ease-out 0.7s both;
            max-width: 90%;
        }
        .hero-actions {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1.2s ease-out 1.1s both;
        }

.btn-primary {
            background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
            color: white;
            padding: 1.3rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            box-shadow: 0 10px 30px rgba(33, 150, 243, 0.3);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(33, 150, 243, 0.4);
        }

.btn-secondary {
            background: transparent;
            color: #1976d2;
            padding: 1.3rem 2.5rem;
            border: 2px solid rgba(33, 150, 243, 0.3);
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            backdrop-filter: blur(10px);
        }

.btn-secondary:hover {
            background: rgba(33, 150, 243, 0.1);
            border-color: rgba(33, 150, 243, 0.5);
            transform: translateY(-2px);
        }

.hero-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: slideInRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.visual-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 600px;
        }

.main-showcase {
            width: 400px;
            height: 500px;
            position: relative;
            margin: 0 auto;
        }

.showcase-frame {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 242, 253, 0.8) 100%);
            backdrop-filter: blur(30px);
            border: 2px solid rgba(33, 150, 243, 0.3);
            border-radius: 25px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(33, 150, 243, 0.15);
            animation: gentleFloat 8s ease-in-out infinite;
        }

.showcase-content {
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 500"><defs><linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%2387ceeb;stop-opacity:1" /><stop offset="100%" style="stop-color:%23e3f2fd;stop-opacity:1" /></linearGradient><linearGradient id="buildingGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23ffecb3;stop-opacity:1" /><stop offset="100%" style="stop-color:%23fff3e0;stop-opacity:1" /></linearGradient></defs><rect width="400" height="500" fill="url(%23skyGrad)"/><rect x="0" y="400" width="400" height="100" fill="%234caf50"/><rect x="50" y="200" width="300" height="200" fill="url(%23buildingGrad)" stroke="%23ff9800" stroke-width="3"/><polygon points="40,200 200,120 360,200" fill="%23f44336"/><rect x="80" y="240" width="40" height="60" fill="%232196f3" stroke="%231976d2" stroke-width="2"/><rect x="90" y="250" width="20" height="30" fill="%2364b5f6" opacity="0.7"/><rect x="140" y="240" width="40" height="60" fill="%232196f3" stroke="%231976d2" stroke-width="2"/><rect x="150" y="250" width="20" height="30" fill="%2364b5f6" opacity="0.7"/><rect x="200" y="240" width="40" height="60" fill="%232196f3" stroke="%231976d2" stroke-width="2"/><rect x="210" y="250" width="20" height="30" fill="%2364b5f6" opacity="0.7"/><rect x="260" y="240" width="40" height="60" fill="%232196f3" stroke="%231976d2" stroke-width="2"/><rect x="270" y="250" width="20" height="30" fill="%2364b5f6" opacity="0.7"/><rect x="320" y="240" width="40" height="60" fill="%232196f3" stroke="%231976d2" stroke-width="2"/><rect x="330" y="250" width="20" height="30" fill="%2364b5f6" opacity="0.7"/><rect x="180" y="320" width="40" height="80" fill="%23795548"/><circle cx="205" cy="360" r="3" fill="%23ffeb3b"/><rect x="160" y="180" width="80" height="20" fill="%23ff9800"/><text x="200" y="195" text-anchor="middle" fill="%23ffffff" font-size="12" font-weight="bold">SCHOOL</text><circle cx="350" cy="80" r="30" fill="%23ffeb3b"/><circle cx="80" cy="420" r="8" fill="%23ff5722"/><circle cx="320" cy="430" r="6" fill="%23e91e63"/><rect x="30" y="420" width="340" height="5" fill="%23388e3c"/></svg>') center/cover;
            border-radius: 23px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 2rem;
        }

.showcase-badge {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            padding: 1rem 2rem;
            border-radius: 25px;
            color: #1976d2;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 10px 30px rgba(33, 150, 243, 0.2);
            animation: slideUpBadge 1s ease-out 2s both;
        }

@keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes slideUpBadge {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes gentleFloat {

0%,
            100% {
                transform: translateY(0px);
            }

50% {
                transform: translateY(-15px);
            }
        }

@keyframes floatSubject {

0%,
            100% {
                transform: translateY(0px) translateX(0px);
                opacity: 0;
            }

20%,
            80% {
                opacity: 1;
            }

50% {
                transform: translateY(-30px) translateX(15px);
                opacity: 1;
            }
        }

@keyframes gentleGlow {

0%,
            100% {
                opacity: 1;
            }

50% {
                opacity: 0.8;
            }
        }

@media (max-width: 1024px) {
            .hero-container {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

.hero-title {
                font-size: 3.5rem;
            }

.main-showcase {
                width: 350px;
                height: 450px;
            }

.features-grid {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .hero-section {
                padding: 1rem;
            }

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

.hero-subtitle {
                font-size: 1.1rem;
                max-width: 100%;
            }

.hero-stats {
                gap: 2rem;
                justify-content: center;
            }

.main-showcase {
                width: 300px;
                height: 400px;
            }

.hero-actions {
                flex-direction: column;
                gap: 1rem;
            }

.btn-primary,
            .btn-secondary {
                width: 100%;
                justify-content: center;
            }

.visual-container {
                height: 450px;
            }
        }

@media (max-width: 480px) {
            .hero-title {
                font-size: 2.2rem;
            }

.hero-stats {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

.main-showcase {
                width: 250px;
                height: 350px;
            }

.visual-container {
                height: 400px;
            }
        }

JavaScript

Bright Future Academy Hero Section Preview

Download Options