Megapod

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Megapod is a website template for podcasts and talk shows, built on Bootstrap 5, with a dark hero and violet accents. The layout is responsive and works in all popular web browsers. It comes with seven pages: home, about, episodes, episode details, blog, blog details and contact.

The home page has the latest episode with an audio player, an episode list with players and a topic filter, a support banner and a grid of recent episodes that play in place. The inner pages add show notes with a reply form, featured guests, a blog with a sidebar and search, and a contact page with a click-to-load map, contact details and a working contact form.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4.1 and jQuery), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. The episode players use the browser’s own audio with keyboard-operable seek and volume bars, the topic filter and the off-canvas menu are built in, and Lucide SVG icons replace the icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all eight pages together went from 9.2 MB and 239 requests to 3.2 MB and 125 requests. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading, the logo is an SVG, and nothing loads from the episodes until a visitor presses Play.
• No third-party requests: the Nunito font is self-hosted and the contact map loads from OpenStreetMap only when a visitor asks for it.
• Working forms: the contact, reply and newsletter forms send email through the included PHP script with validation, clear sending, success and error messages and a spam trap; the search fields show matching posts on the blog page.
• Accessibility: a skip link, one main heading per page, labelled fields and icon buttons, a keyboard-friendly menu and players, visible focus and WCAG AA text contrast (the violet is a shade deeper).
• Sharper photos: higher-resolution hero, banner, episode and guest photos, new demo copy and generated demo audio.