Podcast Website Template Using HTML, CSS, JavaScript (Free)

By Faraz - June 16, 2025

Build a modern Podcast website using HTML, CSS, and JavaScript. Get a free Podcast template with code, easy steps, and tips for a clean, responsive design.

Join us on Telegram

podcast-website-template-using-html-css-javascript-free.webp

Read Also futuristic-vault-login-fingerprint-scan-and-access-portal.webp

Futuristic Vault Login with Fingerprint Scan using HTML CSS JS

If you want to create a beautiful and modern podcast website, you don’t always need WordPress or paid tools. In this guide, we will show you how to make a podcast website template using HTML, CSS, and JavaScript — no complex frameworks required.

This tutorial is perfect for beginners who want to learn by doing. At the end, you’ll have a fully responsive, clean, and modern podcast website template that you can customize and use for your own shows.

Prerequisites

Before you start, make sure you have:

Basic knowledge of HTML, CSS, and JavaScript
A code editor (like VSCode or Sublime Text)
A browser (like Chrome) to test your work
(Optional) Basic knowledge of Flexbox or CSS Grid for layout

Source Code

Step 1 (HTML Code):

First, we will start with HTML. Here we will create the layout of the website. It will have:

A header
Hero section
Featured podcasts
Latest episodes
Categories
Newsletter sign-up
Footer

What to do:

Copy the HTML code below and paste it into your index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PodcastHub - Modern Podcast Platform</title>
    <meta name="description"
        content="Discover, listen, and enjoy your favorite podcasts with our modern streaming platform">
    <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">

    <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="#home" 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="#home" 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>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-bg"></div>
        <div class="container">
            <div class="hero-content">
                <div class="hero-left">
                    <div class="hero-badge">
                        <span class="status-dot"></span>
                        <span>Now Live</span>
                    </div>
                    <h1 class="hero-title">
                        Discover Your Next
                        <span class="block gradient-text">Favorite Podcast</span>
                    </h1>
                    <p class="hero-description">
                        Immerse yourself in captivating stories, expert insights, and inspiring conversations
                        from creators around the world. Your perfect podcast journey starts here.
                    </p>
                    <div class="hero-buttons">
                        <button class="btn btn-primary">
                            ▶️ Start Listening
                        </button>
                        <button class="btn btn-secondary">
                            🎧 Browse Library
                        </button>
                    </div>
                    <div class="hero-stats">
                        <div class="stat">
                            <div class="stat-number">10K+</div>
                            <div class="stat-label">Episodes</div>
                        </div>
                        <div class="stat">
                            <div class="stat-number">500+</div>
                            <div class="stat-label">Podcasts</div>
                        </div>
                        <div class="stat">
                            <div class="stat-number">1M+</div>
                            <div class="stat-label">Listeners</div>
                        </div>
                    </div>
                </div>
                <div class="hero-right">
                    <div class="featured-card">
                        <div class="featured-badges">
                            <span class="badge badge-featured">Featured</span>
                            <span class="badge badge-latest">📅 Latest</span>
                        </div>
                        <div class="featured-image">
                            <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400"
                                alt="Featured Episode">
                            <button class="play-button" data-episode="0">▶️</button>
                        </div>
                        <div class="featured-content">
                            <h3>The Future of AI in Everyday Life</h3>
                            <p>How artificial intelligence is transforming our daily experiences.</p>
                            <div class="featured-meta">
                                <span>42:15 • 12.5K plays</span>
                                <button class="btn-text" data-episode="0">Play Now</button>
                            </div>
                        </div>
                        <div class="glass-effect">
                            <div class="hero-audio-visualizer">
                                <div class="audio-bar" style="height:8px"></div>
                                <div class="audio-bar" style="height:16px"></div>
                                <div class="audio-bar" style="height:12px"></div>
                                <div class="audio-bar" style="height:20px"></div>
                                <div class="audio-bar" style="height:6px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Podcasts -->
    <section class="section" id="podcasts">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    🎧 Featured Podcasts
                </div>
                <h2 class="section-title">
                    Trending Shows You'll
                    <span class="block gradient-text">Love to Follow</span>
                </h2>
                <p class="section-description">
                    Hand-picked podcasts from our community of creators, covering everything from
                    technology and business to wellness and entertainment.
                </p>
            </div>
            <div class="podcasts-grid" id="podcastsGrid">
                <!-- Podcasts will be populated by JavaScript -->
            </div>
            <div class="section-footer">
                <button class="btn btn-outline">Explore All Podcasts</button>
            </div>
        </div>
    </section>

    <!-- Latest Episodes -->
    <section class="section episodes-section">
        <div class="container">
            <div class="section-header-carousel">
                <div>
                    <div class="section-badge">
                        📅 Latest Episodes
                    </div>
                    <h2 class="section-title">
                        Fresh Content
                        <span class="block gradient-text">Just Dropped</span>
                    </h2>
                </div>
                <div class="carousel-controls">
                    <button class="carousel-btn" id="prevBtn">‹</button>
                    <button class="carousel-btn" id="nextBtn">›</button>
                </div>
            </div>
            <div class="episodes-carousel">
                <div class="episodes-track" id="episodesTrack">
                    <!-- Episodes will be populated by JavaScript -->
                </div>
            </div>
            <div class="carousel-dots" id="carouselDots">
                <!-- Dots will be populated by JavaScript -->
            </div>
        </div>
    </section>

    <!-- Categories -->
    <section class="section" id="categories">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    Explore Categories
                </div>
                <h2 class="section-title">
                    Find Your Perfect
                    <span class="block gradient-text">Content Match</span>
                </h2>
                <p class="section-description">
                    Browse through our diverse collection of podcast categories and discover
                    content that matches your interests and passions.
                </p>
            </div>
            <div class="categories-grid" id="categoriesGrid">
                <!-- Categories will be populated by JavaScript -->
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="section newsletter-section">
        <div class="container">
            <div class="newsletter-card">
                <div class="newsletter-content">
                    <div class="section-badge">
                        🔔 Stay Updated
                    </div>
                    <h2 class="section-title">Never Miss a Beat</h2>
                    <p class="section-description">
                        Get personalized podcast recommendations, exclusive early access to new episodes,
                        and curated weekly playlists delivered straight to your inbox.
                    </p>
                    <form class="newsletter-form" id="newsletterForm">
                        <input type="email" placeholder="Enter your email address" class="newsletter-input"
                            id="emailInput" required>
                        <button type="submit" class="btn btn-primary">
                            🎧 Subscribe
                        </button>
                    </form>
                    <div class="newsletter-features">
                        <div class="feature">
                            <span class="feature-dot green"></span>
                            <span>Weekly recommendations</span>
                        </div>
                        <div class="feature">
                            <span class="feature-dot blue"></span>
                            <span>Early access</span>
                        </div>
                        <div class="feature">
                            <span class="feature-dot purple"></span>
                            <span>Curated playlists</span>
                        </div>
                        <div class="feature">
                            <span class="feature-dot pink"></span>
                            <span>No spam, ever</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 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="section-wrapper">
                <div class="section-inner">
                    <div class="section-text">
                        <h3>Stay in the loop</h3>
                        <p>Get the latest podcast recommendations and updates</p>
                    </div>
                    <button class="subscribe-button">Subscribe to Newsletter</button>
                </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">
                    © 2025 PodcastHub. All rights reserved. <br>
                    Made with <span style="color: red;">❤</span> by <a href="https://www.codewithfaraz.com" target="_blank"
                        style="text-decoration: none; color: #2563EB;">codewithfaraz</a>
                </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 how to convert text to speech in javascript.jpg

How to Convert Text to Speech using HTML, CSS and JavaScript

Step 2 (CSS Code):

Next, we will move to CSS. With CSS, we will modernize and clean up the website.

What to do:

Copy the CSS code below and paste it into your styles.css 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);
}

.block {
    display: block;
}

/* 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 {
    font-family: var(--font-family);
    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 {
    font-family: var(--font-family);
    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 {
    font-family: var(--font-family);
    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 {
    font-family: var(--font-family);
    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-200);
}

.btn-text {
    font-family: var(--font-family);
    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-200);
}

/* 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;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-6);
    backdrop-filter: blur(12px);
}

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

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
}

.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);
}

.hero-stats {
    display: flex;
    gap: var(--spacing-8);
}

.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);
}

.hero-right {
    padding-top: 10px;
    animation: slideInRight 0.8s ease-out;
}

.featured-card {
    position: relative;
    background-color: var(--bg-secondary);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    box-shadow: 0 20px 40px var(--shadow-lg);
    transition: var(--transition);
}

.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px var(--shadow-lg);
}

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

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

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

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

.featured-image {
    position: relative;
    /* aspect-ratio: 1; */
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
    cursor: pointer;
}

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

.featured-image:hover img {
    transform: scale(1.1);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(12px);
}

.featured-image:hover .play-button,
.podcast-image:hover .play-button,
.episode-image:hover .play-button {
    transform: translate(-50%, -50%) scale(1);
}

.featured-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-3);
    line-height: 1.4;
}

.featured-content p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.5;
}

.featured-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border);
}

.featured-meta span {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.hero-audio-visualizer {
    display: flex;
    align-items: end;
    height: 40px;
    gap: 2px;
}

.glass-effect {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    position: absolute;
    bottom: -16px;
    right: -16px;
    border-radius: 16px;
    padding: 16px;
}


.audio-bar {
    width: 3px;
    background: linear-gradient(to top, #9557ff, #667eea);
    border-radius: 2px;
    animation: audioBar 1.5s ease-in-out infinite;
}

.audio-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.audio-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.audio-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.audio-bar:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes audioBar {

    0%,
    100% {
        height: 5px;
    }

    50% {
        height: 25px;
    }
}

/* Sections */
.section {
    padding: var(--spacing-16) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-16);
    animation: fadeInUp 0.8s ease-out;
}

.section-header-carousel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;

}

.section-badge {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-4);
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
}

.section-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-footer {
    text-align: center;
    margin-top: var(--spacing-12);
}

/* Podcasts Grid */
.podcasts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-8);
}

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

.podcast-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--shadow-lg);
}

.podcast-image {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

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

.podcast-card:hover .podcast-image img {
    transform: scale(1.1);
}

.podcast-category {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-3);
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.podcast-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.podcast-author {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-2);
}

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

.podcast-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--spacing-4);
}

.podcast-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border);
}

/* Episodes Carousel */
.episodes-section {
    background: linear-gradient(to bottom, transparent, var(--bg-secondary));
}

.episodes-carousel {
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.episodes-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: var(--spacing-6);
}

.episode-card {
    flex: 0 0 calc(33.333% - var(--spacing-4));
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    transition: var(--transition);
}

.episode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--shadow-lg);
}

.episode-image {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
    cursor: pointer;
}

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

.episode-card:hover .episode-image img {
    transform: scale(1.1);
}

.episode-new {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-3);
    background: linear-gradient(135deg, var(--accent-green), #9fd89f);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.episode-content h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    line-height: 1.4;
}

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

.episode-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--spacing-4);
}

.carousel-controls {
    display: flex;
    gap: var(--spacing-2);
}

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

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

.carousel-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-8);
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    outline: none;
}

.carousel-dot.active {
    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    width: 24px;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
}

.category-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px var(--shadow-lg);
}

.category-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    transition: var(--transition);
}

.category-card:hover .category-icon {
    transform: scale(1.1);
}

.category-name {
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    transition: var(--transition);
}

.category-card:hover .category-name {
    color: var(--primary-600);
}

.category-count {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-4);
}

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

.category-progress-fill {
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.category-card:hover .category-progress-fill {
    transform: scaleX(1);
}

/* Newsletter */
.newsletter-section {
    background: linear-gradient(135deg,
            rgba(159, 181, 255, 0.05),
            rgba(215, 148, 255, 0.05));
}

.newsletter-card {
    background-color: var(--bg-secondary);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-12);
    text-align: center;
    box-shadow: 0 20px 40px var(--shadow-lg);
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-4);
    max-width: 400px;
    margin: var(--spacing-8) auto;
}

.newsletter-input {
    font-family: var(--font-family);
    flex: 1;
    padding: var(--spacing-3) var(--spacing-2);
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    transition: var(--transition);
}

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

.newsletter-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

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

.feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.feature-dot.green {
    background-color: var(--accent-green);
}

.feature-dot.blue {
    background-color: var(--accent-blue);
}

.feature-dot.purple {
    background-color: var(--accent-purple);
}

.feature-dot.pink {
    background-color: var(--accent-pink);
}

/* 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-200);
    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 {
    font-size: 0.875rem;
    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 {
    font-size: 0.875rem;
    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-title {
        font-size: var(--font-size-3xl);
    }

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

    .hero-stats {
        justify-content: center;
    }

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

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

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

    .newsletter-form {
        flex-direction: column;
    }

    .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;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--font-size-2xl);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

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

    .newsletter-features {
        flex-direction: column;
        align-items: center;
    }
}

.section-wrapper {
    padding-top: 32px;
    padding-bottom: 32px;
    border-top: 1px solid var(--border);
}

.section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 768px) {
    .section-inner {
        flex-direction: row;
        gap: 0;
    }
}

.section-text p {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.subscribe-button {
    font-family: var(--font-family);
    background: linear-gradient(to right, #7C3AED, #DB2777);
    color: #fff;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.subscribe-button:hover {
    background: linear-gradient(to right, #6D28D9, #BE185D);
}

Step 3 (JavaScript Code):

In this final step, we will use JavaScript to add important functions that will make your podcast website work nicely. These functions will handle things like showing mock podcasts, episodes, and interactive features such as a toast message or an audio player.

What to do:

Copy the JavaScript code below and paste it into your script.js file.

const mockPodcasts = [
  {
    id: 1,
    title: "Tech Innovators",
    description: "Exploring the latest in technology and innovation with industry leaders.",
    image: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=400",
    category: "Technology",
    episodes: 45,
    subscribers: "125K",
    rating: 4.8,
    author: "Sarah Chen",
    duration: "35 min avg"
  },
  {
    id: 2,
    title: "Mindful Moments",
    description: "Daily meditation and mindfulness practices for busy professionals.",
    image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400",
    category: "Health & Wellness",
    episodes: 78,
    subscribers: "89K",
    rating: 4.9,
    author: "Dr. Michael Park",
    duration: "15 min avg"
  },
  {
    id: 3,
    title: "Creative Minds",
    description: "Conversations with artists, designers, and creative professionals.",
    image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400",
    category: "Arts & Culture",
    episodes: 62,
    subscribers: "67K",
    rating: 4.7,
    author: "Emma Rodriguez",
    duration: "42 min avg"
  },
  {
    id: 4,
    title: "Business Breakthrough",
    description: "Strategies and insights from successful entrepreneurs and business leaders.",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400",
    category: "Business",
    episodes: 93,
    subscribers: "156K",
    rating: 4.6,
    author: "James Wilson",
    duration: "48 min avg"
  },
  {
    id: 5,
    title: "Science Spotlight",
    description: "Making complex scientific discoveries accessible to everyone.",
    image: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=400",
    category: "Science",
    episodes: 34,
    subscribers: "78K",
    rating: 4.8,
    author: "Dr. Lisa Thompson",
    duration: "38 min avg"
  },
  {
    id: 6,
    title: "Storyteller's Corner",
    description: "Immersive storytelling experiences from around the world.",
    image: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400",
    category: "Entertainment",
    episodes: 51,
    subscribers: "94K",
    rating: 4.9,
    author: "Maria Garcia",
    duration: "28 min avg"
  }
];

const mockEpisodes = [
  {
    id: 1,
    podcastId: 1,
    title: "The Future of AI in Everyday Life",
    description: "How artificial intelligence is transforming our daily experiences.",
    duration: "42:15",
    publishDate: "2024-01-15",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400",
    plays: "12.5K",
    isNew: true
  },
  {
    id: 2,
    podcastId: 2,
    title: "5-Minute Morning Meditation",
    description: "Start your day with clarity and intention through guided meditation.",
    duration: "05:32",
    publishDate: "2024-01-14",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=400",
    plays: "8.9K",
    isNew: true
  },
  {
    id: 3,
    podcastId: 3,
    title: "Digital Art Revolution",
    description: "Exploring how technology is changing the art world forever.",
    duration: "38:22",
    publishDate: "2024-01-13",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400",
    plays: "15.2K",
    isNew: false
  },
  {
    id: 4,
    podcastId: 4,
    title: "Building a Startup from Scratch",
    description: "Real stories and practical advice from successful entrepreneurs.",
    duration: "51:08",
    publishDate: "2024-01-12",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1553484771-371a605b060b?w=400",
    plays: "22.1K",
    isNew: false
  },
  {
    id: 5,
    podcastId: 5,
    title: "Climate Science Updates",
    description: "Latest research and findings in climate science and environmental protection.",
    duration: "33:45",
    publishDate: "2024-01-11",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=400",
    plays: "9.8K",
    isNew: false
  },
  {
    id: 6,
    podcastId: 6,
    title: "Myths and Legends",
    description: "Ancient stories retold for the modern world with expert analysis.",
    duration: "29:17",
    publishDate: "2024-01-10",
    audioUrl: "https://www.soundjay.com/misc/sounds/beep-07.mp3",
    image: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400",
    plays: "18.2K",
    isNew: false
  }
];

const categories = [
  { name: "Technology", count: 156, color: "linear-gradient(135deg, #b3d9ff, #9fb5ff)", icon: "💻" },
  { name: "Health & Wellness", count: 89, color: "linear-gradient(135deg, #b8e6b8, #9fd89f)", icon: "🧘" },
  { name: "Business", count: 234, color: "linear-gradient(135deg, #ffd4b3, #ffb399)", icon: "💼" },
  { name: "Arts & Culture", count: 67, color: "linear-gradient(135deg, #ffb3d9, #ff99cc)", icon: "🎨" },
  { name: "Science", count: 98, color: "linear-gradient(135deg, #b3ffff, #99f2f2)", icon: "🔬" },
  { name: "Entertainment", count: 178, color: "linear-gradient(135deg, #d4b3ff, #c299ff)", icon: "🎭" },
  { name: "Education", count: 143, color: "linear-gradient(135deg, #fff2b3, #ffe599)", icon: "📚" },
  { name: "News & Politics", count: 87, color: "linear-gradient(135deg, #d9d9d9, #cccccc)", icon: "📰" }
];

// Global variables
let currentEpisodeIndex = 0;
let isPlaying = false;
let currentAudio = null;
let episodeCarouselIndex = 0;

// DOM elements
const themeToggle = document.getElementById('themeToggle');
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mobileMenu = document.getElementById('mobileMenu');
const scrollToTop = document.getElementById('scrollToTop');
const audioPlayer = document.getElementById('audioPlayer');
const audioElement = document.getElementById('audioElement');
const newsletterForm = document.getElementById('newsletterForm');
const toast = document.getElementById('toast');
const header = document.getElementById('header');

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
  initializeTheme();
  setupEventListeners();
  populatePodcasts();
  populateEpisodes();
  populateCategories();
  setupScrollAnimations();
  setupCarousel();
  setupAudioPlayer();
});

// Theme Management
function initializeTheme() {
  const savedTheme = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const shouldBeDark = savedTheme ? savedTheme === 'dark' : prefersDark;
  
  if (shouldBeDark) {
    document.body.classList.add('dark-theme');
    themeToggle.textContent = '☀️';
  } else {
    document.body.classList.remove('dark-theme');
    themeToggle.textContent = '🌙';
  }
}

function toggleTheme() {
  const isDark = document.body.classList.contains('dark-theme');
  
  if (isDark) {
    document.body.classList.remove('dark-theme');
    themeToggle.textContent = '🌙';
    localStorage.setItem('theme', 'light');
  } else {
    document.body.classList.add('dark-theme');
    themeToggle.textContent = '☀️';
    localStorage.setItem('theme', 'dark');
  }
}

// Event Listeners
function setupEventListeners() {
  // Theme toggle
  themeToggle.addEventListener('click', toggleTheme);
  
  // Mobile menu
  mobileMenuToggle.addEventListener('click', toggleMobileMenu);
  
  // Scroll to top
  scrollToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
  
  // Header scroll effect
  window.addEventListener('scroll', handleScroll);
  
  // Newsletter form
  newsletterForm.addEventListener('submit', handleNewsletterSubmit);
  
  // Smooth scroll for navigation links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
        if (mobileMenu.classList.contains('show')) {
          toggleMobileMenu();
        }
      }
    });
  });
}

function toggleMobileMenu() {
  mobileMenu.classList.toggle('show');
}

function handleScroll() {
  const scrollY = window.scrollY;
  
  // Header scroll effect
  if (scrollY > 20) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
  
  // Scroll to top button
  if (scrollY > 300) {
    scrollToTop.classList.add('show');
  } else {
    scrollToTop.classList.remove('show');
  }
}

// Newsletter
function handleNewsletterSubmit(e) {
  e.preventDefault();
  const email = document.getElementById('emailInput').value;
  
  if (!email) {
    showToast('Please enter your email address', 'error');
    return;
  }
  
  if (!isValidEmail(email)) {
    showToast('Please enter a valid email address', 'error');
    return;
  }
  
  // Simulate API call
  showToast('Subscribing...', 'info');
  
  setTimeout(() => {
    showToast('Successfully subscribed! 🎉', 'success');
    document.getElementById('emailInput').value = '';
  }, 1000);
}

function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function showToast(message, type = 'info') {
  const toastMessage = document.getElementById('toastMessage');
  toastMessage.textContent = message;
  toast.classList.add('show');
  
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);
}

// Content Population
function populatePodcasts() {
  const podcastsGrid = document.getElementById('podcastsGrid');
  
  mockPodcasts.forEach((podcast, index) => {
    const podcastCard = createPodcastCard(podcast);
    podcastCard.style.animationDelay = `${index * 0.1}s`;
    podcastsGrid.appendChild(podcastCard);
  });
}

function createPodcastCard(podcast) {
  const card = document.createElement('div');
  card.className = 'podcast-card';
  card.innerHTML = `
    <div class="podcast-image">
      <img src="${podcast.image}" alt="${podcast.title}" loading="lazy">
      <div class="podcast-category">${podcast.category}</div>
      <button class="play-button" data-episode="${podcast.id - 1}">▶️</button>
    </div>
    <div class="podcast-content">
      <h3>${podcast.title}</h3>
      <p class="podcast-author">by ${podcast.author}</p>
      <p class="podcast-description">${podcast.description}</p>
      <div class="podcast-meta">
        <span>${podcast.episodes} episodes • ${podcast.duration}</span>
        <span>⭐ ${podcast.rating}</span>
      </div>
      <div class="podcast-footer">
        <span>${podcast.subscribers} subscribers</span>
        <button class="btn-text" data-episode="${podcast.id - 1}">Listen</button>
      </div>
    </div>
  `;
  
  // Add event listeners for play buttons
  const playButtons = card.querySelectorAll('[data-episode]');
  playButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      e.stopPropagation();
      const episodeId = parseInt(button.dataset.episode);
      playEpisode(mockEpisodes[episodeId]);
    });
  });
  
  return card;
}

function populateEpisodes() {
  const episodesTrack = document.getElementById('episodesTrack');
  
  mockEpisodes.forEach((episode, index) => {
    const episodeCard = createEpisodeCard(episode);
    episodeCard.style.animationDelay = `${index * 0.1}s`;
    episodesTrack.appendChild(episodeCard);
  });
  
  setupCarouselDots();
}

function createEpisodeCard(episode) {
  const card = document.createElement('div');
  card.className = 'episode-card';
  
  const publishDate = new Date(episode.publishDate).toLocaleDateString('en-US', { 
    month: 'short', 
    day: 'numeric' 
  });
  
  card.innerHTML = `
    <div class="episode-image">
      <img src="${episode.image}" alt="${episode.title}" loading="lazy">
      ${episode.isNew ? '<div class="episode-new">New</div>' : ''}
      <button class="play-button" data-episode-id="${episode.id}">▶️</button>
    </div>
    <div class="episode-content">
      <h3>${episode.title}</h3>
      <p class="episode-description">${episode.description}</p>
      <div class="episode-meta">
        <span>${publishDate} • ${episode.duration}</span>
        <span>${episode.plays} plays</span>
      </div>
      <button class="btn btn-secondary" data-episode-id="${episode.id}">
        ▶️ Play Episode
      </button>
    </div>
  `;
  
  // Add event listeners for play buttons
  const playButtons = card.querySelectorAll('[data-episode-id]');
  playButtons.forEach(button => {
    button.addEventListener('click', (e) => {
      e.stopPropagation();
      playEpisode(episode);
    });
  });
  
  return card;
}

function populateCategories() {
  const categoriesGrid = document.getElementById('categoriesGrid');
  
  categories.forEach((category, index) => {
    const categoryCard = createCategoryCard(category);
    categoryCard.style.animationDelay = `${index * 0.1}s`;
    categoriesGrid.appendChild(categoryCard);
  });
}

function createCategoryCard(category) {
  const card = document.createElement('div');
  card.className = 'category-card';
  card.innerHTML = `
    <div class="category-icon" style="background: ${category.color}">${category.icon}</div>
    <h3 class="category-name">${category.name}</h3>
    <p class="category-count">${category.count} podcasts</p>
    <div class="category-progress">
      <div class="category-progress-fill" style="background: ${category.color}"></div>
    </div>
  `;
  
  return card;
}

// Episodes Carousel
function setupCarousel() {
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  
  prevBtn.addEventListener('click', () => moveCarousel(-1));
  nextBtn.addEventListener('click', () => moveCarousel(1));
  
  updateCarouselButtons();
}

function setupCarouselDots() {
  const carouselDots = document.getElementById('carouselDots');
  const maxIndex = Math.max(0, mockEpisodes.length - 3);
  
  for (let i = 0; i <= maxIndex; i++) {
    const dot = document.createElement('button');
    dot.className = 'carousel-dot';
    if (i === 0) dot.classList.add('active');
    
    dot.addEventListener('click', () => {
      episodeCarouselIndex = i;
      updateCarousel();
      updateCarouselDots();
      updateCarouselButtons();
    });
    
    carouselDots.appendChild(dot);
  }
}

function moveCarousel(direction) {
  const maxIndex = Math.max(0, mockEpisodes.length - 3);
  episodeCarouselIndex += direction;
  
  if (episodeCarouselIndex < 0) episodeCarouselIndex = 0;
  if (episodeCarouselIndex > maxIndex) episodeCarouselIndex = maxIndex;
  
  updateCarousel();
  updateCarouselDots();
  updateCarouselButtons();
}

function updateCarousel() {
  const episodesTrack = document.getElementById('episodesTrack');
  const translateX = -(episodeCarouselIndex * (100 / 3));
  episodesTrack.style.transform = `translateX(${translateX}%)`;
}

function updateCarouselDots() {
  const dots = document.querySelectorAll('.carousel-dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === episodeCarouselIndex);
  });
}

function updateCarouselButtons() {
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const maxIndex = Math.max(0, mockEpisodes.length - 3);
  
  prevBtn.disabled = episodeCarouselIndex === 0;
  nextBtn.disabled = episodeCarouselIndex >= maxIndex;
}

// Audio Player
function setupAudioPlayer() {
  const playPauseBtn = document.getElementById('playPauseBtn');
  const closePlayerBtn = document.getElementById('closePlayerBtn');
  const progressSlider = document.getElementById('progressSlider');
  const volumeSlider = document.getElementById('volumeSlider');
  const volumeBtn = document.getElementById('volumeBtn');
  
  playPauseBtn.addEventListener('click', togglePlayPause);
  closePlayerBtn.addEventListener('click', closePlayer);
  progressSlider.addEventListener('input', seekAudio);
  volumeSlider.addEventListener('input', changeVolume);
  volumeBtn.addEventListener('click', toggleMute);
  
  audioElement.addEventListener('timeupdate', updateProgress);
  audioElement.addEventListener('loadedmetadata', updateDuration);
  audioElement.addEventListener('ended', () => {
    isPlaying = false;
    updatePlayButton();
  });
  
  // Setup audio visualizer
  setupAudioVisualizer();
}

function playEpisode(episode) {
  currentAudio = episode;
  isPlaying = true;
  
  // Update player UI
  document.getElementById('playerImage').src = episode.image;
  document.getElementById('playerTitle').textContent = episode.title;
  document.getElementById('playerDescription').textContent = episode.description;
  
  // Load and play audio
  audioElement.src = episode.audioUrl;
  audioElement.play();
  
  // Show player
  audioPlayer.classList.add('show');
  audioPlayer.style.display = 'block';
  
  updatePlayButton();
  updateVisualizer();
}

function togglePlayPause() {
  if (isPlaying) {
    audioElement.pause();
    isPlaying = false;
  } else {
    audioElement.play();
    isPlaying = true;
  }
  updatePlayButton();
  updateVisualizer();
}

function updatePlayButton() {
  const playPauseBtn = document.getElementById('playPauseBtn');
  playPauseBtn.textContent = isPlaying ? '⏸️' : '▶️';
}

function closePlayer() {
  audioPlayer.classList.remove('show');
  setTimeout(() => {
    audioPlayer.style.display = 'none';
    audioElement.pause();
    audioElement.src = '';
    isPlaying = false;
    currentAudio = null;
  }, 300);
}

function seekAudio() {
  const progressSlider = document.getElementById('progressSlider');
  const seekTime = (progressSlider.value / 100) * audioElement.duration;
  audioElement.currentTime = seekTime;
}

function changeVolume() {
  const volumeSlider = document.getElementById('volumeSlider');
  audioElement.volume = volumeSlider.value / 100;
  
  const volumeBtn = document.getElementById('volumeBtn');
  volumeBtn.textContent = volumeSlider.value > 0 ? '🔊' : '🔇';
}

function toggleMute() {
  const volumeSlider = document.getElementById('volumeSlider');
  const volumeBtn = document.getElementById('volumeBtn');
  
  if (audioElement.volume > 0) {
    audioElement.volume = 0;
    volumeSlider.value = 0;
    volumeBtn.textContent = '🔇';
  } else {
    audioElement.volume = 0.8;
    volumeSlider.value = 80;
    volumeBtn.textContent = '🔊';
  }
}

function updateProgress() {
  const progressSlider = document.getElementById('progressSlider');
  const progressFill = document.getElementById('progressFill');
  const currentTimeSpan = document.getElementById('currentTime');
  
  const progress = (audioElement.currentTime / audioElement.duration) * 100;
  progressSlider.value = progress || 0;
  progressFill.style.width = `${progress || 0}%`;
  
  currentTimeSpan.textContent = formatTime(audioElement.currentTime);
}

function updateDuration() {
  const durationSpan = document.getElementById('duration');
  durationSpan.textContent = formatTime(audioElement.duration);
}

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

function setupAudioVisualizer() {
  const visualizer = document.getElementById('audioVisualizer');
  
  // Create visualizer bars
  for (let i = 0; i < 20; i++) {
    const bar = document.createElement('div');
    bar.className = 'visualizer-bar';
    bar.style.animationDelay = `${i * 0.1}s`;
    visualizer.appendChild(bar);
  }
}

function updateVisualizer() {
  const visualizerBars = document.querySelectorAll('.visualizer-bar');
  
  visualizerBars.forEach((bar, index) => {
    if (isPlaying) {
      const height = Math.random() * 20 + 5;
      bar.style.height = `${height}px`;
      bar.style.animationPlayState = 'running';
    } else {
      bar.style.height = '5px';
      bar.style.animationPlayState = 'paused';
    }
  });
}

// Scroll Animations
function setupScrollAnimations() {
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, observerOptions);

  // Observe all animated elements
  const animatedElements = document.querySelectorAll('.podcast-card, .episode-card, .category-card, .section-header');
  animatedElements.forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(50px)';
    el.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
    observer.observe(el);
  });
}

// Utility Functions
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Auto-update visualizer when playing
setInterval(() => {
  if (isPlaying) {
    updateVisualizer();
  }
}, 100);

Final Output:

podcast-website-template-using-html-css-javascript-free.gif

Read Also

how-to-create-mega-menu-navbar-using-html-css-and-javascript.webp

How to Create Mega Menu Navbar Using HTML, CSS & JavaScript

Conclusion:

Creating a podcast website template using HTML, CSS, and JavaScript is easier than you might think. With simple code and a bit of creativity, you can build a modern, fast, and clean site that works seamlessly on all devices.

This guide gives you the foundation — feel free to add features like social sharing buttons, episode filters, or even integrate podcast APIs as your next steps.

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: podcast website, podcast template, podcast website template using html css javascript, build responsive podcast website template step by step, modern podcast website design for beginners, free podcast website template source code

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.