Opaline Studio - Hair Salon HTML Template

Opaline Studio is a refined and responsive HTML template designed for premium hair salons, independent stylists, colour specialists and modern hair studios.

The template includes elegant editorial layouts, service sections, studio information, a filterable gallery, contact page, appointment request interface, legal pages and a custom 404 page.

Opaline Studio is built with HTML5, CSS3 and Vanilla JavaScript. It does not require any framework, build tool or package manager. The code is organised, easy to customise and suitable for salon websites, hairstylists, beauty studios and creative service businesses.

The demo includes real preview images for presentation purposes, while the downloadable template is structured with replaceable image areas and clear code comments for customisation.

Features

- Responsive design - Fixed desktop side navigation - Full-screen mobile navigation - Premium editorial salon layout - Home, Services, About, Gallery, Contact and Booking pages - Filterable gallery with lightbox - Contact form validation - Four-step appointment request interface - Dynamic appointment summary - Configurable currency display - Privacy Policy, Terms and Cookie Policy pages - Custom 404 page - Google Maps embed support - Accessible HTML structure - Reduced-motion support - Automatic footer year - Clean and organised code

Requirements

- Modern web browser - Basic knowledge of HTML, CSS and JavaScript for customisation - Code editor such as Visual Studio Code - Optional: Live Server extension for local testing - Optional: form service or backend for sending contact enquiries - Optional: booking platform or backend for live appointment management

Instructions

1. Download and extract the ZIP file. 2. Keep the original folder structure. 3. Open index.html in a browser to view the template. 4. For local testing, open the project folder in Visual Studio Code and use the Live Server extension. 5. Edit the HTML files to update text, links, services, prices and page content. 6. Edit assets/css/style.css to customise the main colours and global styles. 7. Edit the page-specific CSS files inside assets/css/ when customising individual pages. 8. Edit assets/js/script.js to update global settings such as currency display. 9. Replace image placeholders with your own images. 10. To make the contact form functional, connect it to a backend or a form service such as Formspree, Netlify Forms or EmailJS. 11. To make the booking interface functional for real appointments, connect it to a backend or third-party booking platform.