Previews are representative layouts. Every page, component and state shown is included in the download.
Petal — Beauty Salon Website Template
A soft, polished salon site with a service menu and booking that fills the quiet hours.
- Category
- Beauty & Salon
- Pages included
- 9 pages
- File format
- ZIP · HTML, CSS, JS
- Delivery
- Instant download
- Licence
- One end product
- Support
- 6 months included
- Updates
- Free, for life
- Last updated
- March 2026
- Secure payment via Stripe or PayPal
- Download link valid for 72 hours, re-issued free
- No account required, no subscription
Overview
Petal is built for salons, studios and independent stylists. The service menu handles the real complexity of beauty pricing — durations, tiers by stylist level, add-ons and package deals — without becoming a spreadsheet.
It is warm, feminine without being saccharine, and heavily optimised for phones, because that is where the overwhelming majority of salon bookings begin.
What's included
- 9 pages including services, team, gallery and booking
- Service menu with durations, tiers and add-ons
- Before-and-after gallery with a draggable comparison slider
- Stylist profiles with specialisms and availability
- Booking slots for Fresha, Treatwell, Square or Acuity
- Gift voucher and package components
Pages and sections included
9 ready-made pages:
- Home
- Services & prices
- Service detail
- Our team
- Gallery & transformations
- Gift vouchers
- Book an appointment
- About the salon
- Contact & find us
Built from these sections and components:
- Soft hero with booking CTA
- Signature services
- Full price menu with durations
- Stylist profiles
- Before-and-after slider
- Package and voucher offers
- Client reviews
- Salon policies
- Location, parking and hours
Key features
Pricing that reflects reality
Durations, stylist tiers, add-ons and packages — including 'from' pricing for consultations.
Before-and-after slider
A draggable comparison that works with touch, mouse and keyboard alike.
Stylist specialisms
Match clients to the right stylist by service, technique or hair type.
Gift vouchers
A voucher section ready to link to your payment provider — a reliable December revenue line.
Phone-first layout
Sticky booking button, tap-to-call and directions always within thumb reach.
Policy transparency
Cancellation, deposit and lateness policies presented kindly but clearly.
Responsive and mobile design
Petal is built mobile-first and tested at 320, 375, 414, 768, 1024, 1440 and 1920 pixels before release. Small screens are not an afterthought — navigation, tables, galleries and the 9-page structure are each redesigned for the space available rather than shrunk to fit.
- Fluid type and spacing scales, so headlines stay in proportion between a phone and a 27-inch display.
- Tap targets of at least 44×44 pixels on every control, with visible focus rings for keyboard users.
- Images served at sensible dimensions with lazy loading below the fold and reserved space to prevent layout shift.
- Tested in current Chrome, Safari, Firefox and Edge, on iOS and Android, and with reduced-motion preferences respected.
Customisation and editing
Everything you will want to change is in an obvious place. Colours, fonts, radii and spacing are CSS custom properties declared in one block at the top of the stylesheet — change those six or so lines and all 9 pages follow. Text and links are edited directly in the HTML, with comments marking each section.
- No build step, no Node, no package manager — open the folder in any editor and double-click a page to preview it.
- Swap images by dropping your own files into /assets/img using the same filenames, or point the markup anywhere you like.
- Every component is commented and reusable, so adding a page means copying a block rather than writing CSS from scratch.
- Clean, semantic markup that ports cleanly into WordPress, Webflow, Astro, Eleventy or a React project when you outgrow static files.
Ideal for
- Hair salons and colour specialists
- Nail, lash and brow studios
- Aesthetic clinics and skin therapists
- Independent stylists renting a chair
Frequently asked questions
Fresha, Treatwell, Square Appointments, Acuity and Booksy all drop into the styled embed slot. If you take bookings by phone or DM, there is a no-embed variant too.
Yes. The service menu supports tiers — for example Stylist, Senior Stylist and Director — with a price per tier on a single row.
Basic comfort with HTML and CSS is enough. Text, images and links are edited directly in the HTML, and colours and fonts live in a short list of variables at the top of the stylesheet. If you can edit a text file, you can launch one of these.
One licence covers one end product — your own website, or one client project. You can modify the template as much as you like. You cannot resell, redistribute, sublicense or share the template files themselves.
Anywhere that serves static files: Netlify, Vercel, Cloudflare Pages, GitHub Pages, or classic shared hosting via FTP. Most are free for a site this size, and the guide covers each.
Because templates are delivered instantly and cannot be returned, all sales are final once the download link is issued. If a file is corrupt or a page does not match its preview, contact us within 14 days and we will fix it or refund you in full.
You might also like