Instructor-Focused Hero Template

Build student confidence by highlighting the expert leading the course.

This layout puts the instructor front and center, leveraging their photo, credentials, and reputation to establish credibility and sell the value of the course.

A hero section for a course that features the instructor's photo and credentials.

Get Source Code Preview

About the Instructor-Focused Hero

For many online courses, the instructor is a primary factor in a student's decision to enroll. Students want to learn from a credible, experienced expert. This hero section is designed to showcase that expertise from the very first moment. Presenting a professional photo, compelling bio, and course title reinforces credibility and introduces the instructor right away.

Features

Expertise-Focused Design: Places the spotlight squarely on the instructor to build trust and authority.
Clear Structure: Presents the instructor's photo, name, bio, and the course title in a clean two-column layout.
Fully Responsive: The columns stack cleanly on mobile devices, ensuring the instructor's information is presented well on all screens.
Clean & Professional Aesthetic: Uses typography and whitespace to create a trustworthy, academic feel.

Code Breakdown

This component is split into CSS for your website's head and HTML for the body.

We use CSS Grid to create the responsive two-column layout on the .instructor-hero-container. For wider screens, we use grid-template-columns: auto 1fr to create a narrow column for the image and a wider, flexible column for the text content. The auto value for the first column allows it to shrink to the size of the image, while 1fr lets the content column take up the remaining space. This approach automatically reverts to a single-column stack on mobile devices. align-items: center keeps the content in both columns vertically aligned.

Code

<style>
    :root {
        --ifh-padding: 4rem 1.5rem;
        --ifh-bg-color: #f8fafc;
        --ifh-text-color: #374151;
        --ifh-headline-color: #0f172a;
        --ifh-name-color: #1e3a8a;
        --ifh-cta-bg: #1e3a8a;
        --ifh-cta-hover-bg: #1e40af;
        --ifh-cta-text-color: #ffffff;
        --ifh-max-width: 1000px;
    }
    .instructor-focused-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(--ifh-bg-color);
        padding: var(--ifh-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .instructor-focused-hero * {
         box-sizing: border-box;
    }
    .instructor-hero-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: var(--ifh-max-width);
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .ifh-image-wrapper .image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        border: 3px solid white;
        margin: 0 auto; /* Center image on mobile */
    }
    .ifh-content .course-title {
        color: var(--ifh-headline-color);
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .ifh-content .instructor-name {
        color: var(--ifh-name-color);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }
    .ifh-content .instructor-bio {
        color: var(--ifh-text-color);
        margin: 0.5rem 0 1.5rem;
        line-height: 1.6;
    }
    .ifh-content .cta {
        display: inline-block;
        background-color: var(--ifh-cta-bg);
        color: var(--ifh-cta-text-color);
        padding: 0.8rem 1.8rem;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
    .ifh-content .cta:hover {
        background-color: var(--ifh-cta-hover-bg);
    }
    @media(min-width: 768px) {
        .instructor-hero-container {
            grid-template-columns: auto 1fr; /* Image width + remaining space */
            gap: 2.5rem;
            text-align: left;
        }
        .ifh-image-wrapper .image {
            margin: 0;
        }
    }
</style>

<section class="instructor-focused-hero">
    <div class="instructor-hero-container">

<div class="ifh-content">
            <h1 class="course-title">Mastering Advanced Data Structures</h1>
            <h2 class="instructor-name">Dr. Caspian Vale</h2>
            <p class="instructor-bio">Learn from a renowned computer scientist with 15+ years of experience at leading tech firms and a passion for making complex topics accessible. </p>
            <a href="#" role="button" class="cta">Start Learning Now</a>
        </div>
        
    </div>
</section>

View Output