A responsive, hand-coded landing page concept for Lavana, a fictional handcrafted candle brand. Built as a design sample by EtherLabZ to showcase clean front-end craftsmanship — the kind of design we ship for our clients before we wire it into a CMS or storefront.
Static HTML / CSS / JS today. Built to be portable: this same design can be dropped into a WordPress theme (WooCommerce-ready) on request.
Full desktop page
The layout is fully responsive (320 / 375 / 414 / 768 / desktop). Run it locally — see Run it locally — to view the mobile experience in your own browser.
A complete single-page e-commerce style layout with the following sections:
- Hero — dual-image collage with decorative florals, brand tagline, and a primary CTA.
- Shop by Category — eight product category tiles (Scented Candles, Reed Diffusers, Room Sprays, Wax Melts, Soy / Jar / Pillar candles, Gift Sets).
- Just Natural — feature block highlighting Organic, Vegan, Cruelty-Free, Petroleum-Free, Phthalate-Free positioning.
- Best Sellers — eight featured products with rating, price, and add-to-cart.
- Discover — editorial-style image grid for premium quality, gifting, handcrafted, and gift sets.
- Brands — logo strip.
- Brand Story — three numbered story panels (fragrance, sustainability, occasions).
- Reviews carousel — Swiper-driven testimonial slider.
- Instagram feed — 5-tile follow-us grid with IG CTA.
- Newsletter — email subscription block.
- Footer — contact, services, orders, popular collections.
Layout adapts from 1440px desktop down to 390px mobile. Mobile gets:
- Hamburger menu with slide-out nav and submenu accordions
- Search overlay (mobile/tablet only)
- Stacked product grids
- Touch-friendly tap targets
Intentionally minimal — no build step, no framework.
| Markup | HTML5 |
| Styles | Vanilla CSS (~74 KB, single file) |
| Scripts | Vanilla JS (menu, search overlay, submenus, esc handling) |
| Icons | Lucide + Font Awesome |
| Carousel | Swiper 11 |
| Fonts | Camellia, Evolventa, Gangitem (local OTF) + Playfair Display & Inter (Google Fonts) |
No build step needed — it's plain HTML.
git clone https://github.com/EtherLabZ/Lavana.git
cd Lavana
python3 -m http.server 8000
# open http://localhost:8000Or just open index.html directly in a browser (some font/CDN behavior is nicer over http://).
.
├── index.html # All page sections
├── styles.css # All styling (responsive included)
├── script.js # Menu, search, submenu, swiper init
├── assets/ # Images, SVG illustrations, logos
├── fonts/ # Custom OTF fonts
└── screenshots/ # README previews
This static design is the source of truth. Planned conversion path:
- Convert sections to a WordPress theme (
header.php,footer.php,front-page.php, partials per section). - Wire Best Sellers and Shop by Category to WooCommerce product loops.
- ACF / block patterns for editorial blocks (Hero, Just Natural, Discover, Brand Story).
- Newsletter form → Mailchimp / Klaviyo / Brevo.
- Instagram tiles → Instagram Graph API (or static curated set via ACF gallery).
- Lighthouse / Core Web Vitals pass — image optimization, font-display, deferred CDN scripts.
EtherLabZ is a small, opinionated digital studio. We design and build:
- Marketing & brand sites — fast, hand-crafted, conversion-focused.
- E-commerce — Shopify, WooCommerce, custom storefronts.
- Web apps & MVPs — modern stacks, shipped quickly.
- Brand & UI/UX design — visual identity through to production-ready interfaces.
This repo is a design sample. If you'd like something similar — a custom landing page, a WordPress build, or a full e-commerce site — reach out:
We work with brands that care about details.
Design samples in this repository are © EtherLabZ and shared for portfolio / demonstration purposes only. Imagery and brand name "Lavana" are illustrative and not for commercial reuse.