Virtual Event Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --veh-padding: 4rem 1.5rem;
        --veh-min-height: 450px;
        --veh-bg-color: #f1f5f9;
        --veh-text-color: #334155;
        --veh-headline-color: #0f172a;
        --veh-accent-color: #0f172a;
        --veh-cta-bg: #1e293b;
        --veh-cta-hover-bg: #0f172a;
        --veh-cta-text-color: #ffffff;
        --veh-meta-border-color: #cbd5e1;
        --veh-max-width: 800px;
    }
    .virtual-event-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";
        min-height: var(--veh-min-height);
        padding: var(--veh-padding);
        background-color: var(--veh-bg-color);
        width: 100%;

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .virtual-event-hero * {
         box-sizing: border-box;
    }
    .virtual-event-hero-content {
        max-width: var(--veh-max-width);
    }
    .virtual-event-hero .title {
        color: var(--veh-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.25rem, 6vw, 3.25rem);
        font-weight: 800;
        line-height: 1.2;
    }
    .virtual-event-hero .subtitle {
        color: var(--veh-text-color);
        font-size: clamp(1.1rem, 3vw, 1.2rem);
        font-weight: 400;
        line-height: 1.6;
        margin: 0 0 2rem 0;
    }
    .virtual-event-hero .cta-button {
        display: inline-block;
        background-color: var(--veh-cta-bg);
        color: var(--veh-cta-text-color);
        padding: 0.9rem 2.2rem;
        border-radius: 8px;
        border: none;
        font-size: 1.05rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .virtual-event-hero .cta-button:hover {
        background-color: var(--veh-cta-hover-bg);
    }
    .virtual-hero-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 2.5rem;
        margin-top: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--veh-meta-border-color);
    }
    .virtual-hero-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--veh-accent-color);
        font-weight: 500;
    }
    .virtual-hero-meta .meta-item svg {
        width: 1.25em;
        height: 1.25em;
    }

</style>

<section class="virtual-event-hero">
    <div class="virtual-event-hero-content">
        <h1 class="title">InTech: A Global Tech Summit</h1>
        <p class="subtitle">Join us for a free, two-day virtual experience exploring the next wave of digital transformation.</p>
        <a href="#" class="cta-button" role="button">Register for Free</a>

<div class="virtual-hero-meta">
            <div class="meta-item">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                <span>October 26-27, 2028</span>
            </div>
             <div class="meta-item">
                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" /></svg>
                <span>Live Streamed</span>
            </div>
             <div class="meta-item">
                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 00-1-1H5a1 1 0 00-1 1v5.586l3.293-3.293a1 1 0 011.414 0l3 3 2.293-2.293a1 1 0 011.414 0l3 3V6z" /></svg>
                <span>Join From Anywhere</span>
            </div>
        </div>
    </div>
</section>