Musico

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Musico is a website template for a solo musician or singer-songwriter, built on Bootstrap 5. It has a dark, stage-lit hero, red accents, audio players, a sticky menu and a navy footer. The layout is responsive and mobile-ready. There are seven pages: home, about, tracks, blog, single blog post, contact and elements.

The home page opens with a full-screen hero and a player for the title track, followed by an about section, four live videos that play on click, the latest tracks with their own players and a photo gallery with a lightbox. The tracks page lists all six album tracks with players and the videos, and the about page adds the biography and the gallery. The blog has five posts, each with its own page, with search, categories, tags, share links, comments and replies, and the contact page has a contact form and a map that loads on click. The elements page shows the buttons, forms, typography and other building blocks. Use Musico for a musician, a singer or a band.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.0.0 and two copies of jQuery), compiled from Sass with the design’s original proportions, and plain JavaScript with no jQuery. A native audio player with real buttons and keyboard-operable progress and volume bars replaces the jQuery player plugin, PhotoSwipe 5 replaces Magnific Popup on the galleries, a video dialog plays the videos, a menu panel replaces SlickNav, native select boxes replace nice-select, and unused plugins such as Owl Carousel, Slick, WOW and CounterUp are gone. Lucide SVG icons replace Font Awesome 4 and the Themify icon font, 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 bundle.
• Lighter pages: the home page went from 9.76 MB and 65 requests to 705 KB and 33 requests. The photos were large PNG files; each is now a JPEG with an AVIF version (the JPEG is the fallback), real dimensions and lazy loading below the first screen, the hero photo is preloaded, and images no page used are removed. The download is 3.70 MB (it was 33.47 MB) and now includes the Sass sources and the build scripts.
• No third-party requests: Josefin Sans, Muli and the icons are self-hosted, the demo tracks ship with the template, the videos load from YouTube’s privacy-enhanced player only after a click, the contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, and an analytics snippet stays commented out until you add your own ID. Before, the pages loaded files from six outside hosts, including a web font service, a jQuery CDN, a sound clip from another site and a map script.
• Working demos: the players play six demo tracks, one at a time (every player used to play the same short sound clip), the four videos play stock concert clips (they pointed to a video that had been removed), and every track, video and post has its own title (ten players and eight video cards repeated one name, and the blog showed the same teaser five times). Each of the five posts opens its own page with previous and next links, the blog has search, categories, tags, share links and comment replies, and “Buy Album” opens the contact form with the order filled in.
• Working forms: the contact form, the newsletter form in the footer of every page and on the blog, and the comment form send through php/send-email.php, php/subscribe.php and php/comment.php, a safe mailer with validation, a spam trap and an in-page message. Before, the newsletter and comment forms posted nowhere, and the old contact script put visitors’ input straight into the mail headers.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled form fields and controls, named play, share and social buttons, submenus that open from the keyboard and on the first tap on touch screens, visible focus rings (the form fields had none), 44 px player controls and WCAG AA text contrast with the red kept: a darker red for red text on white, a lighter red on the dark sections, a deeper red on the small buttons, darker meta greys and a soft shade behind the video captions.
• Fixed: 292 links that went nowhere now open a real page, post, track or section, the blog post said “05 Comments” over three comments, the blog pagination linked to a second page that did not exist, Home was marked as the current page everywhere, the elements page no longer scrolls sideways at tablet widths, the arrows on its buttons now show, and the sample form no longer has two “Last Name” fields.