Overview

A bright, dependable HTML template for a handyman and home maintenance company: five trades with their price lists, a job estimate worked out live, booking by two-hour window, annual maintenance plans and a 24/7 emergency line. Fixora 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 time band of any hour, the call-out fee, the crews free in a window and the next free window from the visitor’s clock, estimates with parts grades, plans and travel fees, plan prices by home size and billing, and a parts shop with a plan saving, a code, delivery and VAT.

What’s included

• 3 home pages, each with its own scroll moment: Home Repairs (a paint roller lays a fresh coat across the wall as you scroll), Heating & Cooling (the outdoor unit’s fan spins faster as the room cools from 30 to 22) and Handyman Crew (a ladder’s rungs appear, each lighting a step of the job)
• A light theme by default and a night navy 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 — Roller Bands, soft paint-roller passes sliding along the edges of the title bands and the footer, and the footer’s house and tree, the tree grown by an L-system — tinted by the theme colours
• Five trades with hourly rates and price lists, a full price list with trade tabs and search
• The job estimate: trade, job or hours, quantity, parts grade, time band, plan and postcode, with the breakdown and where the money goes
• Booking by two-hour window in five steps: crews free per window, same-day windows closing two hours ahead, Sundays for emergencies, the live price; Continue never blocks
• Maintenance plans by home size, monthly or yearly, the comparison table and a plan-versus-pay-as-you-go calculator
• The emergency line live from the clock, response times and a postcode checker by area
• Recent jobs with their bills from the same engine, the crew, reviews with the average, FAQ with search
• The parts shop: categories, price filter, sort and search, the product page, bag, plan saving, code, delivery meter, VAT, checkout with an order number, wishlist
• Toolbox Open preloader, Screw In reveals, soft-rise copy and the tool flip on card hover
• Blog with post formats, account pages, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open fixora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the estimate, the booking wizard, the plans, the live status and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the fixora/ 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 trades, prices, time bands, windows, plans, areas and shop rules live in one place — see Fixora 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 fixora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

fixora/
├── *.html                              the 32 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 (32 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 kind
        ├── banner/                      6 files
        ├── cutouts/                     1 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── hero/                        9 files
        ├── icons/                       34 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── photos/                      24 files
        ├── shop/                        16 files
        ├── tall/                        5 files
        └── team/                        8 files

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

Navy sets the headings, the top bar, the footer and the dark bands. The electric blue fills the current page’s tab in the menu, the accreditation tile and the blue band; the blue tab is the same blue made deep enough for white text, and blue ink the version for small text on white. Yellow is kept for the button faces and the square plus keys, always with navy text. White and the grey panel alternate down the page. --fx-bg, --fx-surface, --fx-panel, --fx-heading and --fx-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: Outfit (headings, the small caps eyebrows, buttons, the menu and the figures) and Mada (body copy). Swap them by editing the Google Fonts link and the --fx-ff-display / --fx-ff-body variables.

Logo

The logo is the word Fixora in Outfit followed by its mark, a blue house whose roof peak is the open jaw of a wrench, with a yellow window. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light theme
• logo-light.png — for dark grounds: the footer and the dark theme
• logo-word.png — the word alone (the preloader)
• mark.png — the house mark alone (the preloader)
• favicon.png — 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

Fixora opens light. Every header (and the mobile menu) has a theme switch that turns the page to a night navy. The choice is saved in the browser under the key fixora-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 dark — sections with the class is-navy (the footer, the cooling band, the emergency panel) are navy in both themes; is-blue is the electric-blue tile and band; photo bands wear the navy wash in both themes.
• Packshots — the shop’s parts are photographed on white, so their tiles stay white in both themes (--fx-shelf).
• Icons — each illustrated icon ships in a navy and a white 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.

Fixora Logic

The figures on every page come from one data block, JS block 09 Fixora Data near the top of main.js (var FIXORA). Edit it once and the price lists, estimates, windows, plans and totals follow. Prices are in pounds before VAT; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

The trades

The time bands

The engine finds the band of any hour: Sundays, the fixed holidays and 8 pm to 8 am are the night band; Saturdays and weekday evenings the evening band; the rest is the weekday band. Every element with data-open-status, data-band-now, data-band-callout or data-next-window repaints from the visitor’s clock.

How an estimate totals

Booking by window

Each window has as many places as the trade has crews; the places booked are seeded from the date, the trade and the window, so a day always shows the same bookings and the days soonest are the busiest. The wizard’s Continue never blocks; Confirm checks the day, the window, a covered postcode and the details, and returns a booking reference. A job chosen on the estimate page arrives pre-selected (through sessionStorage, not the URL).

Maintenance plans

Areas

How the shop totals

The bag, the wishlist, the code and the plan tick 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 27 Parts Shop) to []. Bookings, the request forms, reviews, checkout and the account confirm on screen with a reference — connect them to your own systems to take real bookings and payments.

WebGL Layers

Two small WebGL scenes draw the moving layers: Roller Bands — soft passes of a paint roller with the nap in them, sliding slowly along the top and bottom edges of the page titles and the footer, the copy in the middle left clear — and the growing house in the footer — a house drawn line by line, then a tree beside it grown by an L-system, its branches growing out from the root and budding at the tips. Each is one canvas:

<canvas class="fx-gl" data-gl="bands" 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 (the tree fully grown). Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Fixora 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 fixora-lang and fixora-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 the paint roller follow it on their own. Prices, figures and the drawn scenes (the cooling unit, the ladder, the toolbox) keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 32 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 Toolbox Open preloader, the header, the Screw In reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Fixora Data, Fixora Engine & Live Status. Fixora Data holds every figure; the engine prices a job, finds the band for any hour, the crews free in a window and the next free window, and paints the live lines (open now, the band, the call-out) from the visitor’s clock.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms and choice cards.
• 19–21 — Paint Roller, Cooling Fan, Ladder Rungs. The three home pages’ scroll moments.
• 22–32 — Job Estimate, Booking Wizard, Maintenance Plans, Areas Checker, Contact Form, Parts Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the job estimate, the booking wizard, the maintenance plans, the areas checker, contact, the parts shop, accounts, the blog, the demo forms, the coming-soon countdown and the 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 at their end.

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 and the language flags are included and ready to use. All demo photography shown on the live preview, the shop’s packshots and the cut-out parts 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 request form on Home 01, the booking wizard, reviews, the newsletter, 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: Outfit, Mada

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.