Overview

An HTML template for a barbershop first, with a tattoo flash table beside the chairs and a motorcycle club out back. Barbero ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: the barber menu with picks that add up the time and price, booking chair by chair from each barber’s diary, the walk-in queue and its wait from the clock, flash walk-ins priced by size, detail, placement and colour, a membership calculator, the club’s nights and rides from repeat rules, and a grooming shop with scents, a bag, coupon, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: The Fade (a head drawn from behind graduates guard by guard from No. 0 to No. 4), Built At The Shop (the bike’s parts bolt onto its frame one by one) and The Straight Razor (the blade swings open on its pivot, part by part)
• A white theme by default and a dark theme on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• A WebGL damask — a woven half-drop pattern that drifts slowly behind the page titles, the night bands and the footer — and the footer’s straight razor, an articulated drawing that opens and closes
• The shop from the clock: open now on every page, the walk-in queue and its wait, the chairs free now, the next free slot, the flash table’s hours
• The barber menu: 20 services in 5 categories, picks that add up the minutes and the price and carry into the booking
• Chair-by-chair booking: each chair’s day drawn as a diary bar, free slots as long as the services picked, 10% off paid online
• Flash walk-ins: 14 designs by style, priced by size from $80, then by detail, placement and colour, with a $40 deposit to claim one
• Memberships with a calculator against paying as you go; the club’s nights and rides with places left
• The grooming shop: categories, price filter, sort and search, scents, the product page, bag, coupon, free-shipping meter, pickup or express, tax, checkout with an order number, wishlist
• Barbers with their chairs and days, a barber profile, the work, the journal, FAQ with search, account pages, coming soon, 404
• Barber Pole preloader, Throttle Brake reveals, word-rise titles, the pole stripe running on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

Thank you for choosing Barbero. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open barbero/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the shop clock, the menu picks, the booking, the queue, the flash prices, the calculator and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the barbero/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The services, the chairs, the hours, the queue, the flash, the memberships, the nights and rides, the products and the shop rules live in one place — see Shop Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and barbero/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

barbero/
├── *.html                              the 33 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      9 files
        ├── barber/                      11 files
        ├── bikes/                       8 files
        ├── faces/                       8 files
        ├── flags/                       6 files
        ├── flash/                       14 files
        ├── hero/                        9 files
        ├── icons/                       28 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── shop/                        12 files
        ├── tattoo/                      15 files
        └── team/                        7 files

To publish the site, upload the contents of barbero/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --bb-gold-rgb) — change both together.

White is the shop floor and ink the chair leather: the ground of the pages is white with the panel for quiet bands, and the heroes, night bands and footer are ink. Gold draws the rules, the prices, the stars and the buttons (gold buttons carry ink text); gold ink is the same gold dark enough to read as text on white. Pole red and pole navy are kept for the barber pole — the preloader and the stripe under a hovered card — and for the open-now dot and “few places left”. --bb-bg, --bb-surface, --bb-panel, --bb-heading and --bb-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Big Shoulders Display (headings, navigation, buttons, prices and figures, in condensed capitals) and Libre Baskerville (body text, with its italic for the eyebrows and notes). Swap them by editing the Google Fonts link and the --bb-ff-display / --bb-ff-body variables.

Logo

The logo is BARBERO in Big Shoulders capitals with its last O drawn as a squared ring that carries three barber-pole stripes in gold. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white grounds (the mobile menu, and every header in the light theme where the header is white)
• logo-light.png — ivory lettering, for the ink grounds: the headers over the heroes, the night bands, the footer
• logo-word.png — the ivory word alone (the preloader)
• favicon.png — the striped O on an ink square, the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Barbero opens white: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that dims the lights. The choice is saved in the browser under the key barbero-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay ink — sections with the class is-night (the barber menu band, the bike build, the razor’s band, the photo bands, the page titles, the footer) are ink in both themes.
• Logo and icons — the light logo shows on ink grounds and the ink logo on white ones; each illustrated icon ships in an ink and a light version and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Shop Logic

The figures on every page come from one data block, JS block 09 Barbero Data near the top of main.js (var BARBERO). Edit it once and the menu, prices, chairs, slots, queue, dates and totals follow. Prices are in US dollars; times are minutes after midnight (540 = 9:00 am); weekdays run 0 = Sunday to 6 = Saturday.

Open now and the walk-in queue

The shop is open while the time sits inside the day’s hours. The queue is the hour’s busyness times the longest queue; the wait shares it between the chairs serving it, to the nearest five minutes.

Booking a chair

The services picked on the menu carry into the booking and set the slot’s length. Each chair’s day is drawn as a diary bar: a slot is free when it fits inside the hours, the barber stands at that chair that day and it meets no booking. The day’s bookings are seeded from the date, so every visitor sees the same diary, and the visitor’s own bookings are added to it.

Flash prices

A design’s price is its size’s price, times its detail (Bold ×1, Detailed ×1.2, Fine Detail ×1.4), times the placement, plus 20% for colour, rounded to the nearest five dollars. A $40 deposit claims it; a design someone has claimed shows as taken.

The membership calculator

The month at the chairs is priced as you go from the menu, then against each membership: its price, anything beyond what it covers at the menu price, and the shop spend less its product discount. The cheapest is marked with the saving.

Nights and rides

Every night and ride repeats on its weekday of the month, so its next dates are always ahead of the visitor:

How the shop totals

The bag, the wishlist, the applied coupon, the menu picks, the bookings, the ride sign-ups, the claimed flash and the queue ticket are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 29 Grooming Shop) to []. Checkout, booking, the queue ticket, rides and flash claims confirm on screen with a reference — connect them to your own systems to take real orders and bookings.

WebGL & Drawings

One small WebGL shader draws the damask — a woven half-drop pattern of curls and drops that drifts slowly behind the page titles, the night bands and the footer. Each layer is one canvas:

<canvas class="bb-gl" data-gl="damask" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

The straight razor in the footer and on Home 3, the fade on Home 1 and the bike on Home 2 are drawn on plain 2D canvases (data-razor, data-fade-canvas, data-bike-canvas) by JS blocks 19–21; their colours follow the theme tokens and they rest in their finished state for reduced motion.

RTL (Right To Left)

Barbero is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys barbero-lang and barbero-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, times and figures keep reading left to right inside their rows, and the razor, the fade and the bike stay as drawn.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Barber Pole preloader, the header, the Throttle Brake reveals, the theme and direction switch and the WebGL damask.
• 09–10 — Barbero Data, Shop Clock. Barbero Data holds every figure; Shop Clock works out from the date and time whether the doors are open, the walk-in queue and its wait, the chairs free now, the next free slot, the flash table’s hours and the next date of every night and ride.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms, choice cards.
• 19–21 — Straight Razor, The Fade, Built At The Shop. The scroll moments: the straight razor opening (Home 3, and the footer’s razor on every page), the fade graduating guard by guard (Home 1) and the bike built part by part (Home 2).
• 22–34 — Barber Menu Picks, Chair Booking, Bike Nights, Walk-In Queue, Flash Pricing, Memberships, Contact Form, Grooming Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the barber menu picks, chair-by-chair booking, bike nights and rides, the walk-in queue, flash pricing, the membership calculator, contact, the grooming shop, accounts, the journal, demo forms, the countdown, FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the grooming packshots and the language flags are included and ready to use. All demo photography shown on the live preview, the flash designs among it, is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, booking, queue ticket, ride sign-up, flash claim, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Big Shoulders Display, Libre Baskerville

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.