Overview

An HTML template for a light, minimal fine-line tattoo and piercing studio: single-needle linework, small symbols and botanicals, considered piercing and solid-gold jewellery. Finelia ships three home pages, a light and a dark theme, right-to-left support, a pound / dollar / euro switch, and logic that is worked out rather than typed in: a piercing menu priced by placement, jewellery style and metal; a fine-line estimate by the size in centimetres; booking with the ID and age rules worked out for the day of the visit; aftercare with the downsize and healing dates; an ear curator; open now and walk-in piercing from the clock; and a jewellery shop with metals, sizes, a bag, coupon, shipping zones and VAT.

What’s included

• 3 home pages, each with its own scroll moment: Stencil To Skin (a fine-line sprig on its paper stencil travels onto a drawn forearm and the needle replaces the violet line), Ear Curation (an ear gains its jewellery stud by stud as the list lights) and Constellation (eight small symbols drift together and fine lines join them into one piece)
• 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 silk thread drifting through the porcelain bands, the page titles and the footer, and the footer’s gold hoop on a fine chain, swinging with verlet physics
• The piercing menu: 18 placements by ear, face and body with gauge, healing time and youngest age; 6 jewellery styles in 4 metals; both sides at 25% off the second fee
• The tattoo estimate: width and height in centimetres, 3 kinds of line, 3 inks, 10 placements and two artist rates; a price range, hours, sittings and the deposit, drawn to scale
• Booking in six steps with the ID and age rules for the visit day: tattoos 18+, piercing from 12, a parent under 18
• Aftercare by piercing: today’s healing stage, the downsize date, healed at the earliest and by; the ear curator with a plan of visits
• The jewellery shop: categories, price filter, sort and search, metal swatches that swap the photograph and the price, sizes, the product page, bag, coupon, shipping zones, VAT included, collection at the studio, checkout with an order number, wishlist
• Artists and piercers, an artist profile, the work with filters and a lightbox, the journal, FAQ with search, account pages, coming soon, 404
• Hoop Swing preloader, Line Widen photo reveals, soft-rise copy, a jewel glint on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open finelia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the studio clock, the piercing prices, the estimate, the booking, the healing dates, the curator and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the finelia/ 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 hours, the placements, the jewellery, the metals, the estimate, the ID rules, the healing stages, the team, the products and the shop rules live in one place — see Studio 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 finelia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

finelia/
├── *.html                              the 31 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 (37 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
        ├── art/                         6 files
        ├── banner/                      5 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── hero/                        4 files
        ├── icons/                       30 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── shop/                        51 files
        ├── studio/                      8 files
        ├── team/                        6 files
        └── work/                        22 files

To publish the site, upload the contents of finelia/ 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 --fn-violet-rgb) — change both together.

White is the ground and porcelain the quiet bands and the footer; ink sets the type and the primary buttons. Stencil violet is the one accent — the colour of the transfer line before the needle — for the accent words, links, the tilde under the titles and the drawings’ stencil. Gold, rose gold and titanium appear only where there is metal: the jewellery swatches, the hoop, the glint on hover. Blush is the skin of the drawn forearm and ear. --fn-bg, --fn-surface, --fn-panel, --fn-heading and --fn-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: Crimson Text (every heading, with its italic for the accent word, the buttons and the links) and Barlow (body text, the menu and the small labels in tracked capitals). Swap them by editing the Google Fonts link and the --fn-ff-head / --fn-ff-body variables.

Logo

The logo is the word finelia in Crimson Text with a fine gold hoop hanging from the l, the way a hoop hangs from a helix. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink lettering, for white grounds (every header in the light theme, the mobile menu)
• logo-light.png — light lettering, for the headers over the hero photographs and the dark theme
• logo-word.png / logo-word-light.png and hoop.png — the word and the hoop apart, for the preloader, where the hoop drops onto the l and swings to rest
• favicon.png — the f with a gold hoop 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

Finelia 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 finelia-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees the white page first. 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.
• Drawings — the canvases (the stencil, the ear, the constellation, the hoop) read their inks from --cv-ink, --cv-stencil, --cv-skin and --cv-paper, which the dark block swaps; the thread reads --gl-1 to --gl-3.
• Logo and icons — the light logo shows on photographs and in the dark theme; each illustrated icon and drawing ships in an ink and a light version and the right one shows by theme.
• 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.

Studio Logic

The figures on every page come from one data block, JS block 09 Finelia Data near the top of main.js (var FINELIA). Edit it once and the menu, prices, rules, slots, dates and totals follow. Prices are in pounds sterling; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key finelia-currency), and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Times are minutes after midnight (660 = 11:00 am); weekdays run 0 = Sunday to 6 = Saturday.

The piercing menu

A piercing is the placement’s fee plus the jewellery: the style’s price times the metal, to the nearest five pounds. Placements that come as a pair add the second side at 25% off its fee, with its own jewellery.

The tattoo estimate

Hours are the setup plus the area times the line’s rate, times the ink and the placement; the price is the hours at the artist’s rate, never under the minimum, shown as a range of −10% to +10% to the nearest ten pounds. A sitting holds 5 hours.

ID and age on the day

Booking asks for the date of birth and works out the age on the visit day, not today. The verdict follows the rules above; Continue never blocks, only Confirm checks. A visitor born on 14 November 2010:

Healing dates

Aftercare counts from the day of the piercing: the stage is the days since, as a share of the earliest healing time; the downsize, healed-at-the-earliest and healed-by dates are that day plus the weeks in the data.

The ear curator

Each placement on the ear is its fee plus its jewellery; the plan puts lobes on the first visit and cartilage two at a time, about three months apart.

How the shop totals

Prices include VAT: the bag shows the VAT inside the total, not on top of it. The coupon comes off the goods before the free-shipping check.

The bag, the wishlist, the applied coupon, the piercing and estimate picks, the curation, the aftercare piercing, the bookings and the orders 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 31 Jewellery Shop) to []. Checkout and booking confirm on screen with a reference — connect them to your own systems to take real orders and appointments.

WebGL & Drawings

One small WebGL shader draws the silk thread — a fine thread drifting across the porcelain bands, the plain page titles and the footer, curling into a loop now and then and letting it travel along its length. Each thread is one canvas:

<canvas class="fn-gl" data-gl="thread" data-gl-y="0.88" data-gl-amp="0.45" aria-hidden="true"></canvas>

• Place — data-gl-y sets the height the thread lies at (0 = top, 1 = bottom) and data-gl-amp how far it wanders, so it can run clear of a title or a drawing.
• Colours — violet into ink along its length with a silk sheen: --gl-1, --gl-2, --gl-3 and the strength --gl-alpha. The theme switch repaints them.
• Performance — a thread 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 footer’s gold hoop hangs on an 18-link chain simulated with verlet physics: it swings in a breeze, the pointer pushes the links it passes and the ring turns slowly on its axis (data-hoop-chain, block 20). The scroll moments are drawn on plain 2D canvases from the paths in block 10 (data-stencil, data-ear-moment, data-constellation, blocks 21–23); their colours follow the theme tokens and they rest in their finished state for reduced motion.

RTL (Right To Left)

Finelia 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 finelia-lang and finelia-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 drawn ear keeps its placements where they are on a real ear.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 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 Hoop Swing preloader, the header, the Line Widen and soft-rise reveals, the theme and direction switch and the WebGL silk thread.
• 09–12 — Finelia Data, Line Art, Custom Select, Currency. Finelia Data holds every figure; Line Art holds the fine-line drawings as paths the canvases trace; the pound / dollar / euro switch repaints every price.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 20–23 — Hoop On A Chain, Stencil To Skin, Ear Curation Moment, Constellation. The footer’s hoop on its chain (every page) and the scroll moments: the stencil moving to skin (Home 1), the ear curated stud by stud (Home 2) and the constellation (Home 3).
• 24–37 — Studio Clock, Piercing Menu, Tattoo Estimate, Booking, Healing Tracker, Ear Curator, Contact Form, Jewellery Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: open now and walk-in piercing from the clock, the piercing menu, the tattoo estimate, booking with the ID and age rules, the healing tracker, the ear curator, contact, the jewellery 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 fine-line drawings, the illustrated icons, the jewellery and aftercare packshots and the language flags are included and ready to use. All demo photography shown on the live preview, the tattoo photographs 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, 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: Crimson Text, Barlow

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.