Overview

A dark HTML template for a custom tattoo studio that does large work: blackwork, sleeves, back pieces and pieces drawn for one person. Inkora ships three home pages, a dark and a light theme, right-to-left support, and logic that is worked out rather than typed in: six artists with their styles, rates, books and waiting lists, every artist’s next free sitting from the visitor’s date, a tattoo estimate by size, placement, detail and artist, booking with a deposit, a consultation request with a reference upload, a flash sheet with claims and a monthly flash day, the healing stages day by day and a shop with a bag, coupon, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: Sleeve Sessions (an artist’s sleeve template inked session by session down the arm), The Flash Sheet (drawn designs stamp down onto the sheet one by one) and How It Heals (one tattoo through its first month, day 1 to day 30)
• A dark ink theme by default and a light 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
• WebGL layers — Blackwork, slow geometric figures turning at the band edges, and the footer’s dagger and rose inking itself line by line — tinted by the theme colours
• Artists’ books from the date: open with the next free sitting, a waiting list with the people ahead, or closed until the list reopens
• The tattoo estimate: hours, sittings, a price range, the deposit and the weeks to finish, sitting by sitting
• Booking with a deposit in five steps, taken times refused, closed books offering their waiting list; a consultation request with an image upload
• The flash sheet: drawn designs with size, price and artist, one-offs and repeatables, claims that carry to the booking, the next flash day
• The shop: aftercare, vouchers with a value, prints and studio goods, price filter, sort and search, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• About, pricing, portfolio with two project layouts, journal, FAQ with search, contact, account pages, coming soon, 404
• Needle Trace preloader, Ink Bleed photo reveals, word-rise titles, a needle-buzz hover, Swiper sliders and Fancybox lightboxes
• Fully responsive, clean HTML5 markup, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open inkora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the studio clock, the estimate, the booking, the consultation, the flash sheet and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the inkora/ 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 artists, their rates and books, the estimate tables, the deposit, the hours, the flash sheet, the healing stages 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 inkora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

inkora/
├── *.html                              the 30 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
        ├── arrows/                      4 files
        ├── art/                         4 files
        ├── artists/                     9 files
        ├── banner/                      16 files
        ├── blog/                        5 files
        ├── faces/                       7 files
        ├── flags/                       6 files
        ├── flash/                       26 files
        ├── healing/                     2 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── shop/                        17 files
        ├── sleeve/                      4 files
        ├── textures/                    3 files
        └── work/                        24 files

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

Ink is the studio: the ground of every page, under a fine grain, with the raised band for alternate sections and the night for the footer and the bands that stay dark. Red is the one colour: the buttons (white text), the needle under every title, the active states and the colour session of the sleeve. Bone draws the logo, the flash designs and the arrows on ink; flash paper is the sheet the designs, the estimate and the deposit sit on; skin is kept for the sleeve template and the healing timeline. --ik-bg, --ik-surface, --ik-cream, --ik-heading and --ik-text are the semantic names the components use — the light theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Roboto Slab (every heading in tracked capitals, the navigation, buttons, prices and figures) and Roboto (body text, the italic line above each title, quotes). Swap them by editing the Google Fonts link and the --ik-ff-display / --ik-ff-body variables.

Logo

The logo is a square stamp: a hairline frame round a plate whose tone is drawn in dotwork under a single needle line, with INK / ORA. in slab capitals at its foot. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — the stamp in ink, for light grounds (the light theme’s header)
• logo-light.png — the stamp in bone, for ink grounds (the dark header, the preloader)
• logo-word-light.png — the stamp with the INKORA wordmark (the footer)
• favicon.png — the browser tab icon

The preloader draws the stamp’s lines and dots on a canvas, then shows logo-light.png; to use your own logo, replace the files and the preloader ends on yours.

Dark & Light Mode

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

• Tokens — the light values sit in one block, [data-theme="light"] { … }, right after :root in style.css. Change a light colour there.
• Bands that stay dark — sections with the class is-night (the footer, the booking summary, the sidebar call to action) and the photo bands stay dark in both themes.
• Paper — the flash sheet, the estimate panel, the deposit box and the figure’s card take ik-on-paper and keep their paper and ink in both themes.
• Flash designs and arrows — each ships in an ink and a bone version; the right one shows by theme and ground.
• Start light — to open the site light for first-time visitors, add data-theme="light" 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 Inkora Data near the top of main.js (var INKORA). Edit it once and the rates, estimates, dates, deposits and totals follow. Prices are in US dollars; times are minutes after midnight (1140 = 7:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

The artists’ books

Any element with data-artist="…" is repainted from today: its data-a fields take the books line, the label and the next free sitting (the first working day after the wait), or the day a closed list reopens.

How the estimate works

Hours = the size’s hours × the placement × the detail, to the half hour. Sittings = the hours over the artist’s longest sitting, rounded up; full sittings are charged at the day rate and the rest by the hour (never more than a day), never under the minimum; the range is ±12%. The deposit is 20% of the first sitting between $100 and $300, and the weeks to finish add 3 weeks of healing between sittings.

How the shop totals

The bag, the wishlist and the applied coupon 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 Shop) to []. Booking, the consultation, checkout and the account forms confirm on screen with a reference — connect them to your own systems to take real bookings, deposits and orders.

WebGL Layers

Two small WebGL scenes draw the moving layers: Blackwork — two large geometric figures (rings, spokes, pointed petals and a stippled tone) centred just off a band’s left and right edges and turning slowly, on the page titles and the raised bands — and the flash — the footer’s dagger and rose, drawn stroke by stroke as if inked, the rose filling red, held, then drawn again. Each is one canvas:

<canvas class="ik-gl" data-gl="blackwork" aria-hidden="true"></canvas>

• Colours — each layer reads its 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.
• The flash’s drawing — its strokes are block 25 Flash Lines (FLASH_LINES, in drawing order) and its rose’s outline (FLASH_ROSE).
• 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.

RTL (Right To Left)

Inkora 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) in the top bar lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys inkora-lang and inkora-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; the fletched arrows turn round. Prices and dates keep reading left to right inside their rows.

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 Needle Trace preloader, the header, the Ink Bleed reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Inkora Data, Studio Clock. Inkora Data holds every figure; Studio Clock works out open now, the next flash day and every artist’s next free sitting from the date.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms.
• 19–21 — Sleeve Sessions, Flash Sheet Stamps, Healing Timeline. The three home pages’ scroll moments.
• 22–27 — Tattoo Estimate, Booking & Deposit, Consultation & References, Flash Lines, Flash Claims, Stamp Geometry. The studio’s logic: the estimate, booking with a deposit, the consultation with its reference upload, the footer flash’s strokes, flash claims and the stamp’s dots.
• 28–34 — Contact Form, Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. Contact form, the shop, accounts, the journal, demo forms, the countdown and FAQ search.

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 finished.

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 flash designs, the sleeve template, the healing artwork, the drawn shop packshots (aftercare, the voucher, the prints), the arrows, the language flags and the textures are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form, the Book Anytime form on the first home page and the journal’s 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, quick quote, booking, consultation, coupon, 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: Roboto Slab, Roboto

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.