Overview

A fresh, airy HTML template for meal-kit delivery services, recipe box brands and dinner subscription kitchens. Prepara ships three home pages, a light and a dark theme, right-to-left support, and kitchen logic that is worked out rather than typed in: plans priced a serving from people and recipes a week, a weekly menu you pick from with diet tags and premium surcharges, recipes that rescale for 2, 4 or 6, nutrition per serving, delivery days by ZIP code with a live cut-off, skip and pause, gift cards and a Market of extras that ride with the box.

What’s included

• 3 home pages, each with its own scroll moment: the kit box’s lid lifts and six ingredients rise into a row, the table is laid for 2, 4 and 6 while every quantity scales, a chef’s knife crosses the board and slices each ingredient
• 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 — a slow-waving gingham tea towel behind the night bands and page titles, and a carrot built from voxels turning in the footer — tinted by the theme colours
• Plan builder: 2 / 4 / 6 people × 2–5 recipes a week, from $8.29 a serving, with the box, shipping and the welcome offer
• Weekly menu of 14 recipes from a library of 24, three weeks open for orders, eight diet tags, premium surcharges, a picker tray with the box total
• Recipes with ingredients for 2, 4 or 6, the method, allergens and nutrition per serving as a share of the reference intake; a sortable nutrition table for the week
• Four-step wizard: plan, recipes, delivery (ZIP code, day, window, first box) and details, with an order number
• Delivery days by ZIP code across 5 areas, three time windows, a live cut-off countdown; Manage Deliveries with skip, pause, day and window
• Gift cards with values from $25 to $500, the boxes each covers and a live card preview
• The Market: categories, price, sort and search, product page, bag, coupon, free-shipping meter, checkout with an order number, wishlist
• About, how it works, chefs and a chef profile, gallery with filters, journal with search, FAQ with search, account pages, coming soon, 404
• Knife Chop preloader, Mise en Place reveals with prep-time pops, an ingredient fan on recipe cards, Swiper sliders and Fancybox popups
• Fully responsive, written to validate, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open prepara/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the plan builder, the menu picker, the wizard, delivery days, Manage Deliveries and the Market all work straight from the files.

2. Deploy to a server

Upload the contents of the prepara/ 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. Prices, recipes, menus, zones, products and hours live in one place — see The Kitchen 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 prepara/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

prepara/
├── *.html                              the 31 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
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    vendor scripts (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/                      15 files
        ├── board/                       1 files
        ├── box/                         3 files
        ├── dishes/                      55 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── plates/                      2 files
        ├── produce/                     21 files
        └── team/                        11 files

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

White grounds with a grey and a mist band, charcoal type and a near-black night carry the page; the photographs carry the colour. Yolk is the one accent: the main buttons, the prep-time badges, the sliced rule under every title, the gingham and the chosen plan. Yolk ink is its darker twin for small text on white. Herb, chili and sea colour the diet tags only. --pr-bg, --pr-surface, --pr-band, --pr-heading and --pr-text are the semantic names the components use — the dark theme swaps those.

Fonts

Two Google Fonts are loaded in the head of each page: Playfair Display (headings, figures and prices, italic for quotes and step numbers) and Open Sans (body, navigation, buttons and the small tracked capitals above every title). Swap them by editing the Google Fonts link and the --pr-ff-head / --pr-ff-body variables.

Logo

The logo is “Prepara” written as a pen signature over a yolk disc whose edge is cut into three slices. It ships as ready-made PNG files in assets/img/logo/:

• logo.png / logo-light.png — for light grounds and for dark grounds (the headers over dark heroes and page titles, dark mode)
• logo-footer-light.png — the larger lockup in the footer
• signature.png — the head chef’s sign-off on Home 1, Home 3 and the about pages
• favicon.png — the browser tab icon

The lettering appears only inside the images. 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 prepara-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 in style.css.
• Bands that stay dark — sections with the class is-night (page titles, the price table on Home 2, the next boxes on Home 3, the footer) are dark in both themes. A light card inside one takes pr-on-light.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

The Kitchen Logic

The figures on every page come from one data block, JS block 09 Kitchen Data near the top of main.js (var KIT). Edit it once and the cards, prices, menus, recipes, delivery days and totals follow. Prices are in US dollars; times are minutes after midnight (480 = 8:00 am); weekdays 0–6 from Sunday; ingredient amounts are for two servings and nutrition is per serving.

Price per serving

Delivery days

Manage Deliveries keeps its skips in the browser (prepara-skips); the plan and the picks per menu week are kept too (prepara-plan, prepara-picks) so the menu, the wizard and the recipe pages agree. Connect them to your own subscription system to take real orders.

How the Market totals

A gift card of $120 covers 2 boxes of the two-person, three-recipe plan: the first at the welcome price, then full boxes with shipping.

WebGL Layers

Two small WebGL programs draw the moving layers: gingham — a tea towel of yolk and white threads woven over and under on charcoal, its folds waving slowly, behind the night bands, the page titles and the coming-soon page — and the footer’s voxel carrot, a carrot built from small cubes turning in plain light:

<canvas class="pr-gl" data-gl="gingham" aria-hidden="true"></canvas>
<canvas class="voxel-gl" data-voxel aria-hidden="true"></canvas>

• Colours — the gingham reads its colours and opacity from CSS variables on its canvas or section: --gl-1 (ground), --gl-2 (threads), --gl-3 (the crossing) and --gl-alpha.
• 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)

Prepara is RTL-ready: the layout, the sliders and the animations mirror. Right to left comes from the stylesheets, not from separate pages: the language picker in the top bar lists languages that read both ways. Choosing Arabic stores the language and the direction (keys prepara-lang and prepara-dir) and reloads; the head script 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 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 preloader’s carrot and the knife board are pictures and keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 37 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 Gingham. The core every page shares: the Knife Chop preloader, the header, the Mise en Place reveals with the prep-time pops, the theme and direction switch and the gingham WebGL layer.
• 09–12 — Kitchen Data, Kitchen Clock, Custom Select, Voxel Carrot. Kitchen Data holds every figure; Kitchen Clock works out the menu week, the cut-off, the kitchen line’s open status and delivery days by ZIP code; the voxel carrot turns in the footer.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, newsletter, choice cards.
• 20–27 — Plan, Recipe & Menu Engines, Plan Builder, Weekly Menu & Recipe Picker, Recipe Card, Recipe Library & Nutrition Table, Get Started Wizard, Manage Deliveries, Gift Cards. The meal-kit logic: the plan, recipe and menu engines, the plan builder, the weekly picker, the recipe card, the library and nutrition table, the four-step wizard, Manage Deliveries and gift cards.
• 28–37 — Contact Form, The Market, Account Forms, Article Tools, Launch Countdown, Kit Box Unpacking, Servings Scrub, Knife Board, Tab Sets, FAQ Search. Contact, the Market, accounts, the journal tools, the countdown, the three homes’ scroll moments (the kit box unpacking, the servings scrub, the knife board), tab sets 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: 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. Images are grouped inside assets/img/:

The logo files, the drawn ingredients, the knife, the kit box, the board 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, wizard, gift card, comment, checkout, 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. It will not send from your local computer or from a static-only host — there the form shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is built into the handler and 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 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: Playfair Display, Open Sans

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.