Eighty8

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Eighty8 is a radio station template with a dark layout and a bright yellow accent, built on Bootstrap 5. It suits online radio, podcasts, DJ collectives and music studios. The layout is responsive and mobile-ready. There are seven pages: home, about, charts, DJs, blog, contact and an elements page.

The home page opens with the station’s city line-up and an “Up next” slider over a full-height studio photo, followed by promo boxes, a podcast player with a waveform and a play button, and a charts banner. The charts page lists genre playlists and a weekly top ten, the DJs page shows ten resident DJs with their shows and social links plus a weekly schedule in day tabs, and the contact page has the studio details, a map that loads on click and a working contact form. Every page ends with a footer of locations, top shows, recent posts and contact details.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, the progress rings are SVG, and the podcast player uses the browser’s own audio with a precomputed waveform instead of jQuery plugins and an audio library. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the seven pages went from 8.7 MB and 264 requests to 3.1 MB and 154 requests in total, and the home page from 1.8 MB to 0.6 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the logo and milestone figures are sharp SVG instead of small PNGs.
• No third-party requests: Roboto is self-hosted, the icon fonts are replaced by Lucide SVG icons and a small social-logo subset, the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, the demo video opens from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working contact form: it sends through php/send-email.php with visible labels, validation, a spam trap and an in-page message. Before, it had no action and no field names.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button with its state announced, DJ social links reachable from the keyboard, a keyboard-seekable podcast player, names on icon links, visible focus rings, reduced-motion support and WCAG AA text contrast.
• Fixed: home links pointed to a page that did not exist, the icon fonts never loaded, the station list repeated one city, and the hero photo is now sharp on large and high-density screens.
• Demo content: fictional DJs, shows, chart entries, addresses and contact details, a weekly schedule with real show times, new stock photos for the DJs, charts and genres, and a generated demo audio clip.