About This Template
A premium, framework-free HTML/CSS/vanilla-JS template for bottled-water delivery, beverage brands, and subscription home-delivery services. Built bespoke from the subject — not a recolored scaffold.
SOURA is part of the uiuxlabz collection — a set of premium, framework-free HTML templates designed from each subject to feel genuinely unique. Open the folder, edit the text and tokens, and you have a production-ready website for a logistics & delivery business.
Key Features
- ✓Micro-bar ticker — mineral data stream (pH, TDS, batch) in monospace at top
- ✓Vertical-ledger hero — text + glass vessel card with pH bead + marginal annotations
- ✓Proof band — 4-cell dark stats (altitude, TDS, pH, delivery window) with count-up animation
- ✓Source split — 1.05/.95 frame + numbered origin list
- ✓Tasting-sheet catalogue — 3-column product grid with filter tabs (All/Still/Sparkling/Jug)
- ✓Subscription plans — 3 tiers with featured highlight, cadence step-strip (4 steps with arrows)
- ✓Testimonials — 3-column quote cards with star ratings
- ✓FAQ accordion — expandable items with +/- toggle
- ✓CTA band — dark gradient with dual actions
- ✓Label-paper footer — 4-column grid with source coordinates
- ✓Pour-line + bead-pop animations — water-themed reveal effects
- ✓Scroll reveals — IntersectionObserver with staggered delays (`.d1`…`.d4`)
- ✓Contact form — inline validation, no `alert()`, `.form-ok`/`.form-err` messages
- ✓Product filter — client-side tab filtering on catalogue page
- ✓Active nav — auto-highlight via `location.pathname`
- ✓Footer year — `[data-year]` auto-fills current year
- ✓Reduced motion — `@media (prefers-reduced-motion)` disables all animation
- ✓Original imagery — 13 source images from Acuas (`assets/img/`): `water.png`, `about.jpg`, `blog-1/2/3.jpg`, `carousel-1/2.jpg`, `product-1/2/3.png`, `fact-bg.jpg`, `breadcrumb.jpg`, `Acuas.jpg`