Webinar Online Meeting Card

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

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* Keyframes for the pulsing "live" dot */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* === Webinar Card Styles === */
.webinar-card {
    --webinar-card-radius: 12px;
    --webinar-card-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--webinar-card-radius);
    box-shadow: var(--webinar-card-shadow);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.webinar-card-header {
    margin-bottom: 1.25rem;
}
.webinar-card-category {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.webinar-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.webinar-card-details {
    flex-grow: 1;
    display: grid;
    gap: 0.75rem;
    color: #374151;
    list-style: none;
    margin: 0;
    padding: 0;
}
.webinar-card-detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.webinar-card-detail-item svg {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    flex-shrink: 0;
}

.webinar-card-footer {
    margin-top: 1.5rem;
}

.webinar-card-cta {
    width: 100%;
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.webinar-card-cta:hover {
    background-color: #4338ca;
}

/* === "Live" State Styles === */
.webinar-card.is-live .webinar-card-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #16a34a;
}
.webinar-card.is-live .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.webinar-card.is-live .webinar-card-cta {
    background-color: #16a34a;
}
.webinar-card.is-live .webinar-card-cta:hover {
    background-color: #15803d;
}

/* === "Upcoming" State Style (Disabled) === */
.webinar-card-cta:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
}

</style>

<div class="cards-grid-container">
    
    
    <article class="webinar-card is-live">
        <header class="webinar-card-header">
            <div class="webinar-card-category">
                <span class="live-dot"></span>LIVE NOW
            </div>
            <h3 class="webinar-card-title">The Future of Responsive Design</h3>
        </header>
        <ul class="webinar-card-details">
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412l-1.92-3.839c-.328-.657-.968-1.07-1.706-1.07H6.522c-.738 0-1.378.413-1.706 1.07l-1.92 3.839z" /></svg>
                <span>Hosted by Elara Vance</span>
            </li>
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zM4.5 6.5A1.25 1.25 0 003.25 7.75v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5A1.25 1.25 0 0015.25 6.5H4.5z" clip-rule="evenodd"/></svg>
                <time datetime="2024-10-28T14:00:00Z">October 28, 2024 at 2:00 PM UTC</time>
            </li>
        </ul>
        <footer class="webinar-card-footer">
            <button class="webinar-card-cta" type="button">Join Meeting Now</button>
        </footer>
    </article>
    
    
    <article class="webinar-card">
         <header class="webinar-card-header">
            <div class="webinar-card-category">Upcoming Webinar</div>
            <h3 class="webinar-card-title">Getting Started with CSS Grid</h3>
        </header>
         <ul class="webinar-card-details">
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412l-1.92-3.839c-.328-.657-.968-1.07-1.706-1.07H6.522c-.738 0-1.378.413-1.706 1.07l-1.92 3.839z" /></svg>
                <span>Hosted by Dr. Aris Thorne</span>
            </li>
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zM4.5 6.5A1.25 1.25 0 003.25 7.75v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5A1.25 1.25 0 0015.25 6.5H4.5z" clip-rule="evenodd"/></svg>
                <time datetime="2024-11-05T18:00:00Z">November 5, 2024 at 6:00 PM UTC</time>
            </li>
        </ul>
        <footer class="webinar-card-footer">
            <button class="webinar-card-cta" type="button" disabled>Registration opens soon</button>
        </footer>
    </article>

</div>