Webinar Series Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mastering Digital Transformation in a Hybrid World | Professional Webinar Series</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
</head>
<body>
    
    <header>
        <div class="container header-content">
            <div class="logo">Digital<span>Edge</span></div>
            <a href="#register" class="cta-button">Register Now</a>
        </div>
    </header>
    
    
    <section class="hero">
        <div class="container">
            <h1>Mastering Digital Transformation in a Hybrid World</h1>
            <p>A three-part professional webinar series designed for business leaders and IT professionals looking to navigate the challenges of digital transformation in today's hybrid work environment.</p>
            <a href="#register" class="cta-button">Register for the Series</a>
        </div>
    </section>
    
    
    <section class="webinar-details">
        <div class="container">
            <h2 class="section-title">Webinar Sessions</h2>
            <div class="sessions">
                
                <div class="session-card">
                    <div class="session-number">1</div>
                    <h3 class="session-title">Cloud Adoption Strategies for Hybrid Work</h3>
                    <div class="session-date">
                        <i class="far fa-calendar-alt"></i> October 12, 2023 | 2:00 PM EST
                    </div>
                    <p class="session-description">
                        Discover proven strategies for successful cloud adoption that supports hybrid work models while maintaining security and operational efficiency.
                    </p>
                    <div class="learning-outcomes">
                        <h4>You'll Learn:</h4>
                        <ul>
                            <li>How to assess your organization's cloud readiness</li>
                            <li>Best practices for hybrid cloud architectures</li>
                            <li>Cost optimization strategies for cloud services</li>
                            <li>Managing governance and compliance in the cloud</li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="session-card">
                    <div class="session-number">2</div>
                    <h3 class="session-title">Cybersecurity Best Practices for Distributed Teams</h3>
                    <div class="session-date">
                        <i class="far fa-calendar-alt"></i> October 19, 2023 | 2:00 PM EST
                    </div>
                    <p class="session-description">
                        Learn how to protect your organization from evolving cyber threats in an environment where employees work from multiple locations.
                    </p>
                    <div class="learning-outcomes">
                        <h4>You'll Learn:</h4>
                        <ul>
                            <li>Essential security controls for remote workers</li>
                            <li>How to implement zero-trust architecture</li>
                            <li>Employee training strategies to reduce risk</li>
                            <li>Incident response planning for hybrid environments</li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="session-card">
                    <div class="session-number">3</div>
                    <h3 class="session-title">Agile Team Collaboration in a Digital Workplace</h3>
                    <div class="session-date">
                        <i class="far fa-calendar-alt"></i> October 26, 2023 | 2:00 PM EST
                    </div>
                    <p class="session-description">
                        Master the tools and techniques that enable seamless collaboration between in-office and remote team members while maintaining productivity.
                    </p>
                    <div class="learning-outcomes">
                        <h4>You'll Learn:</h4>
                        <ul>
                            <li>Selecting the right digital collaboration tools</li>
                            <li>Maintaining team cohesion across locations</li>
                            <li>Agile methodologies for distributed teams</li>
                            <li>Measuring and improving digital collaboration</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="speakers">
        <div class="container">
            <h2 class="section-title">Featured Speakers</h2>
            <div class="speakers-grid">
                
                <div class="speaker-card">
                    <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Dr. Sarah Chen" class="speaker-image">
                    <h3 class="speaker-name">Dr. Sarah Chen</h3>
                    <p class="speaker-title">Chief Digital Officer, TechForward Inc.</p>
                    <p class="speaker-bio">
                        With over 15 years of experience in digital transformation, Dr. Chen has helped Fortune 500 companies navigate complex cloud migrations and digital strategy implementations.
                    </p>
                </div>
                
                
                <div class="speaker-card">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Rodriguez" class="speaker-image">
                    <h3 class="speaker-name">Michael Rodriguez</h3>
                    <p class="speaker-title">VP of Cybersecurity, SecureNet Solutions</p>
                    <p class="speaker-bio">
                        A former white-hat hacker, Michael specializes in building resilient security architectures for organizations with distributed workforces and complex IT ecosystems.
                    </p>
                </div>
                
                
                <div class="speaker-card">
                    <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel" class="speaker-image">
                    <h3 class="speaker-name">Priya Patel</h3>
                    <p class="speaker-title">Director of Digital Workplace, CollabTech</p>
                    <p class="speaker-bio">
                        Priya is a leading expert in digital collaboration tools and agile methodologies, having implemented successful transformation programs for global enterprises.
                    </p>
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="cta-section" id="register">
        <div class="container">
            <h2>Ready to Transform Your Digital Strategy?</h2>
            <p>Join our three-part webinar series and gain actionable insights from industry leaders. Limited seats available - register today to secure your spot.</p>
            <a href="#" class="cta-button secondary-cta">Register for the Series</a>
        </div>
    </section>
    
    
    <footer>
        <div class="container footer-content">
            <div class="footer-logo">Digital<span>Edge</span></div>
            <div class="footer-links">
                <a href="#" class="footer-link">Privacy Policy</a>
                <a href="#" class="footer-link">Terms of Service</a>
                <a href="#" class="footer-link">Contact Us</a>
            </div>
            <p class="copyright">© 2023 DigitalEdge Webinar Series. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

CSS

:root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #94a3b8;
            --dark-gray: #475569;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background-color: var(--light);
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .logo span {
            color: var(--secondary);
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--dark);
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 40px;
            color: var(--dark-gray);
        }
        
        .cta-button {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            border: none;
            cursor: pointer;
        }
        
        .cta-button:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }
        
        /* Webinar Details */
        .webinar-details {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            font-size: 2rem;
            color: var(--dark);
        }
        
        .sessions {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }
        
        .session-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 30px;
            flex: 1 1 300px;
            max-width: 350px;
            transition: transform 0.3s ease;
        }
        
        .session-card:hover {
            transform: translateY(-10px);
        }
        
        .session-number {
            display: inline-block;
            background-color: var(--primary);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .session-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        .session-date {
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .session-date i {
            font-size: 1.1rem;
        }
        
        .session-description {
            color: var(--dark-gray);
            margin-bottom: 20px;
        }
        
        .learning-outcomes {
            margin-top: 20px;
        }
        
        .learning-outcomes h4 {
            margin-bottom: 10px;
            color: var(--dark);
        }
        
        .learning-outcomes ul {
            padding-left: 20px;
            color: var(--dark-gray);
        }
        
        .learning-outcomes li {
            margin-bottom: 8px;
        }
        
        /* Speakers Section */
        .speakers {
            padding: 80px 0;
            background-color: #f8fafc;
        }
        
        .speakers-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }
        
        .speaker-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 30px;
            flex: 1 1 300px;
            max-width: 350px;
            text-align: center;
        }
        
        .speaker-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px;
            border: 4px solid var(--primary);
        }
        
        .speaker-name {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: var(--dark);
        }
        
        .speaker-title {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .speaker-bio {
            color: var(--dark-gray);
            font-size: 0.95rem;
        }
        
        /* CTA Section */
        .cta-section {
            padding: 80px 0;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            text-align: center;
        }
        
        .cta-section h2 {
            font-size: 2rem;
            margin-bottom: 20px;
        }
        
        .cta-section p {
            max-width: 700px;
            margin: 0 auto 40px;
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .secondary-cta {
            background-color: white;
            color: var(--primary);
        }
        
        .secondary-cta:hover {
            background-color: #e0e7ff;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        
        .footer-content {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .footer-logo {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .footer-logo span {
            color: var(--secondary);
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .footer-link {
            color: var(--gray);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-link:hover {
            color: white;
        }
        
        .copyright {
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .session-card, .speaker-card {
                flex: 1 1 100%;
                max-width: 100%;
            }
            
            .cta-section h2 {
                font-size: 1.8rem;
            }
        }

JavaScript

Webinar Series Template Preview

Download Options