Overview

A fresh, animation-rich HTML template for juice bars, lassi shops, smoothie counters and healthy cafes. Lassippers ships three fully distinct homepage designs — each with its own color story — plus a complete shop flow, menu, blog and contact pages.

What’s included

• 3 homepage designs (market green, classic cream, berry & mango scheme)
• Shop grid, product detail with gallery & tabs, cart and checkout
• Tabbed menu board and classic price-list menu
• Blog listing, article page with sidebar, three blog list styles across homes
• About page and contact page with embedded map
• Vertical video “reels” sections and self-hosted ambient videos
• GSAP scroll reveals, marquees, counters, live offer countdown
• Mini-cart dropdown, multi-level navigation, offcanvas mobile menu
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — all files are ready to use as-is.

2. Deploy to a server

Upload the entire template 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 below.

File Structure

Below is an overview of the key files and folders included in this template.

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.

Per-page color schemes

Homepage 3 demonstrates a full re-theme: the body.home-three class re-declares the same tokens with a berry & mango palette and squared button radii. Copy that block to create your own scheme for any page.

Fonts

Three Google Fonts are loaded in the head of each page: Anton (display headlines), Bricolage Grotesque (headings, buttons, navigation) and DM Sans (body text). Swap them by editing the Google Fonts link and the --lc-ff-* variables.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into numbered blocks (see the JS INDEX comment at the top of the file):

• 01–06 — Preloader, anchor scroll, sticky header, offcanvas menu, custom cursor, magnetic buttons
• 07–12 — Hero reveals & sliders, scroll reveals, image parallax, marquee, counters, offer countdown
• 13–16 — Testimonial slider, back-to-top ring, YouTube video modal, product carousel
• 17–19 — Quantity stepper, product gallery thumbnails, header search toggle

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.

Images & Video

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 by section inside assets/img/.

Self-hosted videos

The vertical “reels” cards and the Home 2 hero use small, muted, looping MP4 files from assets/video/. They autoplay on all modern browsers because they are muted and use playsinline. Swap them for your own clips — keep them short (5–10s), muted and under a few MB.

YouTube modal

The circular play buttons open a Bootstrap modal that loads a YouTube embed on demand. Change the video by editing the data-src attribute of the iframe inside #videoModal at the bottom of each page.

Contact Form

The contact page posts to sendmail.php, a lightweight PHP mail handler. To activate it on your server:

• Open sendmail.php and replace the recipient address with your own email
• Upload the template to a host with PHP mail() support (almost all shared hosts)
• Optionally add your reCAPTCHA v3 keys in the marked section for spam protection

The newsletter and comment forms are front-end only by default — point their action attributes at your mailing list provider or backend of choice.

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
• Font Awesome Free
• Google Fonts: Anton, Bricolage Grotesque, DM Sans

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheets and the optional YouTube / Google Maps embeds.

Support

If you have any questions or need help with the template, please reach out through our ThemeForest profile. We aim to respond within 24–48 hours.