Overview

A bold, animated HTML template for pizzerias that sell to groups: delivery round a city, group orders, parties and office lunches. Pizzolo ships three home pages, a light and a dark theme, right-to-left support, and pizza logic that is worked out rather than typed in: how many pies a crowd needs, a basket the whole crew fills with the bill split per person, a half & half priced by the dearer half, delivery rings by ZIP with the fee, the time to the door and the minimum, the kitchen’s live hours and tonight’s slots, and an order engine with a bag, tip, code, tax and checkout.

What’s included

• 3 home pages, each with its own scroll moment: Table For Eight (a pie’s slices travel to eight plates), Box Stack (boxes stack as the guest count grows, from the party maths) and Zone Rings (the delivery rings fill in over the map)
• Light and dark mode 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: Night Streets (delivery lights travelling a street grid) and the Pizzolo box turning in the footer, its lid opening
• Party calculator: guests, children, vegetarians and appetite in; the cheapest mix of party, large and medium pies, slices each and the cost a head out
• Group order: one basket, every friend adds a pie, the bill split per person (or evenly), ring minimum, closing time, invite code
• Half & half builder, party packs priced against the menu, four-step party booking with the party room or delivery
• Delivery rings by ZIP: fee, time to the door with rush hour, minimum order, the rings drawn to scale on the map, tonight’s slots
• Order online: filters, sort and search, the pizza page with sizes, crusts and extras, the bag with tip and code, checkout with delivery or pickup and an order number, wishlist
• Menu with course and diet tabs, crew, reviews, gallery, journal in five post formats, FAQ with search, account pages, coming soon, 404
• Box Fold preloader, Lid Lift reveals, Swiper sliders and Fancybox lightboxes
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open pizzolo/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the calculator, group order, half & half, delivery checker, booking and the order engine all work straight from the files.

2. Deploy to a server

Upload the contents of the pizzolo/ 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 menu, prices, sizes, delivery rings, hours, packs and crew live in one place — see Pizza 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 pizzolo/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

pizzolo/
├── *.html                              the 30 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── 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 (36 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
        ├── blog/                        12 files
        ├── box/                         2 files
        ├── faces/                       10 files
        ├── flags/                       6 files
        ├── hero/                        10 files
        ├── icons/                       20 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── photos/                      18 files
        ├── pizzas/                      21 files
        ├── team/                        3 files
        └── textures/                    2 files

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

Tomato is the voice: big headings, the hairlines that cut the pages into ruled rooms, the starbursts and badges. Small text and the button faces use its deeper partners (--pz-heading-sm, --pz-tomato-deep) so every line reads clearly. Navy is the night band on a page and the lid that lifts off each photo. Rose and cream are the grained grounds; kraft is the colour of the drawn boxes. --pz-bg, --pz-surface, --pz-heading and --pz-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: Staatliches (the poster caps of every heading, price and figure) and Mulish (body, navigation, buttons, forms and the italic eyebrows). Swap them by editing the Google Fonts link and the --pz-ff-head / --pz-ff-body variables.

Logo

The logo is the name Pizzolo in a soft heavy serif, its last o drawn as a pie with one slice lifted out. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers, the cream footer
• logo-light.png — for dark grounds: the tomato header, the navy footer, dark mode
• pie.png / pie-light.png — the pie mark alone: the preloader’s lid, the photo lids, the map pin
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images — the pages do not load its font. 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

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key pizzolo-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light 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 keep their colour — sections with is-night (navy) or is-tomato (the tomato panels) keep their ground in both themes. A light card inside one takes pz-on-light.
• Grain — the rose and cream grounds carry a fine grain tile; the dark theme swaps it for a light one.
• 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.

Pizza Logic

The figures on every page come from one data block, JS block 09 Pizza Data near the top of main.js (var PIZZA). Edit it once and the menu, cards, planners, rings and totals follow. Prices are in US dollars; times are minutes after midnight (660 = 11:00 am; a close after midnight runs past 1440).

The party calculator

Each adult eats an appetite’s worth of pizza in square inches, a child half that. The calculator tries every mix of party, large and medium pies that covers the need and keeps the cheapest (at the menu’s average price per size); a tie goes to fewer boxes. Vegetarian pies follow the vegetarians’ share of the guests.

The group order

Each friend pays for their own food plus its tax; the delivery fee and the tip are split evenly. “Evenly” splits the whole total by heads. Cents are rounded per person and any odd cent lands on the host, so the shares always add up. The basket lives in the browser under pizzolo-group-v1.

Half & half

Delivery and the clock

The ZIP checker answers with the ring, the fee (free from $60), the time to the door and the minimum, and remembers the ZIP for the bag, checkout and the group order. The clock gives open now or the next opening, delivering until (last orders), the rush-hour delay and tonight’s slots every 15 minutes.

The bag, wishlist, ZIP, tip, code and group basket 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; to start empty, set the two demo lists in doShop() (block 31 Order Engine) to []. Checkout, the group order and the party booking confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Two kinds of WebGL draw the moving layers. Night Streets is a fragment shader under the navy bands: a faint street grid with small delivery lights travelling along it, kept to the band’s sides. The Pizzolo box in every footer is a real triangle mesh, flat-shaded face by face: a kraft tray with a pie inside and a lid that swings open and shut while the box turns.

<canvas class="pz-gl" data-gl="streets" aria-hidden="true"></canvas>
<canvas class="footer-box-gl" data-box-gl aria-hidden="true"></canvas>

• Colours — Night Streets reads --gl-1, --gl-2, --gl-3 and --gl-alpha; the box reads --box-kraft, --box-print and --box-cheese if you set them on its canvas. The theme switch repaints them.
• Performance — a layer only runs while it is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Pizzolo 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) lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys pizzolo-lang and pizzolo-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

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The pictures keep their own left and right: the plates round the table, the halves of a half & half and the delivery map.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 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 Box Fold preloader, the header, the Lid Lift reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Pizza Data, Pizza Clock & Helpers. Pizza Data holds every figure; Pizza Clock works out open now, delivering until, rush hour and tonight’s slots.
• 11–19 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, counters, sliders, accordions, filters, search, newsletter, choice cards.
• 20–36 — Table For Eight, Party Maths, ZIP Checker, Review Switch, Half & Half, Box Stack, Zone Rings, Party Calculator, Group Order, Party Booking, Contact Form, Order Engine, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The scroll moments and the niche logic: the party maths, the ZIP checker, half & half, the box stack, the zone rings, the party calculator, the group order, the party booking, the contact form, the order engine, accounts, articles, 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 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 boxes, the illustrated icons, the grain textures 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, review, comment, account, checkout, group order and party booking 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: Staatliches, Mulish
• Logo lettering: Fraunces

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

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.