Prepara is a meal kit website template: a fresh, airy HTML5 template for meal-kit delivery services, recipe box brands and dinner subscription kitchens. White grounds with grey bands, Playfair Display headings over Open Sans, overhead flat lays of fresh ingredients and a single yolk accent give it the calm of a clean kitchen counter. Underneath, it runs real meal-kit logic: a plan builder pricing every serving from people and recipes a week. It also has this week’s menu to pick from with diet tags and premium surcharges, recipes that rescale for 2, 4 or 6 with 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.

It ships with light and dark mode, right-to-left support and WebGL layers – a gingham tea towel waving behind the night bands and a carrot built from voxels turning in the footer.

Three Home Pages

• Home 01 – Recipe Box: a hero slider with a white plate on an overhead flat lay. Then come the plan bar, how it works in four steps, the kit box unpacks – its lid lifts and six ingredients rise into a row as you scroll – this week’s menu with diet tags. Finally, the page ends with the ZIP code check, what comes in every box, the recipes of the week, the head chef and members’ words.
• Home 02 – Family Table: a dark full-width slider and the plan builder. Then come the table is laid for two, four and six – plates arrive and every quantity in the recipe scales with the scroll – recipes the whole table eats. Finally, the page ends with the price table that falls as you cook more, the Market and the test kitchen.
• Home 03 – Chef’s Board: a boxed page on gingham with a split hero slider signed by the chef, what is in every box, a chef’s knife crosses the board and slices each ingredient in turn. Then comes the featured recipes and calorie smart picks. Finally, the page ends with your next four boxes with their cut-offs and the journal.

The Meal-Kit Pages

• Plans & Pricing: a preference, 2, 4 or 6 people and 2 to 5 recipes a week – priced a serving (from $8.29), a box, a week and with the welcome offer (50% off the first box with free shipping, 20% off the next two) – and the full price table.
• This Week’s Menu: 14 recipes a week, three menu weeks open for orders, eight diet tags, premium recipes with their surcharge, and a picker tray that keeps the box total as you choose.
• Recipes & Nutrition: a recipe library with search, diet filters and sorts. Every recipe with servings 2 / 4 / 6, ingredients that rescale, nutrition per serving as a share of the reference intake, allergens and the method. A sortable nutrition table for the week.
• Get Started: four steps – plan, recipes, delivery (ZIP code, day, time window, first box) and your details – with a live order summary. Continue never blocks; only the last step checks the details.
• Delivery Days & Manage Deliveries: a ZIP code finds its area’s delivery days across 5 areas, the cut-off counts down 5 days before each box. The next six boxes with skip, pause, delivery day and time window.
• Gift Cards & The Market: gift cards from $25 to $500 with the boxes each covers and a live card preview. Extras by category, price, sort and search, product page, bag, coupon, free-shipping meter, checkout with an order number and a wishlist.

Meal Kit Website Template: Inner Pages

Prepara includes Plans & Pricing, This Week’s Menu, Recipe Library, Recipe Details and Nutrition. It also has Get Started, Delivery Days, Manage Deliveries, Gift Cards, The Market and Product. Then come Cart, Checkout, Wishlist, About, How It Works, Our Chefs and Chef Profile. There are also Gallery, FAQ with search, Blog and Blog Details. It also has Contact (working PHP form and a map), Login, Register and Forgot Password. Finally, there are Coming Soon and 404 – thirty-one pages in total.

Meal Kit Website Template Features

• 31 HTML pages, 3 unique home page designs
• Light and dark mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets for every page and a flag language picker that turns any page around (Bootstrap RTL included)
• WebGL layers tinted by the theme colours: a slow-waving gingham on the night bands and page titles. It also has a voxel carrot turning in the footer.
• Real meal-kit logic from one data block: plan prices per serving, weekly menus with diet tags and premium surcharges, recipes scaled for 2, 4 or 6, nutrition per serving, delivery days by ZIP code, a live cut-off, skip and pause, gift cards, Market totals
• A Knife Chop preloader, Mise en Place reveals with prep-time pops, an ingredient fan on every recipe card and three scroll moments that never pin the page
• Drawn ingredients, a chef’s knife, a kit box and a chopping board made for the template
• Swiper sliders, Fancybox popups
• prefers-reduced-motion support for accessibility
• CSS-variable design tokens for both themes
• Working PHP form handler with optional invisible reCAPTCHA v3
• Font Awesome Free loaded locally
• Fully responsive with a desktop-first breakpoint system and wide-screen layouts
• W3C valid, zero console errors
• Well-commented code with a numbered CSS table of contents and JS index
• Documentation included

This meal kit website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Prepara also comes as React, Vue, Angular and WordPress, or in the developer bundle at 20% off. Browse more Food Delivery HTML5 templates.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5 and Font Awesome Free. It also uses RTLCSS and Google Fonts (Playfair Display, Open Sans).