Overview

An elegant, animated HTML template for French pâtisseries, pastry shops and pastry schools, in gold on white marble and black. Patissa ships three home pages, a light and a dark theme, right-to-left support, and pâtisserie logic that is worked out rather than typed in: masterclass dates and seats left, a counter pre-order by bake batch, a portions calculator for whole tarts and entremets, gift vouchers with a live preview, the salon’s open-now status and a shop with a bag, coupon, chilled shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: the lamination fold (a dough sheet folds in thirds, 3 → 9 → 27 → 81 layers), a spiral of fruit settling on a tart, and star anise, vanilla and cinnamon floating on three depths
• Masterclass booking in four steps: the class, a date from its repeat rule with the seats left, seats and details, confirm
• Counter pre-order by bake batch: the morning and afternoon batches with their own cut-offs, pickup windows and pieces left
• Tarts and entremets in four sizes with a portions calculator (guests × appetite) and the earliest pickup date
• Gift vouchers: a value or a masterclass, three designs, a live card with its code and expiry
• 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
• WebGL Marble Veins under the night bands and a flat-shaded macaron turning in the footer
• Torch Glaze preloader, Tart Slice reveals (a clock-wipe with a gold knife-line), gold-leaf hover, Swiper sliders, Fancybox
• The shop: filters, sort and search, product, bag, coupon, free-shipping meter, tax, checkout with an order number, wishlist
• Menu with dietary filters, chefs and profiles, gallery, journal with six post formats, FAQ with search, accounts, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open patissa/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — booking, pre-order, the calculator, vouchers and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the patissa/ 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. Hours, batches, classes, sizes, vouchers and products live in one place — see Pâtisserie 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 patissa/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

patissa/
├── *.html                              the 30 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 (19 sections)
    │   ├── 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 LTR + RTL, Swiper, Fancybox)
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      12 files
        ├── blog/                        10 files
        ├── decor/                       9 files
        ├── flags/                       6 files
        ├── fruit/                       7 files
        ├── gallery/                     38 files
        ├── home/                        14 files
        ├── icons/                       24 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── preloader/                   2 files
        ├── shop/                        22 files
        ├── team/                        11 files
        └── textures/                    1 files

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 --pt-gold-rgb) — change both together.

Gold draws the diamond rules, the icons, the frames and the gold buttons (black text on gold). Gold ink is gold’s partner for small text on light grounds; gold script colours the large handwritten eyebrows. Noir is the button, the night bands and the footer. White, marble and porcelain are the section grounds. --pt-bg, --pt-surface, --pt-heading and --pt-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: Montserrat (the spaced caps titles, navigation, buttons and body) and Great Vibes (the gold script of the eyebrows, signatures and figures). Swap them by editing the Google Fonts link and the --pt-ff-body / --pt-ff-script variables.

Logo

The logo is a small meringue tartlet over PATISSA in spaced capitals. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers, the offcanvas
• logo-light.png — for dark grounds: the Home 2 header, coming soon, dark mode
• logo-footer.png — the footer lockup with the script line “Pâtisserie Française”
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key patissa-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root.
• Bands that stay dark — sections with the class is-night (the two bakes, the fruit spiral, the footer) are black marble in both themes. A light card inside one takes pt-on-light.
• Product tiles — the counter and shop tiles stay white in both themes, the ground of the product photographs.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Pâtisserie Logic

The figures on every page come from one data block, JS block 09 Patissa Data near the top of main.js (var PATISSA). Edit it once and the cards, dates, seats, prices and totals follow. Prices are in US dollars; times are minutes after midnight (450 = 7:30 am); weekdays run 0 = Sunday to 6 = Saturday.

The salon’s week

Masterclass booking

A class’s next 8 sessions come from its repeat rule (a session that has started drops out). Seats taken per session are a stand-in worked out from the date so the demo looks lived-in, with about one session in seven full — replace seatsTaken() in block 10 Maison Clock with your own bookings. The wizard (block 26) never blocks on Continue; Confirm checks the details and gives a reference.

Counter pre-order

The morning batch is out of the oven at 7:30 am, for pickup 8:00 am – 12:00 pm, and takes pre-orders until 6:00 pm the evening before. The afternoon batch is out at 2:30 pm, for pickup 3:00 pm – 7:00 pm, ordered by 11:00 am the same day. The page offers today and the next 6 days, closed days greyed out; each pastry shows the pieces left in that batch and cannot be ordered beyond them (block 27).

Portions calculator

Slices needed = guests × the appetite factor, rounded up. The smallest size that serves them is advised; past the largest, the largest cakes are added until the smallest that covers the rest. Sizes: 16 cm (6 slices, ×1), 20 cm (10 slices, ×1.55), 24 cm (14 slices, ×2.15), 28 cm (20 slices, ×2.9). Price = the recipe’s 16 cm price × the factor (block 24).

How the shop totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage). The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 31 The Shop) to []. Checkout, booking, pre-order, the cake order and vouchers confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Block 08 draws two layers. Marble Veins — long veins, thin threads and a few gold seams flowing slowly — sits under the night bands and the footer as one canvas:

<canvas class="pt-gl" data-gl="marble" aria-hidden="true"></canvas>

The macaron in the footer is a small mesh (two domed shells on ruffled feet round the filling) turning in flat, three-step shading: <canvas class="footer-macaron" data-macaron>.

• Colours — the marble reads --gl-1 (ground), --gl-2 (veins), --gl-3 (gold) and --gl-alpha; the macaron reads --mac-shell, --mac-fill and --mac-rim.
• Performance — a layer runs only while it is on screen and the tab is visible; reduced motion gets one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the language picker beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the direction (key patissa-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. Nothing is translated — you bring your own copy. To make a page right to left for good:

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

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 numbered blocks. Each block is a self-contained doSomething() function that skips pages where its section is not present:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Marble & Macaron
• 09 — Patissa Data
• 10 — Maison Clock
• 11 — Custom Select
• 12 — Meters
• 13 — Hero Sliders
• 14 — Card Sliders
• 15 — Accordion
• 16 — Filter Tabs
• 17 — Grid Search
• 18 — Newsletter
• 19 — Choice Cards
• 20 — The Lamination Fold
• 21 — Floating Cut-Outs
• 22 — Upcoming Sessions
• 23 — Fruit Spiral
• 24 — Portions Calculator
• 25 — Class Finder
• 26 — Class Booking
• 27 — Counter Pre-Order
• 28 — Gift Vouchers
• 29 — Menu Filters
• 30 — Contact Form
• 31 — The Shop
• 32 — Account Forms
• 33 — History Timeline
• 34 — Article Tools
• 35 — Demo Forms
• 36 — Launch Countdown
• 37 — FAQ Search

Every animation respects prefers-reduced-motion: content appears in its final state.

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. Images are grouped inside assets/img/:

The logo files, the line icons, the drawn fruit and tart, the meringue tartlets, the gold leaf, the marble plate 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 forms and the comment form post to sendmail.php, a lightweight AJAX mail handler. The newsletter, quote, job, booking, pre-order, cake order, voucher, checkout and account forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support. Opened from your computer, it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• Add a hidden token field inside the form and load the reCAPTCHA script with your site key before </body>:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

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

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Montserrat, Great Vibes

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.