HnBand

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Hnband is a website template for a band, an artist or a music event, with dark violet grounds and a violet-to-magenta accent. It is built on Bootstrap 5, and the layout is responsive and works on phones, tablets and desktops. It comes with ten pages: home, about, albums, album details, tours, tickets, gallery, blog, single blog post and contact.

The home page has a hero slider, an about section, the discography, an album player with a track list, a video stage with a playlist of concert clips and the upcoming shows. The about page tells the band’s story and lists popular shows, the albums page shows nine albums and singles, and the album details page has its own player with the track list. The tours page lists five upcoming shows, each with a ticket link, and the ticket page lets visitors choose a section, row, seat and quantity and see the total. You will also find a gallery with a full-screen lightbox, a blog with nine posts, a blog post with comments, a comment form and a newsletter box, and a contact page with a contact form and a map that loads on click. Use Hnband for a band, a tour or a music event.

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 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, PhotoSwipe 5 replaces Magnific Popup in the gallery, a menu panel that keeps the MENU button replaces SlickNav, and the browser’s own audio player replaces the old jQuery player plugin. Lucide SVG icons replace Font Awesome 4.7, and the social logos come from a small Font Awesome Brands subset (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles the minified stylesheets and one script.
• Lighter pages: the home page went from 7.24 MB and 44 requests to 846 KB and 37 requests, and the download shrank from 52.98 MB to 8.56 MB. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading below the first screen, the large background images are smaller, and the full-page preloader is gone.
• No third-party requests until a visitor asks for them: Nunito Sans and Satisfy are self-hosted, the concert clips load from YouTube’s privacy-enhanced player only when a visitor presses play, the map on the contact page is OpenStreetMap (no API key needed) and loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts and the contact page loaded a Google Maps embed.
• Working demos: the album players on the home and album details pages play, pause, skip, shuffle, mute and seek, one track at a time, with seven short demo tracks with fictional titles included. The video stage shows a poster until a visitor presses play, then plays the clip picked from its list of five stock concert clips. Each of the five upcoming shows opens the ticket page, where visitors pick the section, row, seat and quantity, see the price and total, and get a demo confirmation (nothing is booked). The nine blog posts each open their own post view.
• Working forms: the contact form, the “Got a Question?” form on every page, the blog comment form and the newsletter box send through PHP handlers that use a safe mailer, with validation, a spam trap and an in-page message. Before, they had no action and their fields had no names, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled form fields and player controls, seek and volume bars you can use from the keyboard, a Pages submenu that opens from the keyboard and on the first tap on touch screens, visible keyboard focus, reduced-motion support and WCAG AA text contrast, with white button labels on a deeper end of the magenta gradient, lighter greys on the dark grounds and soft shades behind the text on the album photo and the hero on phones.
• Fixed: every link that went nowhere now opens a real page or section, and the album pagination to pages that did not exist is gone. The ticket page no longer scrolls sideways on phones, the text typed in the newsletter box was dark on the dark ground and is white now, filled buttons have a hover state, the playlist’s track links had no clickable area, and the second hero slide no longer repeats the first. Placeholder titles, repeated cards and typos are replaced with band copy.