Event Countdown Hero Template

Build anticipation and drive registrations for your next event with a hero section that counts down to the big day.

This template creates a sense of urgency with a large, bold countdown timer and a clear call-to-action, encouraging visitors to secure their spot before time runs out.

Screenshot of an event hero section with a large countdown timer and a registration button.

Get Source Code Preview

About the Event Countdown Hero

Perfect for conferences, product launches, webinars, and workshops, this hero section serves as a dynamic focal point for your event's landing page. The visible timer is a constant reminder of the approaching date, creating FOMO (fear of missing out) and motivating potential attendees to register early.

Features

Large Countdown Timer: A highly visible, real-time clock that counts down the days, hours, minutes, and seconds.
Clear Event Details: Includes dedicated spots for the event title, date, and location.
No External Dependencies: The countdown logic is powered by a self-contained, vanilla JavaScript snippet.
Image Background: Uses a background image to set the tone for the event, with an overlay to ensure text is always readable.

Code Breakdown

The component is split into CSS for the head, HTML for the body, and a JavaScript block that should be placed just before your closing body tag.

The countdown timer is made of four styled divs inside a Flexbox container. This allows the blocks to wrap neatly on smaller screens. The background image and dark overlay are applied to the parent section, creating a backdrop for the content which is layered on top with a higher z-index.

The JavaScript functionality is similar to the Limited-Time Offer hero. A targetDate variable is set to your event's start time. A function runs every second, calculating the time difference and updating the text content of the timer divs. When the timer reaches zero, it is replaced with a message like "The Event is Live!". The target date can be easily configured in the JavaScript code.

Code

<style>
    :root {
        /*
            Demonstration image from Unsplash by Evangeline Shaw. 
            Replace with an image from your event.
        */
        --ech-bg-image: url('https://images.unsplash.com/photo-1511578314322-379afb476865?q=80&w=1400');
        --ech-min-height: 90vh;
        --ech-padding: 3rem 1.5rem;
        --ech-text-color: #ffffff;
        --ech-overlay-color: rgba(23, 37, 84, 0.8);
        --ech-timer-text-color: #38bdf8;
        --ech-cta-bg: #38bdf8;
        --ech-cta-text-color: #0c4a6e;
        --ech-cta-hover-bg: #7dd3fc;
    }
    .event-countdown-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(--ech-min-height);
        padding: var(--ech-padding);
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: var(--ech-bg-image);
        background-size: cover;
        background-position: center;
    }
    .event-countdown-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--ech-overlay-color);
        z-index: 1;
    }
    .event-countdown-hero * {
         box-sizing: border-box;
    }
    .event-countdown-hero-content {
        position: relative;
        z-index: 2;
        color: var(--ech-text-color);
        max-width: 800px;
    }
    .event-countdown-hero .title {
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 1rem;
    }
    .event-countdown-hero .event-meta {
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0 0 2.5rem;
        opacity: 0.9;
    }
    .event-countdown-hero .timer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .event-countdown-hero .timer-block {
        display: flex;
        flex-direction: column;
    }
    .event-countdown-hero .timer-time {
        font-size: clamp(2.5rem, 8vw, 4rem);
        font-weight: 700;
        color: var(--ech-timer-text-color);
        line-height: 1;
    }
    .event-countdown-hero .timer-label {
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: 500;
        opacity: 0.8;
    }
    .event-countdown-hero #event-expired-message {
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--ech-timer-text-color);
        border: 2px solid;
        padding: 1.5rem 2rem;
        border-radius: 8px;
    }
    .event-countdown-hero .cta-button {
        background-color: var(--ech-cta-bg);
        color: var(--ech-cta-text-color);
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
        font-weight: 700;
        border: none;
        border-radius: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .event-countdown-hero .cta-button:hover {
        background-color: var(--ech-cta-hover-bg);
    }
</style>

<section class="event-countdown-hero">
    <div class="event-countdown-hero-content">
        <h1 class="title">Innovate & Elevate Conference 2028</h1>
        <p class="event-meta">December 14-16, 2028 | Digital-First Event</p>
        
        <div class="timer" id="event-timer">
            <div class="timer-block">
                <span class="timer-time" id="ech-days">00</span>
                <span class="timer-label">Days</span>
            </div>
            <div class="timer-block">
                <span class="timer-time" id="ech-hours">00</span>
                <span class="timer-label">Hours</span>
            </div>
            <div class="timer-block">
                <span class="timer-time" id="ech-minutes">00</span>
                <span class="timer-label">Minutes</span>
            </div>
            <div class="timer-block">
                <span class="timer-time" id="ech-seconds">00</span>
                <span class="timer-label">Seconds</span>
            </div>
        </div>

<a href="#" role="button" class="cta-button">Register Now</a>
    </div>
</section>

<script>
(function() {
    // --- IMPORTANT: Set your event's start date and time here ---
    const targetDate = new Date("Dec 14, 2050 09:00:00").getTime();

const daysEl = document.getElementById("ech-days");
    const hoursEl = document.getElementById("ech-hours");
    const minutesEl = document.getElementById("ech-minutes");
    const secondsEl = document.getElementById("ech-seconds");
    const timerContainer = document.getElementById("event-timer");

if (!timerContainer) return;

const countdownInterval = setInterval(function() {
        const now = new Date().getTime();
        const distance = targetDate - now;

if (distance < 0) {
            clearInterval(countdownInterval);
            timerContainer.innerHTML = '<p id="event-expired-message">The Event is Live!</p>';
            return;
        }
        
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        daysEl.textContent = days.toString().padStart(2, '0');
        hoursEl.textContent = hours.toString().padStart(2, '0');
        minutesEl.textContent = minutes.toString().padStart(2, '0');
        secondsEl.textContent = seconds.toString().padStart(2, '0');

}, 1000);
})();
</script>

View Output