Meridian - Coffee HTML Template

Meridian — Coffee HTML Template

Meridian is a premium HTML template suite built for specialty coffee businesses — roasteries, cafes, mobile carts, bakeries, and subscription brands. Five distinct home page variants and eight inner pages, all sharing one carefully crafted warm editorial design system. Pure vanilla HTML, CSS, and JavaScript. No framework dependencies, no build step, no jQuery.

One license. Five businesses. Endless customization.

► VIEW LIVE DEMO   |   READ DOCUMENTATION

Five Home Page Variants

• 01 — Meridian (Roastery): Full e-commerce home with filterable bean catalogue, cart drawer, 4-step checkout, and wholesale inquiry modal. Perfect for direct-trade roasters and online coffee stores.
• 02 — Slow Bar (Cafe): Dark, moody, immersive home for specialty cafes. Includes reservation system with date pills, time slots, guest counter, team bio modals, and menu showcase.
• 03 — Wayfarer (Mobile Cart): Bright, energetic home for mobile coffee carts and pop-up vendors. Features weekly schedule, event booking system, and four event-type templates.
• 04 — Atelier (Bakery): Editorial coffee + bakery hybrid with daily bakes catalogue, pairing system, combo orders, and pickup-style checkout.
• 05 — Origin (Subscription): Conversion-focused subscription home with multi-step taste quiz, smart bean recommendation engine, three pricing tiers, and 3-step subscription checkout.

Eight Inner Pages — Complete Coverage

• About: Editorial brand story with drop cap, values grid, 5-stage timeline, team showcase, and press quotes.
• Contact: Working contact form with validation, three location cards with hours, stylized map placeholder, and wholesale CTA.
• Journal (Blog): Filterable blog list with category chips, featured post hero, and 9-article grid.
• Article (Single Post): Long-form layout with reading progress bar, drop cap, pull quotes, share buttons (clipboard works), author card, and related posts.
• Terms & Privacy: Combined legal page with tab switcher, sticky sidebar TOC, scroll-spy navigation, and anchor links.
• Account: Three states in one file — login, signup with password strength meter, and forgot password reset flow.
• 404: Themed not-found page with CSS-only animated coffee cup and suggested links.
• Coming Soon: Pre-launch landing with live countdown timer and email capture.

Demo-Functional User Interface

Unlike most HTML templates that ship with dead links and placeholder forms, Meridian’s interactive components actually work in the browser. Every flow is wired end-to-end with form validation, success states, and localStorage persistence where appropriate. Your buyer (or you) only needs to connect real backend endpoints — Stripe, Mailchimp, an auth provider — without rebuilding the front-end.

• Persistent cart with localStorage (Meridian, Atelier)
• 4-step checkout with payment method switcher (Meridian)
• 3-step subscription checkout with cadence pills & gift toggle (Origin)
• Reservation modal with interactive date and time selectors (Slow Bar)
• Event booking with four event-type templates (Wayfarer)
• Smart taste quiz with bean recommendation engine (Origin)
• Live search overlay (Cmd+K) across products, menu, events, beans
• Image lightbox with keyboard navigation
• Login, signup, and password reset flows with validation
• Filterable product catalogue with live result counts
• Reading progress bar on long-form articles
• Working countdown timer on coming-soon page

Design System

• Typography: Cormorant Garamond (display), Newsreader (body), JetBrains Mono (labels) — all from Google Fonts
• Palette: Warm editorial — espresso, cream, paper, terra cotta amber
• Aesthetic: Editorial-meets-luxury with italic accents, generous whitespace, and quiet confidence
• Icons: 100% inline SVG — no icon fonts, no external icon library
• Layout: CSS Grid + Flexbox with clamp() fluid sizing throughout

Technical Highlights

• Pure vanilla JavaScript — no jQuery, no React, no framework dependencies
• No build step required — open any HTML file directly in a browser
• Fully responsive — three breakpoints (desktop, tablet, mobile) tested on all major devices
• Accessibility-conscious — semantic HTML, ARIA roles, focus rings, skip links, prefers-reduced-motion support
• SEO-friendly — semantic markup, meta tags, Open Graph ready
• Performance optimized — lazy-loaded images, inline critical CSS, no external JS libraries
• Cross-browser — Chrome, Firefox, Safari, Edge (all current versions)
• Cross-linked — every page links to every other page through nav and footer

What You Get

• 13 fully responsive HTML pages
• Preview folder with Unsplash CDN URLs for instant browser preview
• Python script to download demo images (with multiple fallbacks)
• Comprehensive online documentation
• Image credits file (Unsplash License)
• Six months author support
• Free lifetime updates

Browser Support

Meridian works in all modern evergreen browsers — Chrome, Firefox, Safari, and Edge (current versions and recent past releases). Internet Explorer is not supported, as Meridian uses modern CSS features including CSS Grid, custom properties, clamp(), and aspect-ratio.

Image Credits

Demo images are sourced from Unsplash under the Unsplash License. They are not licensed for resale as part of this template — buyers must replace them with their own photography or properly licensed images for commercial use. See IMAGE-CREDITS.md in the package for individual photographer credits.

Support & Updates

Six months of author support is included with your purchase. Support covers bug fixes, technical questions, and clarifications on documented features. For more details, see the ThemeForest Item Support Policy.

This template is sold under the ThemeForest Regular License. Extended licenses available for SaaS, multi-end-user products, and reseller use.

Built by stillidea — premium HTML templates with editorial craft since 2018.