Event Countdown Hero

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

<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>