Create Podcast Episode Page using HTML & CSS

By Faraz - June 28, 2025

Learn how to create a responsive podcast episode page using HTML and CSS. Step-by-step guide for beginners to get started with podcast web pages.

Join us on Telegram

Read Also

Create a Button with Hover Effects Using HTML and CSS

If you want to share your podcast episodes online with a clean and simple webpage, HTML and CSS can help you do it easily — even if you're just starting out.

Creating a podcast episode page allows you to showcase the episode title, player, description, and share links, all in one place. This helps your audience listen to your show directly from your website.

Let’s walk you through how to create a podcast episode page using just HTML and CSS. No complex coding or JavaScript is needed — just a basic understanding of HTML and CSS is enough.

Prerequisites:

Before you start, make sure you have:

A basic knowledge of HTML and CSS
Any code editor like VS Code, Sublime Text, or Notepad++
A browser to preview your page (like Chrome or Firefox)
An audio file URL or podcast embed link (optional for demo)

Source Code

Step 1 (HTML Code):

We’ll start with HTML, which builds the basic layout of your webpage. It helps us show the title, audio player, description, and links.

Open your code editor and create a new file called index.html.

Paste the below HTML code into that file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Future of AI in Everyday Life - PodcastHub Episode Page</title>
    <meta name="description" content="Explore how artificial intelligence is transforming our daily experiences and shaping the future.">
    <meta name="author" content="PodcastHub">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body class="light-theme">
    <!-- Header -->
    <header class="header" id="header">
        <div class="container">
            <div class="header-content">
                <!-- Logo -->
                <div class="logo">
                    <div class="logo-icon">🎧</div>
                    <span class="logo-text">PodcastHub</span>
                </div>

                <!-- Desktop Navigation -->
                <nav class="nav-desktop">
                    <a href="index.html" class="nav-link">Home</a>
                    <a href="#podcasts" class="nav-link">Podcasts</a>
                    <a href="#categories" class="nav-link">Categories</a>
                    <a href="#about" class="nav-link">About</a>
                </nav>

                <!-- Search Bar -->
                <div class="search-container">
                    <input type="text" placeholder="Search podcasts..." class="search-input" id="searchInput">
                    <span class="search-icon">🔍</span>
                </div>

                <!-- Action Buttons -->
                <div class="header-actions">
                    <button class="btn-icon" id="notificationBtn">
                        🔔
                        <span class="notification-dot"></span>
                    </button>
                    <button class="btn-icon" id="themeToggle">🌙</button>
                    <button class="btn-icon mobile-menu-toggle" id="mobileMenuToggle">☰</button>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <div class="mobile-search">
                    <input type="text" placeholder="Search podcasts..." class="search-input">
                    <span class="search-icon">🔍</span>
                </div>
                <nav class="nav-mobile">
                    <a href="index.html" class="nav-link">Home</a>
                    <a href="#podcasts" class="nav-link">Podcasts</a>
                    <a href="#categories" class="nav-link">Categories</a>
                    <a href="#about" class="nav-link">About</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Episode Content -->
    <main class="episode-main">
        <!-- Breadcrumb -->
        <section class="breadcrumb-section">
            <div class="container">
                <nav class="breadcrumb">
                    <a href="index.html" class="breadcrumb-link">Home</a>
                    <span class="breadcrumb-separator">›</span>
                    <a href="#" class="breadcrumb-link">Tech Talks</a>
                    <span class="breadcrumb-separator">›</span>
                    <span class="breadcrumb-current">The Future of AI in Everyday Life</span>
                </nav>
            </div>
        </section>

        <!-- Episode Hero -->
        <section class="episode-hero">
            <div class="container">
                <div class="episode-hero-content">
                    <div class="episode-hero-left">
                        <div class="episode-image-container">
                            <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600" alt="The Future of AI in Everyday Life" class="episode-hero-image">
                            <button class="episode-play-button" data-episode="0">▶️</button>
                        </div>
                    </div>
                    <div class="episode-hero-right">
                        <div class="episode-badges">
                            <span class="episode-badge featured">Featured</span>
                            <span class="episode-badge new">🆕 New</span>
                        </div>
                        <h1 class="episode-title">The Future of AI in Everyday Life</h1>
                        <p class="episode-subtitle">How artificial intelligence is transforming our daily experiences and shaping the future of human interaction.</p>
                        
                        <div class="episode-meta">
                            <div class="episode-meta-item">
                                <span class="meta-label">Duration:</span>
                                <span class="meta-value">42:15</span>
                            </div>
                            <div class="episode-meta-item">
                                <span class="meta-label">Published:</span>
                                <span class="meta-value">Dec 15, 2024</span>
                            </div>
                            <div class="episode-meta-item">
                                <span class="meta-label">Category:</span>
                                <span class="meta-value">Technology</span>
                            </div>
                            <div class="episode-meta-item">
                                <span class="meta-label">Plays:</span>
                                <span class="meta-value">12.5K</span>
                            </div>
                        </div>

                        <div class="episode-actions">
                            <button class="btn btn-primary episode-play-btn" data-episode="0">
                                ▶️ Play Episode
                            </button>
                            <button class="btn btn-secondary">
                                ⬇️ Download
                            </button>
                            <button class="btn btn-secondary">
                                🔗 Share
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Episode Content -->
        <section class="episode-content-section">
            <div class="container">
                <div class="episode-layout">
                    <!-- Main Content -->
                    <div class="episode-main-content">
                        <!-- Episode Description -->
                        <div class="content-card">
                            <h2 class="content-title">Episode Description</h2>
                            <div class="episode-description">
                                <p>In this thought-provoking episode, we dive deep into the rapidly evolving landscape of artificial intelligence and its profound impact on our daily lives. From smart home assistants to personalized recommendations, AI has quietly woven itself into the fabric of our existence.</p>
                                
                                <p>Join our expert panel as they explore the current state of AI technology, discuss emerging trends, and predict how these innovations will continue to reshape everything from healthcare and education to entertainment and transportation.</p>
                                
                                <h3>What You'll Learn:</h3>
                                <ul>
                                    <li>Current AI applications in everyday technology</li>
                                    <li>The role of machine learning in personalization</li>
                                    <li>Ethical considerations and privacy concerns</li>
                                    <li>Future predictions for AI integration</li>
                                    <li>How to prepare for an AI-driven world</li>
                                </ul>
                                
                                <p>Whether you're a tech enthusiast or simply curious about the future, this episode offers valuable insights into how AI will continue to transform our world in ways we're only beginning to understand.</p>
                            </div>
                        </div>

                        <!-- Guests & Hosts -->
                        <div class="content-card">
                            <h2 class="content-title">Guests & Hosts</h2>
                            <div class="guests-grid">
                                <div class="guest-card">
                                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150" alt="Dr. Sarah Chen" class="guest-avatar">
                                    <div class="guest-info">
                                        <h3 class="guest-name">Dr. Sarah Chen</h3>
                                        <p class="guest-role">AI Research Director at TechVision</p>
                                        <p class="guest-bio">Leading expert in machine learning with over 15 years of experience in AI development and implementation.</p>
                                    </div>
                                </div>
                                <div class="guest-card">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150" alt="Marcus Rodriguez" class="guest-avatar">
                                    <div class="guest-info">
                                        <h3 class="guest-name">Marcus Rodriguez</h3>
                                        <p class="guest-role">Host & Tech Journalist</p>
                                        <p class="guest-bio">Award-winning technology journalist and podcast host covering emerging tech trends for over a decade.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Timestamps -->
                        <div class="content-card">
                            <h2 class="content-title">Episode Timestamps</h2>
                            <div class="timestamps-list">
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="0">00:00</button>
                                    <span class="timestamp-description">Introduction and welcome</span>
                                </div>
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="180">03:00</button>
                                    <span class="timestamp-description">Current state of AI in consumer technology</span>
                                </div>
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="720">12:00</button>
                                    <span class="timestamp-description">Machine learning and personalization</span>
                                </div>
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="1320">22:00</button>
                                    <span class="timestamp-description">Ethical considerations and privacy</span>
                                </div>
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="1980">33:00</button>
                                    <span class="timestamp-description">Future predictions and trends</span>
                                </div>
                                <div class="timestamp-item">
                                    <button class="timestamp-link" data-time="2400">40:00</button>
                                    <span class="timestamp-description">Closing thoughts and key takeaways</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div class="episode-sidebar">
                        <!-- Podcast Info -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">About This Podcast</h3>
                            <div class="podcast-info">
                                <img src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200" alt="Tech Talks Podcast" class="podcast-cover">
                                <h4 class="podcast-name">Tech Talks</h4>
                                <p class="podcast-description">Weekly conversations about technology, innovation, and the future of digital transformation.</p>
                                <div class="podcast-stats">
                                    <div class="stat">
                                        <span class="stat-number">156</span>
                                        <span class="stat-label">Episodes</span>
                                    </div>
                                    <div class="stat">
                                        <span class="stat-number">2.3M</span>
                                        <span class="stat-label">Downloads</span>
                                    </div>
                                </div>
                                <button class="btn btn-primary btn-small">Subscribe</button>
                            </div>
                        </div>

                        <!-- Related Episodes -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Related Episodes</h3>
                            <div class="related-episodes">
                                <div class="related-episode">
                                    <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=100" alt="Episode" class="related-episode-image">
                                    <div class="related-episode-content">
                                        <h4 class="related-episode-title">Blockchain Revolution</h4>
                                        <p class="related-episode-meta">38:42 • 8.2K plays</p>
                                        <button class="btn-text" data-episode="1">Play</button>
                                    </div>
                                </div>
                                <div class="related-episode">
                                    <img src="https://images.unsplash.com/photo-1551808525-51a94da548ce?w=100" alt="Episode" class="related-episode-image">
                                    <div class="related-episode-content">
                                        <h4 class="related-episode-title">Quantum Computing Basics</h4>
                                        <p class="related-episode-meta">45:12 • 12.1K plays</p>
                                        <button class="btn-text" data-episode="2">Play</button>
                                    </div>
                                </div>
                                <div class="related-episode">
                                    <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=100" alt="Episode" class="related-episode-image">
                                    <div class="related-episode-content">
                                        <h4 class="related-episode-title">Cybersecurity in 2024</h4>
                                        <p class="related-episode-meta">52:30 • 15.7K plays</p>
                                        <button class="btn-text" data-episode="3">Play</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Subscribe -->
                        <div class="sidebar-card">
                            <h3 class="sidebar-title">Never Miss an Episode</h3>
                            <p class="sidebar-description">Get notified when new episodes are released.</p>
                            <form class="sidebar-form" id="newsletterForm">
                                <input type="email" id="emailInput" placeholder="Your email address" class="sidebar-input" required>
                                <button type="submit" class="btn btn-primary btn-small btn-full">Subscribe</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <div class="logo">
                        <div class="logo-icon">🎧</div>
                        <span class="logo-text">PodcastHub</span>
                    </div>
                    <p class="footer-description">
                        Discover, listen, and connect with your favorite podcasts. Join millions of 
                        listeners exploring the world's best audio content.
                    </p>
                    <div class="social-links">
                        <a href="#" class="social-link">𝕏</a>
                        <a href="#" class="social-link">📘</a>
                        <a href="#" class="social-link">📷</a>
                        <a href="#" class="social-link">💼</a>
                    </div>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Product</h4>
                        <a href="#">Features</a>
                        <a href="#">Pricing</a>
                        <a href="#">API</a>
                        <a href="#">Documentation</a>
                    </div>
                    <div class="footer-column">
                        <h4>Company</h4>
                        <a href="#">About Us</a>
                        <a href="#">Careers</a>
                        <a href="#">Press</a>
                        <a href="#">Contact</a>
                    </div>
                    <div class="footer-column">
                        <h4>Resources</h4>
                        <a href="#">Blog</a>
                        <a href="#">Help Center</a>
                        <a href="#">Community</a>
                        <a href="#">Guidelines</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-legal">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Cookie Policy</a>
                </div>
                <div class="footer-copyright">
                    © 2024 PodcastHub. All rights reserved.
                </div>
            </div>
        </div>
    </footer>

    <!-- Audio Player -->
    <div class="audio-player" id="audioPlayer" style="display: none;">
        <div class="player-content">
            <div class="player-info">
                <img src="" alt="" class="player-image" id="playerImage">
                <div class="player-details">
                    <h4 class="player-title" id="playerTitle"></h4>
                    <p class="player-description" id="playerDescription"></p>
                </div>
            </div>
            <div class="player-controls">
                <button class="player-btn" id="playPauseBtn">▶️</button>
                <div class="progress-container">
                    <div class="progress-time">
                        <span id="currentTime">0:00</span>
                        <span>/</span>
                        <span id="duration">0:00</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                        <input type="range" min="0" max="100" value="0" class="progress-slider" id="progressSlider">
                    </div>
                </div>
            </div>
            <div class="player-actions">
                <button class="player-btn" id="volumeBtn">🔊</button>
                <input type="range" min="0" max="100" value="80" class="volume-slider" id="volumeSlider">
                <button class="player-btn" id="playlistBtn">📋</button>
                <button class="player-btn" id="closePlayerBtn">✕</button>
            </div>
        </div>
        <div class="audio-visualizer" id="audioVisualizer">
            <!-- Visualizer bars will be generated by JavaScript -->
        </div>
    </div>

    <!-- Scroll to Top -->
    <button class="scroll-to-top" id="scrollToTop">↑</button>

    <!-- Toast Notification -->
    <div class="toast" id="toast">
        <span class="toast-message" id="toastMessage"></span>
    </div>

    <!-- Hidden Audio Element -->
    <audio id="audioElement" preload="metadata"></audio>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>

Read Also Creating an Interactive Feedback UI HTML, CSS, JavaScript.jpg

Creating an Interactive Feedback UI: HTML, CSS, JavaScript

Step 2 (CSS Code):

Now that the layout is ready, let’s move to CSS to make your page look modern and clean.

Create a new file called styles.css.

Paste the below CSS code into that file:

:root {
    /* Soft Color Palette */
    --primary-50: #f8f9ff;
    --primary-100: #f0f2ff;
    --primary-200: #e6eaff;
    --primary-300: #d1d9ff;
    --primary-400: #b8c7ff;
    --primary-500: #9fb5ff;
    --primary-600: #607dd7;
    --primary-700: #7591e6;
    --primary-800: #607dd7;
    --primary-900: #4b69c8;

    /* Soft Secondary Colors */
    --secondary-50: #fdf8ff;
    --secondary-100: #faf0ff;
    --secondary-200: #f5e6ff;
    --secondary-300: #edd1ff;
    --secondary-400: #e2b3ff;
    --secondary-500: #d794ff;
    --secondary-600: #cb75f0;
    --secondary-700: #be56e0;
    --secondary-800: #b137d1;
    --secondary-900: #a418c2;

    /* Soft Accent Colors */
    --accent-green: #16A34A;
    --accent-blue: #b3d9ff;
    --accent-purple: #d4b3ff;
    --accent-pink: #ffb3d9;
    --accent-yellow: #fff2b3;
    --accent-orange: #ffd4b3;

    /* Neutral Soft Colors */
    --gray-50: #fafbfc;
    --gray-100: #f2f4f7;
    --gray-200: #e8ecf0;
    --gray-300: #d1d8e0;
    --gray-400: #b8c4d0;
    --gray-500: #6B7280;
    --gray-600: #869db0;
    --gray-700: #6d8aa0;
    --gray-800: #547790;
    --gray-900: #3b6480;

    /* Light Theme */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-accent: var(--primary-50);
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: var(--gray-500);
    --border: #D1D5DB;
    --shadow: rgba(159, 181, 255, 0.1);
    --shadow-lg: rgba(159, 181, 255, 0.15);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
}

/* Dark Theme */
.dark-theme {
    --bg-primary: #1a1d29;
    --bg-secondary: #242938;
    --bg-accent: #2d3348;
    --text-primary: #f0f2ff;
    --text-secondary: #b8c7ff;
    --text-muted: #869db0;
    --border: #3d4357;
    --shadow: rgba(0, 0, 0, 0.2);
    --shadow-lg: rgba(0, 0, 0, 0.3);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: var(--transition);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-6);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.dark-theme .header {
  background-color: rgba(26, 29, 41, 0.8);
}

.header.scrolled {
  box-shadow: 0 4px 20px var(--shadow-lg);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.logo-text {
  font-size: var(--font-size-xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-desktop {
  display: flex;
  gap: var(--spacing-8);
}

.nav-link {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  padding: var(--spacing-2) 0;
  position: relative;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  transition: var(--transition);
}

.nav-link:hover::after {
  width: 100%;
}

.search-container {
  position: relative;
  flex: 1;
  max-width: 400px;
  margin: 0 var(--spacing-8);
}

.search-input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(159, 181, 255, 0.1);
}

.search-icon {
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.btn-icon:hover {
  background-color: var(--bg-secondary);
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: #ff6b6b;
  border-radius: 50%;
}

.mobile-menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
  padding: var(--spacing-4) 0;
  border-top: 1px solid var(--border);
}

.mobile-search {
  margin-bottom: var(--spacing-4);
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Buttons */
.btn {
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  color: white;
  box-shadow: 0 4px 15px var(--shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-lg);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-600);
  border: 1px solid var(--primary-300);
}

.btn-outline:hover {
  background-color: var(--primary-50);
}

.btn-text {
  background: none;
  border: none;
  color: var(--primary-600);
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.btn-text:hover {
  background-color: var(--primary-50);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 70px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, 
    rgba(159, 181, 255, 0.1) 0%, 
    rgba(215, 148, 255, 0.05) 25%, 
    transparent 50%);
  animation: float 6s ease-in-out infinite;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  align-items: center;
  width: 100%;
}

.hero-left {
  animation: slideInLeft 0.8s ease-out;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent-green);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-8);
  max-width: 600px;
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-12);
}

.stat {
  text-align: center;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Footer */
.footer {
  background: linear-gradient(to top, var(--bg-secondary), var(--bg-primary));
  border-top: 1px solid var(--border);
  padding: var(--spacing-16) 0 var(--spacing-8);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);
}

.footer-brand {
  max-width: 400px;
}

.footer-description {
  color: var(--text-secondary);
  margin: var(--spacing-6) 0;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: var(--spacing-3);
}

.social-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
}

.social-link:hover {
  background-color: var(--primary-50);
  border-color: var(--primary-300);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-8);
}

.footer-column h4 {
  font-weight: 600;
  margin-bottom: var(--spacing-4);
}

.footer-column a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--spacing-1) 0;
  transition: var(--transition);
}

.footer-column a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.footer-legal {
  display: flex;
  gap: var(--spacing-6);
}

.footer-legal a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.footer-legal a:hover {
  color: var(--text-primary);
}

/* Audio Player */
.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--bg-primary);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px var(--shadow-lg);
  transform: translateY(100%);
  transition: var(--transition-slow);
}

.audio-player.show {
  transform: translateY(0);
}

.player-content {
  display: flex;
  align-items: center;
  padding: var(--spacing-4);
  gap: var(--spacing-4);
}

.player-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
  min-width: 0;
}

.player-image {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.player-details {
  min-width: 0;
  max-width: 200px;
}

.player-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-description {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-controls {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-width: 0;
}

.player-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--font-size-lg);
}

.player-btn:hover {
  background-color: var(--bg-secondary);
}

.progress-container {
  flex: 1;
  max-width: 400px;
}

.progress-time {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-2);
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  transition: var(--transition-fast);
}

.progress-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.player-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

.volume-slider {
  width: 80px;
  height: 4px;
  background-color: var(--border);
  border-radius: var(--radius-full);
  appearance: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  border-radius: 50%;
  cursor: pointer;
}

.audio-visualizer {
  display: flex;
  justify-content: center;
  align-items: end;
  height: 40px;
  gap: 2px;
  padding: var(--spacing-4);
}

.visualizer-bar {
  width: 3px;
  background: linear-gradient(to top, var(--primary-500), var(--secondary-500));
  border-radius: var(--radius-sm);
  animation: visualizer 1.5s ease-in-out infinite;
}

/* Scroll to Top */
.scroll-to-top {
  position: fixed;
  bottom: var(--spacing-20);
  right: var(--spacing-6);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  color: white;
  font-size: var(--font-size-lg);
  cursor: pointer;
  box-shadow: 0 4px 15px var(--shadow);
  transition: var(--transition);
  transform: scale(0);
  z-index: 999;
}

.scroll-to-top.show {
  transform: scale(1);
}

.scroll-to-top:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px var(--shadow-lg);
}

/* Toast */
.toast {
  position: fixed;
  top: var(--spacing-20);
  right: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-6);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px var(--shadow-lg);
  transform: translateX(400px);
  transition: var(--transition-slow);
  z-index: 1001;
}

.toast.show {
  transform: translateX(0);
}

.toast-message {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes visualizer {
  0%, 100% { height: 5px; }
  50% { height: 25px; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-4);
  }

  .nav-desktop {
    display: none;
  }

  .search-container {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-menu.show {
    display: block;
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .podcasts-grid {
    grid-template-columns: 1fr;
  }

  .episode-card {
    flex: 0 0 100%;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-4);
    text-align: center;
  }

  .player-content {
    flex-wrap: wrap;
  }

  .player-actions .volume-slider {
    display: none;
  }
}

/* Episode Page Styles */
.episode-main {
  padding-top: 70px;
  min-height: 100vh;
}

.breadcrumb-section {
  padding: var(--spacing-6) 0 var(--spacing-4);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumb-link:hover {
  color: var(--text-primary);
}

.breadcrumb-separator {
  color: var(--text-muted);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

.episode-hero {
  padding: var(--spacing-12) 0;
  background: linear-gradient(135deg, 
    rgba(159, 181, 255, 0.03), 
    rgba(215, 148, 255, 0.03));
}

.episode-hero-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-12);
  align-items: center;
}

.episode-image-container {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 20px 40px var(--shadow-lg);
}

.episode-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.episode-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px var(--shadow);
}

.episode-play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: white;
}

.episode-badges {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.episode-badge {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.episode-badge.featured {
  background: linear-gradient(135deg, var(--accent-green), #9fd89f);
  color: white;
}

.episode-badge.new {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.episode-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
  background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.episode-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-8);
  line-height: 1.6;
}

.episode-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

.episode-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.meta-value {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.episode-actions {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.episode-content-section {
  padding: var(--spacing-16) 0;
}

.episode-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--spacing-12);
}

.episode-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.content-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-8);
}

.content-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-6);
  color: var(--text-primary);
}

.episode-description {
  line-height: 1.7;
  color: var(--text-secondary);
}

.episode-description p {
  margin-bottom: var(--spacing-4);
}

.episode-description h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--spacing-6) 0 var(--spacing-3);
}

.episode-description ul {
  list-style: none;
  padding-left: 0;
  margin: var(--spacing-4) 0;
}

.episode-description li {
  position: relative;
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-2);
}

.episode-description li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary-500);
  font-weight: bold;
}

.guests-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.guest-card {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.guest-card:hover {
  box-shadow: 0 4px 15px var(--shadow);
}

.guest-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.guest-info {
  flex: 1;
}

.guest-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-1);
}

.guest-role {
  font-size: var(--font-size-sm);
  color: var(--primary-600);
  font-weight: 500;
  margin-bottom: var(--spacing-2);
}

.guest-bio {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.timestamps-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.timestamp-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-3);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.timestamp-item:hover {
  background-color: var(--bg-accent);
}

.timestamp-link {
  background: none;
  border: none;
  color: var(--primary-600);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-md);
  transition: var(--transition);
  min-width: 60px;
  text-align: left;
}

.timestamp-link:hover {
  background-color: var(--primary-50);
}

.timestamp-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex: 1;
}

.episode-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  height: fit-content;
  position: sticky;
  top: calc(70px + var(--spacing-6));
}

.sidebar-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
}

.sidebar-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-4);
  color: var(--text-primary);
}

.podcast-info {
  text-align: center;
}

.podcast-cover {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  margin: 0 auto var(--spacing-4);
}

.podcast-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-2);
}

.podcast-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
  line-height: 1.5;
}

.podcast-stats {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-6);
}

.btn-small {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn-full {
  width: 100%;
}

.related-episodes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.related-episode {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.related-episode:hover {
  box-shadow: 0 4px 15px var(--shadow);
}

.related-episode-image {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}

.related-episode-content {
  flex: 1;
  min-width: 0;
}

.related-episode-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-episode-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-2);
}

.sidebar-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
  line-height: 1.5;
}

.sidebar-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.sidebar-input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  transition: var(--transition);
}

.sidebar-input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(159, 181, 255, 0.1);
}

/* Episode Page Responsive */
@media (max-width: 1024px) {
  .episode-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }
  
  .episode-sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 768px) {
  .episode-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-8);
  }
  
  .episode-title {
    font-size: var(--font-size-2xl);
  }
  
  .episode-meta {
    grid-template-columns: 1fr;
  }
  
  .episode-actions {
    justify-content: center;
  }
  
  .guests-grid {
    gap: var(--spacing-4);
  }
  
  .guest-card {
    flex-direction: column;
    text-align: center;
  }
  
  .guest-avatar {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .episode-hero {
    padding: var(--spacing-8) 0;
  }
  
  .episode-title {
    font-size: var(--font-size-xl);
  }
  
  .episode-actions {
    flex-direction: column;
  }
  
  .episode-play-button {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-lg);
  }
}

Step 3 (JavaScript Code):

Now it’s time for the final step. We’ll use JavaScript to add extra functions like showing a message when the episode plays.

Create a new file called script.js.

Paste the below JavaScript code into that file:

document.addEventListener('DOMContentLoaded', function() {
    // Theme Toggle
    const themeToggle = document.getElementById('themeToggle');
    const body = document.body;
    const currentTheme = localStorage.getItem('theme') || 'light-theme';

    body.classList.add(currentTheme);
    themeToggle.textContent = currentTheme === 'light-theme' ? '☀️' : '🌙';

    themeToggle.addEventListener('click', () => {
        if (body.classList.contains('light-theme')) {
            body.classList.replace('light-theme', 'dark-theme');
            themeToggle.textContent = '🌙';
            localStorage.setItem('theme', 'dark-theme');
        } else {
            body.classList.replace('dark-theme', 'light-theme');
            themeToggle.textContent = '☀️';
            localStorage.setItem('theme', 'light-theme');
        }
    });

    // Header Scroll Effect
    const header = document.getElementById('header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

    // Mobile Menu
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const mobileMenu = document.getElementById('mobileMenu');

    mobileMenuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('show');
    });

    // Scroll to Top Button
    const scrollToTop = document.getElementById('scrollToTop');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            scrollToTop.classList.add('show');
        } else {
            scrollToTop.classList.remove('show');
        }
    });

    scrollToTop.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // Toast Notification
    function showToast(message) {
        const toast = document.getElementById('toast');
        const toastMessage = document.getElementById('toastMessage');

        toastMessage.textContent = message;
        toast.classList.add('show');

        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

    // Newsletter Form
    const newsletterForm = document.getElementById('newsletterForm');

    newsletterForm.addEventListener('submit', function(event) {
        event.preventDefault();
        const emailInput = document.getElementById('emailInput');
        const email = emailInput.value;

        if (email) {
            showToast('Thank you for subscribing!');
            newsletterForm.reset();
        } else {
            showToast('Please enter a valid email address.');
        }
    });

    // Audio Player
    const audioElement = document.getElementById('audioElement');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const progressContainer = document.querySelector('.progress-container');
    const progressFill = document.getElementById('progressFill');
    const progressSlider = document.getElementById('progressSlider');
    const currentTimeDisplay = document.getElementById('currentTime');
    const durationDisplay = document.getElementById('duration');
    const volumeBtn = document.getElementById('volumeBtn');
    const volumeSlider = document.getElementById('volumeSlider');
    const audioVisualizer = document.getElementById('audioVisualizer');

    // Sample audio source
    audioElement.src = 'https://www.computerhope.com/jargon/m/example.mp3';

    // Play/Pause functionality
    playPauseBtn.addEventListener('click', () => {
        if (audioElement.paused) {
            audioElement.play();
            playPauseBtn.textContent = '⏸️';
            playPauseBtn.dataset.playing = 'true';
        } else {
            audioElement.pause();
            playPauseBtn.textContent = '▶️';
            playPauseBtn.dataset.playing = 'false';
        }
    });

    // Update progress bar
    function updateProgress() {
        const { currentTime, duration } = audioElement;
        const progressPercent = (currentTime / duration) * 100;
        progressFill.style.width = `${progressPercent}%`;
        currentTimeDisplay.textContent = formatTime(currentTime);
    }

    audioElement.addEventListener('timeupdate', updateProgress);

    // Set progress on click
    progressContainer.addEventListener('click', (e) => {
        const width = progressContainer.clientWidth;
        const clickX = e.offsetX;
        const duration = audioElement.duration;
        audioElement.currentTime = (clickX / width) * duration;
        updateProgress();
    });

    // Drag progress slider
    progressSlider.addEventListener('input', () => {
        const seekTime = (progressSlider.value / 100) * audioElement.duration;
        audioElement.currentTime = seekTime;
        updateProgress();
    });

    // Format time
    function formatTime(time) {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60);
        return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    }

    // Get audio duration on load
    audioElement.addEventListener('loadedmetadata', () => {
        durationDisplay.textContent = formatTime(audioElement.duration);
    });

    // Volume control
    volumeBtn.addEventListener('click', () => {
        if (audioElement.muted) {
            audioElement.muted = false;
            volumeBtn.textContent = '🔊';
            volumeSlider.value = audioElement.volume * 100;
        } else {
            audioElement.muted = true;
            volumeBtn.textContent = '🔇';
            volumeSlider.value = 0;
        }
    });

    volumeSlider.addEventListener('input', () => {
        audioElement.volume = volumeSlider.value / 100;
        if (audioElement.volume === 0) {
            volumeBtn.textContent = '🔇';
        } else {
            volumeBtn.textContent = '🔊';
        }
    });

    // Audio Visualizer (Placeholder)
    function createVisualizerBars() {
        const numberOfBars = 32;
        for (let i = 0; i < numberOfBars; i++) {
            const bar = document.createElement('div');
            bar.classList.add('visualizer-bar');
            audioVisualizer.appendChild(bar);
        }
    }

    createVisualizerBars();

    function simulateAudioPlayback() {
        // Simulate audio analysis and visualizer updates
        const visualizerBars = document.querySelectorAll('.visualizer-bar');
        visualizerBars.forEach((bar, index) => {
            const randomHeight = Math.random() * 30; // Random height for simulation
            bar.style.height = `${randomHeight}px`;
        });
    }

    // Featured Card Play Button
    const featuredPlayButton = document.querySelector('.featured-card .play-button');
    if (featuredPlayButton) {
        featuredPlayButton.addEventListener('click', function() {
            const episodeIndex = this.dataset.episode || '0';
            playEpisode(parseInt(episodeIndex));
        });
    }
    // Episode-specific functionality
    initializeEpisodePage();
});

function initializeEpisodePage() {
    // Check if we're on the episode page
    if (!document.querySelector('.episode-main')) return;
    
    // Timestamp navigation
    const timestampLinks = document.querySelectorAll('.timestamp-link');
    timestampLinks.forEach(link => {
        link.addEventListener('click', function() {
            const time = parseInt(this.dataset.time);
            seekToTime(time);
            showToast('Jumped to ' + formatTime(time));
        });
    });
    
    // Episode play buttons
    const episodePlayButtons = document.querySelectorAll('.episode-play-btn, .episode-play-button');
    episodePlayButtons.forEach(button => {
        button.addEventListener('click', function() {
            const episodeIndex = this.dataset.episode || '0';
            playEpisode(parseInt(episodeIndex));
        });
    });
    
    // Sidebar form submission
    const sidebarForm = document.querySelector('.sidebar-form');
    if (sidebarForm) {
        sidebarForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('input[type="email"]').value;
            if (email) {
                showToast('Successfully subscribed to episode updates!');
                this.reset();
            }
        });
    }
    
    // Related episode play buttons
    const relatedPlayButtons = document.querySelectorAll('.related-episode .btn-text');
    relatedPlayButtons.forEach(button => {
        button.addEventListener('click', function() {
            const episodeIndex = this.dataset.episode;
            if (episodeIndex) {
                playEpisode(parseInt(episodeIndex));
            }
        });
    });
}

function seekToTime(seconds) {
    const audioElement = document.getElementById('audioElement');
    if (audioElement && !audioElement.paused) {
        audioElement.currentTime = seconds;
        updateProgress();
    }
}

function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}

function playEpisode(index) {
    // Get episode data
    const episode = episodesData[index] || episodesData[0];
    
    // Update player UI
    const playerImage = document.getElementById('playerImage');
    const playerTitle = document.getElementById('playerTitle');
    const playerDescription = document.getElementById('playerDescription');
    
    if (playerImage) playerImage.src = episode.image;
    if (playerTitle) playerTitle.textContent = episode.title;
    if (playerDescription) playerDescription.textContent = episode.description;
    
    // Show player
    const audioPlayer = document.getElementById('audioPlayer');
    if (audioPlayer) {
        audioPlayer.style.display = 'block';
        audioPlayer.classList.add('show');
    }
    
    // Update play button state
    const playPauseBtn = document.getElementById('playPauseBtn');
    if (playPauseBtn) {
        playPauseBtn.textContent = '⏸️';
        playPauseBtn.dataset.playing = 'true';
    }
    
    // Show toast
    showToast(`Now playing: ${episode.title}`);
    
    // Start audio (simulated)
    simulateAudioPlayback();
}

// Enhanced episodes data for the episode page
const episodesData = [
    {
        title: "The Future of AI in Everyday Life",
        description: "How artificial intelligence is transforming our daily experiences",
        image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400",
        duration: "42:15",
        category: "Technology"
    },
    {
        title: "Blockchain Revolution",
        description: "Understanding the impact of blockchain technology",
        image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400",
        duration: "38:42",
        category: "Technology"
    },
    {
        title: "Quantum Computing Basics",
        description: "An introduction to quantum computing principles",
        image: "https://images.unsplash.com/photo-1551808525-51a94da548ce?w=400",
        duration: "45:12",
        category: "Science"
    },
    {
        title: "Cybersecurity in 2024",
        description: "Latest trends in cybersecurity and data protection",
        image: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400",
        duration: "52:30",
        category: "Technology"
    }
];

Final Output:

Read Also Create a Responsive Popup Contact Form HTML, CSS, JavaScript Tutorial.webp

Create a Responsive Popup Contact Form: HTML, CSS, JavaScript Tutorial

Conclusion:

Creating a podcast episode page using just HTML and CSS is a great way to start building your own podcast website. It’s beginner-friendly and doesn't require any complex code or CMS platforms.

This simple design works well for mobile and desktop, and you can customize it further with colors, fonts, or more episodes.

Now that you know how to do it, why wait? Start building your podcast web page today and share your voice with the world!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create podcast episode page with html and css, build responsive podcast page using html and css, step by step html css podcast layout tutorial, podcast website design for beginners, easy html and css podcast player layout, html podcast, css podcast layout, podcast website, podcast template, podcast detail page template, web design, podcast page

End of the article

Latest Components

Free HTML News Website Landing Page Code Snippet: Modern & Responsive

by Faraz - April 21, 2026

Download a free, high-performance HTML news website landing page template. Built with Tailwind CSS and JavaScript, this "Newstant" template is optimized for corporate news and business intelligence portals.