Lacquer
Lacquer is a free, chic two-page Bootstrap 5 website template designed for nail salons and nail bars. It combines a full-screen hero, dot-leader pricing menus, a filterable nail-art gallery with a lightbox, a three-step online booking flow, technicians, membership packages, a retail shop, testimonials, hours, and an FAQ across an index page and a dedicated Services & Booking page. Every interaction is written in plain vanilla JavaScript with no jQuery, and the template is progressively enhanced so all content stays visible when JavaScript is disabled.
Key features
- Two pages — home plus a full Services & Booking menu
- Sticky navbar with Book-now CTA and full-screen mobile drawer
- Filterable nail-art gallery (Classic/Gel/Art/Seasonal) with a keyboard-accessible lightbox
- Three-step booking flow with vanilla form validation and confirmation
- Dot-leader service menus with real prices and durations
- Membership/package band, retail shop grid with add-to-bag counter
- Testimonials slider, count-up stats, and IntersectionObserver reveals
- 100% vanilla JavaScript — no jQuery, no plugins
- Accessible and progressively enhanced (content visible with JS off)
Best for
- Nail salons and nail bars
- Manicure and pedicure studios
- Beauty and spa boutiques
- Independent nail technicians and small teams
- Any local salon needing online booking
At a glance
- Two pages: index.html + services.html
- Bootstrap 5 with no jQuery and no plugin dependencies
- Vanilla JavaScript: gallery filter, lightbox, booking validation, slider, count-up, bag, mobile nav
- Progressive enhancement: all content visible with JavaScript off
- Accessible: semantic landmarks, ARIA on custom widgets, visible focus, keyboard support
- Responsive and mobile-first; navbar collapses to a working drawer
- Self-hosted Bootstrap 5; Google Fonts (Fraunces + Jost)
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Lacquer free to use for commercial projects like a real salon?
Yes. Lacquer is free for both personal and commercial use, so you can launch it for a working nail salon or nail bar. It follows the standard uiCookies license, with attribution appreciated and the full terms on the license page. What you download is the complete two-page template with no locked or paid tier.
Does the online booking form actually take appointments?
The booking form is a fully marked-up, front-end-only flow: it validates the service, technician, date, time slot, name, phone, and email, and shows a confirmation message on submit. Because the template is static, it does not send data anywhere by itself. To make it live, point the form at a booking service, a form-handling endpoint, or your own server-side script.
Is Lacquer built on Bootstrap 5, and does it use jQuery?
Lacquer is built on Bootstrap 5 and is completely jQuery-free. The gallery filtering, lightbox, booking validation, testimonials slider, count-up statistics, shopping-bag counter, and mobile navigation are all plain vanilla JavaScript. Bootstrap's own bundle powers the FAQ accordion, so there are no third-party plugin dependencies to maintain.
Will the content still show if a visitor has JavaScript disabled?
Yes. Lacquer is progressively enhanced: a script adds a .js class to the document, and every hidden animation start-state is scoped under that class. With JavaScript off, all sections — including the gallery, booking form, and testimonials — render at full opacity and remain fully usable. JavaScript only adds the motion and interactivity on top.
Can I change the colours and fonts to match my salon's brand?
Easily. The entire palette is defined as CSS custom properties at the top of css/style.css, so you can recolour the whole template by editing a handful of variables. The type pairing (Fraunces for display, Jost for body) loads from Google Fonts in the page head and can be swapped there. Everything is standard CSS — no build step is required.
How does the nail-art gallery filtering and lightbox work?
Each gallery item carries a style tag (Classic, Gel, Art, or Seasonal), and the filter buttons show or hide items with a vanilla JavaScript click handler. Clicking any image opens an accessible lightbox that supports next/previous navigation, keyboard arrows, and Escape to close, and it only cycles through the currently visible (filtered) images. It needs no external lightbox plugin.
Is the template responsive and accessible?
Yes to both. The layout is mobile-first and built on the Bootstrap 5 grid, and the navbar collapses into a full-screen drawer on small screens. Accessibility features include semantic landmarks, ARIA attributes on the custom widgets, visible focus outlines, keyboard support for the lightbox, accordion, slider, and forms, and full respect for the prefers-reduced-motion setting.
What's included in the download and what should I replace before launch?
You get two HTML pages (index.html and services.html), the custom css/style.css design layer, vanilla js/main.js, and self-hosted Bootstrap 5 CSS and JS bundle. The demo images are referenced by local path in the img/ folder — swap them for your own optimized salon and nail-art photos, then update the copy, prices, hours, and contact details to your business before going live.
