Course Teaser Hero Template

Capture your students' interest with a hero section that clearly introduces your online course.

This layout is designed to provide important course information at a glance paired with an engaging image to draw learners in.

A hero section for an online course, with an introductory image and description.

Get Source Code Preview

About the Course Teaser Hero

For any educational platform, the course landing page needs to be compelling and informative. This hero section is structured to do both. It balances an attractive visual, representing the course topic, with a concise and persuasive description of the value a student will receive. The clear "Enroll Now" call-to-action provides a direct path to conversion.

Features

Informative Layout: Presents the course title, a summary, and a strong CTA in a clean two-column format.
Visually Engaging: Includes a prominent image to represent the course subject matter.
Conversion-Focused: The design guides the user's eye from the course information directly to the enrollment button.
Responsive Design: The layout seamlessly transitions to a single-column stack on mobile devices.

Code Breakdown

This component is delivered as CSS for your website's head and HTML for the body.

The layout is controlled by CSS Grid. The .course-teaser-container is set to display: grid. On desktop, grid-template-columns: repeat(2, 1fr) creates the two equal columns for the image and text content. The align-items: center property vertically aligns the content in both columns for a balanced look. The grid automatically adapts to a single column on smaller screens, creating the mobile-friendly stack. The course image itself uses object-fit: cover to ensure it always fills its container without being distorted.

Code

<style>
    :root {
        --cth-padding: 4rem 1.5rem;
        --cth-bg-color: #f8fafc;
        --cth-text-color: #334155;
        --cth-headline-color: #1e293b;
        --cth-cta-bg: #ea580c;
        --cth-cta-hover-bg: #c2410c;
        --cth-cta-text-color: #ffffff;
        --cth-max-width: 1100px;
    }
    .course-teaser-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--cth-bg-color);
        padding: var(--cth-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .course-teaser-hero * {
         box-sizing: border-box;
    }
    .course-teaser-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: var(--cth-max-width);
        width: 100%;
        align-items: center;
    }
    .cth-content {
        text-align: center;
    }
    .cth-content .title {
        color: var(--cth-headline-color);
        font-size: clamp(2.25rem, 5vw, 3rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .cth-content .description {
        color: var(--cth-text-color);
        line-height: 1.6;
        margin: 0 0 2rem;
        font-size: 1.1rem;
    }
    .cth-content .cta {
        display: inline-block;
        background-color: var(--cth-cta-bg);
        color: var(--cth-cta-text-color);
        padding: 1rem 2.5rem;
        border-radius: 8px;
        font-size: 1.1rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .cth-content .cta:hover {
        background-color: var(--cth-cta-hover-bg);
    }
    .cth-image-wrapper .image {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .course-teaser-container {
            grid-template-columns: repeat(2, 1fr);
        }
        .cth-content {
            text-align: left;
        }
        .cth-image-wrapper {
            order: 2; /* Image on the right */
        }
    }
</style>

<section class="course-teaser-hero">
    <div class="course-teaser-container">

<div class="cth-content">
            <h1 class="title">Modern Web Development Bootcamp</h1>
            <p class="description">Go from beginner to pro with our comprehensive, project-based curriculum. Learn the skills you need to build stunning, high-performance web applications.</p>
            <a href="#" role="button" class="cta">Enroll Now</a>
        </div>
        
    </div>
</section>

View Output