Overview

A loud, street, pop-art HTML template for New York slice shops, pizzerias and pizza bars with events. Sliceria ships three home pages, a light and a dark theme, right-to-left support, and slice-shop logic that is worked out rather than typed in: what is out of the oven right now at every shop, deals that run by the hour, whole pies to order for pickup or delivery, an events calendar with seats left and tickets, back-room parties priced live, and six locations with open now and a borough filter.

What’s included

• 3 home pages, each with its own scroll moment: the split-flap slice board flips to the next pie out of the oven, a slice pulls away from the pie with its cheese stretching, the comic strip of a pizza class lays itself out panel by panel
• Comic Panels preloader: three halftone panels slam in, the last one fills the screen and lifts away
• Bar Wipe reveals (a tomato-red bar sweeps across each photo), burst badges that pop, a comic burst behind every price on hover
• 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 layers — Spray Paint over brick in the night bands and a pizza slice spinning in flat comic shading in the footer — tinted by the theme colours
• Out Of The Oven: a live split-flap board per shop; the menu with dietary chips and search; whole pies with extra toppings and pickup slots
• The bag: codes that work only inside their hours, pickup at any shop or delivery by ZIP and borough, tip, NYC tax, order number
• Events calendar with seats left, a four-step ticket wizard, private parties with a live estimate
• Locations with a borough filter and open now, gallery, crew, history timeline, FAQ with search, blog with six post formats, account, coming soon, 404
• Fully responsive; clean, commented HTML5, CSS and JavaScript

Getting Started

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

1. Open locally

Unzip the downloaded package and open sliceria/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the slice board, the bag, checkout, the calendar, tickets and the party estimate all work straight from the files.

2. Deploy to a server

Upload the contents of the sliceria/ 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 slices, ovens, shops, hours, deals, events and prices live in one place — see Slice Shop 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 sliceria/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

sliceria/
├── *.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 (35 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
        ├── art/                         8 files
        ├── banner/                      6 files
        ├── flags/                       6 files
        ├── food/                        24 files
        ├── icons/                       30 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── people/                      7 files
        ├── pies/                        16 files
        └── place/                       16 files

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

Tomato red fills the buttons, the Ben-Day dot bands and the Bar Wipe, always with white text. Mustard fills the burst badges and the display words on night; on the cream page small mustard text uses the deeper mustard text colour. Basil is kept for the logo and the open-now light. --sl-bg, --sl-surface, --sl-soft, --sl-heading and --sl-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). --sl-frame draws the comic panels’ ink frames and their hard shadow; --sl-burst is the burst star’s shape.

Fonts

Two Google Fonts are loaded in the head of each page: Oswald (every heading, the menu, buttons, prices and the split-flap tiles, in capitals) and Open Sans (body text). Swap them by editing the Google Fonts link and the --sl-ff-head / --sl-ff-body variables. The misprint (a hard offset in a second ink behind the display titles) is the class sl-print.

Logo

The logo is “Sliceria” in a green brush script with a small red NYC over the S and a slice for the first i’s dot. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the cream header
• logo-light.png — for dark grounds: the night headers of Home 2 and Home 3, the footer, dark mode, the preloader
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images — the pages do not load its font.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key sliceria-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. The comic frames turn cream in the dark.
• Bands that stay dark — sections with the class is-night (the slice board band, the back-room nights, the comic strip, the footer) are dark in both themes; the red dot bands is-red keep their red.
• The slice board — the split-flap board is a dark board in both themes, like the real thing.
• 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.

Slice Shop Logic

The figures on every page come from one data block, JS block 09 Slice Data near the top of main.js (var SLICE). Edit it once and the board, the cards, the calendar, the prices and the totals follow. Prices are in US dollars; times are minutes after midnight (a late close past midnight runs on, so 1500 is 1:00 am).

The ovens

How the board reads the clock

At a shop that is open, every slice’s pies come out on its own cycle from the opening, until an hour before closing. The board shows the last pie out, the slices left of it (eight a pie, sold at the slice’s pace, faster in the rushes), Just Out for the first few minutes, Next when a pie is sold out and another is due, and Sold Out when a capped special is gone for the day.

How an order totals

The bag, the wishlist, the code, the orders and the tickets are kept in the browser (localStorage), so they follow the visitor from page to page and the account page lists them. The first visit starts with a small demo bag so every order page has something to show; to start empty, set the demo list in doShop() (block 28 Order Engine) to []. Checkout, tickets, the party request and the account forms confirm on screen with a reference — connect them to your own systems to take real orders.

Events and tickets

Every night comes from its weekly slots. The seats taken on a night are worked out from its date (fuller as the night gets closer) plus the visitor’s own tickets, so the calendar, the cards, the tonight strip and the wizard always agree; to use your own box office, replace seatsOf() (block 23 Events Calendar). Continue never blocks; Confirm checks the details.

WebGL Layers

Two small WebGL shaders draw the moving layers: spray — soft spray-can colour clouds drifting over a faint brick wall at the night bands’ edges, breaking into speckle — and the slice — a pizza slice spinning on its long axis in flat comic shading (halftone dots on the shaded side, an ink rim) over a turning burst, in the footer. Both are flat 2D shapes, light to run. Each is one canvas:

<canvas class="sl-gl" data-gl="spray" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1 (the brick), --gl-2 and --gl-3 (the paint), and --gl-alpha.
• 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)

Sliceria 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 and the mobile menu lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys sliceria-lang and sliceria-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 scripts read the direction from the dir attribute: the sliders, the Bar Wipe and the comic strip run the other way on their own. The split-flap tiles and the month calendar keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 35 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 Comic Panels preloader, the header, the Bar Wipe reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Slice Data, Shop Clock. Slice Data holds every price, oven cycle, shop, event and rule; Shop Clock works out open now at every shop, the deals on now and the pie of the day.
• 11–19 — Custom Select, Rating Meters, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, bars, sliders, accordions, filters, search, newsletter, choice cards.
• 20–35 — Slice Board, Slice Pull, Comic Strip, Events Calendar, Menu Filters, Locations, Party Estimator, Contact Form, Order Engine, Account Forms, Tabs, Article Tools, Demo Forms, Launch Countdown, My Account, FAQ Search. The niche engines and pages: the slice board, the slice pull, the comic strip, the events calendar and tickets, menu filters, locations, the party estimate, contact, the order engine, accounts, tabs, articles, forms, countdown, 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: content appears in its final state and the scroll moments 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 comic slice, the brush-script words, the line icons 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, tickets, party request, 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

$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. 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: Oswald, Open Sans
• Logo lettering: Kaushan Script

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.