Overview

An HTML template for a streetwear and sneaker drops store: a sneaker on the wall every Saturday, a raffle for every pair that sells out, skate decks and completes, hoodies printed in-house and gift vouchers. Urbanza 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 drop calendar from today’s date; a raffle per drop with its window, the entries as they come in and the odds in every size; the size run on every product; a size finder; build a complete; gift vouchers; sneaker care with a ready date; order tracking; and a shop with colourways, stock per size, a bag, coupon, shipping zones and VAT.

What’s included

• 3 home pages, each with its own scroll moment: The Turn (the drop sneaker, built in three.js, turns a full 360° beside its size run), Kickflip (a skate deck flips about its long axis and lands) and Three Passes (a hoodie’s back print screens on in mustard, red and ink)
• 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 Tunnel Lights rushing past at the edges of the dark bands, the page titles and the footer, and the footer’s logo built from rotating Truchet tiles
• The drop calendar: a sneaker every Saturday at 10:00 from a line-up of 8, the apparel capsule and the deck series on their Fridays, worked out from today, with the next drop counted down in every top bar
• The raffle: opens Monday, closes Thursday night, results Friday at noon; one entry per email; the entries grow towards the close and the odds show in every size; your entries and their results stay in the browser
• The size run on every card and product page, sold-out sizes struck and a low-stock dot that names the sizes left; a size finder for sneakers, tops and decks
• Build a complete, gift vouchers with a live card preview and a balance check, sneaker care with a ready date, order tracking by working days
• The shop: categories, size, colour and price filters, sort and search, colourway swatches that swap the photograph, the product pages, bag, coupon, shipping zones, VAT included, collect in store, checkout with an order number, wishlist
• The lookbook, the crew and the skate team, the journal, FAQ with search, account pages, coming soon, 404
• Lace Up preloader, Slice Snap photo reveals, a pop on the drop flags, a drop pulse on low stock, Swiper sliders and Fancybox popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open urbanza/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the drop calendar, the raffles, the size runs, the finder, the builder, the vouchers and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the urbanza/ 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 drop line-up, the raffle rules, the sizes, the products with their stock, the skate parts, the vouchers, the care services 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 urbanza/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

urbanza/
├── *.html                              the 34 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
    │       └── three.min.js            the 3D sneaker and deck (Home 1 and Home 2)
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      8 files
        ├── bg/                          2 files
        ├── decor/                       4 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── hero/                        3 files
        ├── icons/                       22 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── shop/                        31 files
        ├── street/                      20 files
        ├── team/                        6 files
        └── vouchers/                    3 files

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

White is the ground, concrete the quiet bands with their plaster texture, graphite the dark bands and the footer; ink sets the type, the price chips and the primary buttons. Mustard is the one accent and is used as a fill — the flags, the skewed plates, the highlighter under the accent words, the speed stripe — never as text on white. Drop red is the signal only: low stock, sold out, live now. --ub-bg, --ub-surface, --ub-panel, --ub-heading and --ub-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). --ub-skew sets the slant of every plate.

Fonts

Two Google Fonts are loaded in the head of each page: Poppins (every heading, the price chips, the buttons and the menu) and Chivo (body text, labels and figures). Swap them by editing the Google Fonts link and the --ub-ff-head / --ub-ff-body variables.

Logo

The logo is the word urbanza knocked out of an ink skewed plate, its right end cut by one mustard Truchet arc. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — the ink plate, for white grounds (every header in the light theme, the mobile menu)
• logo-light.png — the white plate, for the headers over the hero photographs and the dark theme
• favicon.png — the u on its plate with the arc, on an ink square, the browser tab icon

The footer draws the same logo out of Truchet tiles on a canvas, from the page’s own Poppins — change the word in doTruchetLogo() (block 20). To use your own logo, replace the PNG files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Urbanza 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 urbanza-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.
• Canvases — the 3D sneaker, the deck, the print and the Truchet logo read their inks from --cv-ink and --cv-paper; the Tunnel Lights read --gl-1, --gl-2 and --gl-alpha, which the dark block swaps.
• 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 Urbanza Data near the top of main.js (var URBANZA). Edit it once and the calendar, raffles, prices, stock, totals and dates follow. Prices are in pounds sterling; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key urbanza-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); weekdays run 0 = Sunday to 6 = Saturday.

The drop calendar and the raffle

The calendar is worked out from the visitor’s date: the week since the epoch picks the line-up’s sneaker, and each drop moves from coming up to raffle open, drawing, results, live (until the doors close) and sold out. The entries grow from the opening to the close along the curve, pairs × over × (1 − (1 − t)1/curve), and are spread over the sizes by demand; the pairs are spread by alloc. The odds in a size are its entries over its pairs.

A raffle entry is kept in the browser with its number. After Friday’s draw it wins when its number’s hash falls inside the size’s share of pairs to entries at the close, so a result never changes once drawn.

The size finder

The foot length plus room for the fit (snug 0, true 0.3, roomy 0.8 cm, and 0.5 cm for a wide foot) picks the first size whose length covers it; the deck width follows the UK size.

Build a complete

The total is the deck, the trucks, the wheels, the bearings, the grip and the hardware, risers when the wheels are 56 mm or more, and assembly unless the parts come to £150 or more.

Gift vouchers and sneaker care

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 (never off a voucher) before the free-shipping check.

The bag, the wishlist, the applied coupon, the raffle entries, your size 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, wishlist and one past raffle entry so every page has something to show; to start empty, set the two demo lists in doShop() (block 31 Shop) to []. Checkout and the raffle confirm on screen with a reference — connect them to your own systems to take real orders and entries.

WebGL, 3D & Canvas

One small WebGL shader draws the Tunnel Lights — strip lights rushing past at the left and right edges of the dark bands, the plain page titles and the footer, the way the lamps of an underpass stream past a car window. Each layer is one canvas:

<canvas class="ub-gl" data-gl="tunnel" data-gl-edge="0.32" aria-hidden="true"></canvas>

• Place — data-gl-edge sets how wide the clear middle is, so the copy stays clean; data-gl-vy moves the vanishing point up or down.
• Colours — sodium mustard and strip white: --gl-1, --gl-2 and the strength --gl-alpha. The theme switch repaints them; scrolling speeds them up.
• 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 drop sneaker on Home 1 and the deck on Home 2 are built in three.js from their own geometry — no model files (data-turn-canvas, block 21; data-kf-canvas, block 22). The hoodie print (data-passes-canvas, block 23) and the footer’s Truchet logo (data-truchet, block 20) are plain 2D canvases. Every scene is scrubbed against its own section’s travel, none of them pins the page, and each rests in a settled state for reduced motion.

RTL (Right To Left)

Urbanza 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 urbanza-lang and urbanza-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, dates, countdowns and odds keep reading left to right inside their rows, and the canvases 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 Lace Up preloader, the header, the Slice Snap and soft-rise reveals, the theme and direction switch and the WebGL Tunnel Lights.
• 09–12 — Urbanza Data, Drop Engine, Custom Select, Currency. Urbanza Data holds every figure; the Drop Engine works out the drops, the raffle windows, the size runs, the entries and the odds from the date; 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 — Truchet Logo, The Turn, Kickflip, Three Passes. The footer’s logo built from Truchet tiles (every page) and the scroll moments: the drop sneaker’s full turn (Home 1), the kickflip (Home 2) and the hoodie print in three passes (Home 3).
• 24–39 — Store Clock, Drop Calendar, Drop Page & Raffle, Size Guide, Build A Complete, Gift Vouchers, Contact Form, Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, Sneaker Care, Order Tracking, FAQ Search. The feature pages: open now from the clock, the drop calendar, the drop page with its raffle entry, the size guide, build a complete, gift vouchers, contact, the shop, accounts, the journal, demo forms, the countdown, sneaker care, 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 textures and decor, the illustrated icons, the drawn product packshots (the drop sneaker in every colour and the decks), the gift cards and the language flags 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 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, raffle, voucher, care, 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
• three.js
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Poppins, Chivo

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed 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.