Overview

An HTML template for a menswear and men’s lifestyle store: tailoring, shirts, knitwear, shoes, watches, travel goods and grooming, with a tailoring room in every store. Dappero 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: shop by occasion; complete-the-look bundles; a suit size guide from three measurements; a gift finder; alterations priced job by job with the ready date; appointments in six steps; the stores open now from the clock; order tracking; and a full shop with colours, size systems, a bag, coupon, delivery zones and VAT.

What’s included

• 3 home pages, each with its own scroll moment: The Watch Room (a watch movement seen through an open case back, every wheel turning with the scroll), Tie Knots (four ties tie themselves in turn under four collars) and Shirt Fan (a pile of folded shirts fans out by colour)
• 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
• WebGL mown stripes — the light and dark bands a mower leaves on a lawn — in the member and newsletter bands, the page titles and the footer, and the footer’s tangram, whose seven pieces rearrange from a shirt into a shoe into a watch
• Shop by occasion: Office, Weekend and Travel, each an edit of its pieces and looks; a link to occasions.html#travel opens that tab
• Complete the look: 6 looks of four slots (shirt, trousers, shoes, watch), each slot swapping between the stylist’s alternatives with its own size; four pieces save 15%, three 10%, and the whole look goes in the bag in one click
• The suit size guide: chest, waist and height give the jacket size, the drop, the fit, the trouser size and the length, in centimetres or inches
• The gift finder: 4 budgets × 6 interests rank the best six, with a gift card when fewer than three match and gift wrap
• Tailoring: 14 alterations by garment with price and working days, express at half the days, the ready date in the workroom’s own days; appointments in six steps with the tailors’ own days
• The shop: 45 pieces in 10 departments, colours that swap the photograph, suit, collar, letter, waist and shoe sizes, sold-out sizes, filters, search, sort, quick view, the product page, bag, coupon, zones, VAT included, collection in store, checkout with an order number, wishlist, order tracking
• The three stores open now and the tailors in from the visitor’s clock, the team, the journal, FAQ with search, account pages, coming soon, 404
• Cufflink preloader, Cuff Turn card reveals, word-by-word title rise, a lapel pin on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open dappero/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the store clock, the bundles, the size guide, the gift finder, the alterations, the appointments and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the dappero/ 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 stores, the occasions, the products, the looks, the size guide, the gift rules, the alterations, the appointments, the team and the shop rules live in one place — see Store 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 dappero/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

dappero/
├── *.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 (39 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/                         4 files
        ├── banner/                      13 files
        ├── blog/                        1 files
        ├── category/                    6 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── hero/                        12 files
        ├── icons/                       32 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── shop/                        70 files
        └── team/                        4 files

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

White is the ground; ink sets the type, the navigation and the primary buttons, and night the top bar and the footer. Plate grey sits behind every packshot, and ice is the quiet band. Club green is the one accent — the accent words, the sale tags, the saved prices, the active filters and the green band — and gold appears only where there is metal: the cufflink, the lapel pin, the watch cases in the drawings. --dp-bg, --dp-surface, --dp-panel, --dp-heading and --dp-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: Jost (every heading in tracked capitals, the menu, the buttons and the small labels) and DM Sans (body text, meta and prices). Swap them by editing the Google Fonts link and the --dp-ff-head / --dp-ff-body variables.

Logo

The logo is the word DAPPERO in Jost capitals with its last O drawn as a cufflink face — a ring with an enamel green disc set in it. 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 header over the hero photographs and the dark theme
• favicon.png — the cufflink 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

Dappero 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 dappero-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 movement, the ties, the shirts, the tangram) read their inks from --cv-ink, --cv-paper, --cv-line, --cv-metal and --cv-accent, which the dark block swaps; the stripes read --gl-1, --gl-2 and --gl-alpha.
• Logo and icons — the light logo shows on photographs and in the dark theme; each illustrated icon 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.

Store Logic

The figures on every page come from one data block, JS block 09 Dappero Data near the top of main.js (var DAPPERO). Edit it once and the edits, prices, sizes, 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 dappero-currency), and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Times are minutes after midnight (600 = 10:00 am); weekdays run 0 = Sunday to 6 = Saturday.

Complete the look

A look is four slots, each a piece in a colour with alternatives to swap through. Four pieces kept save 15%, three save 10%, fewer save nothing; the bundle price is the pieces’ total less that share, to the nearest pound. In the bag the saving stays while three or four of the look’s pieces are there.

The suit size guide

The chest gives the jacket size (inches to the nearest even size, 36 to 48); the drop is the jacket size less the waist (8 or more athletic — the slim fit — 4 or less comfort); the height gives the length.

Alterations and the ready date

Jobs run side by side: the longest job’s days plus a day for every second job after the first; express halves them for half as much again. The ready date counts the workroom’s days from the next day.

The gift finder

Every piece inside the budget is scored by how many of his interests it answers, then its rating, then how well it uses the budget; the best six show, and fewer than three matches offer a gift card of the budget instead.

How the shop totals

Prices include VAT: the bag shows the VAT inside the total, not on top of it. The bundle saving and the coupon come off the goods before the free-delivery check; express and collection change the delivery line.

The bag, the wishlist, the applied coupon, the sizes from the guide, the alterations picks, the gift choice, the appointments and the orders are kept in the browser (localStorage), so they follow the visitor from page to page and appear on the account 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 Shop) to []. Checkout and appointments 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 mown stripes — the light and dark bands a mower leaves on a lawn, laid across a band at an angle and drifting slowly, each stripe fine blade noise leaning its own way under a soft light that wanders. Each layer is one canvas:

<canvas class="dp-gl" data-gl="stripes" data-gl-angle="-0.42" aria-hidden="true"></canvas>

• Angle — data-gl-angle sets the stripes’ slope in radians, so neighbouring bands can lean opposite ways.
• Colours — --gl-1 and --gl-2 are the light and dark grass and --gl-alpha the strength; the dark theme and the green band set their own.
• 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 footer’s tangram (data-tangram, block 20) is the seven rigid pieces of one square rearranging from a shirt into a shoe into a watch and back, each piece sliding and turning the shortest way. The scroll moments are drawn on plain 2D canvases — data-watch-gears, data-tie-knots and data-shirt-fan, blocks 21–23 — scrubbed against their own section’s travel and never pinned; their colours follow the theme tokens and they rest in their finished state for reduced motion.

RTL (Right To Left)

Dappero 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 dappero-lang and dappero-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, sizes and figures keep reading left to right inside their rows, and the drawings keep their handedness.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 39 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 Cufflink preloader, the header, the Cuff Turn and word-rise reveals, the theme and direction switch and the WebGL mown stripes.
• 09–12 — Dappero Data, Header Search, Custom Select, Currency. Dappero Data holds every figure; the header search hands its words to the shop; the custom selects; 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 — Footer Tangram, The Watch Room Movement, Tie Knots, Shirt Fan. The footer’s tangram (every page) and the scroll moments: the watch movement (Home 1), the four tie knots (Home 2) and the shirt fan (Home 3).
• 24–39 — Store Clock, Shop By Occasion, Suit Size Guide, Appointments, Alterations Estimate, Complete The Look, Contact Form, Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, Gift Finder, Order Tracking, FAQ Search. The feature pages: the stores open now from the clock, shop by occasion, the suit size guide, appointments, the alterations estimate, complete the look, contact, the shop, accounts, the journal, demo forms, the countdown, the gift finder, order tracking, 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 drawn art, the illustrated icons and the language flags are included and ready to use. All demo photography shown on the live preview, the packshots 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, appointment, checkout, tracking, 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: Jost, DM Sans

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.