Mori Matcha - Tea House HTML Template

Mori Matcha is a responsive HTML, CSS, and vanilla JavaScript template created for contemporary tea houses, matcha bars, milk tea shops, bubble tea businesses, and independent beverage brands. The template includes eight website pages, complete documentation, a filterable drink menu, tea origin and preparation content, multiple location layouts, an accessible interactive drink builder with live summary and illustrative pricing, a contact form demonstration, optimized WebP images, source PNG files, and CafeOrCoffeeShop structured data. It is framework-free and requires no jQuery, database, package manager, compiler, or build command. Buyers can open the files directly, edit the sample drinks and prices, customize the visual system through CSS variables, and publish the website using any static hosting provider. Important: The drink builder is an interface demonstration and does not place orders, process payments, check inventory, or store customer information. The contact form also requires a backend or form service before it can transmit submissions.

Features

8 complete website pages plus documentationResponsive mobile, tablet, and desktop layoutsInteractive Build Your Drink demonstrationLive drink summary and illustrative price updatesFilterable matcha, tea, milk tea, and seasonal drink menuTea collection and preparation guideMultiple location layouts with external map linksFront-end contact and wholesale enquiry formAccessible navigation, filters, forms, and builder controlsVisible keyboard focus and reduced-motion supportCafeOrCoffeeShop structured dataCSS custom properties for easy customizationOptimized WebP images and source PNG filesOrganized HTML, CSS, and vanilla JavaScriptNo framework, jQuery, database, or build process

Requirements

A modern web browserA code editor for customizationAn internet connection for the included Google Fonts, or locally hosted replacement fontsStatic web hosting for publishing the completed websiteOptional: a backend or third-party form service for real contact submissions

Instructions

Extract the ZIP file and open index.html in a modern browser. No installation command or build process is required. Read README.md or documentation/index.html for the complete file structure, drink customization, builder options, image replacement, form integration, deployment, credits, licensing, and support information. Edit the HTML files to replace the sample business information, drinks, recipes, locations, and prices. Customize the visual system in assets/css/styles.css and edit the clearly organized builder data in assets/js/main.js when necessary.