Maison — Free Fashion Brand & Lookbook Website Template
Maison is a single-page fashion template built around the seasonal lookbook, not the storefront chrome — an asymmetric look gallery, a scroll-snap "new in" row, and a full-bleed editorial hero do the selling. It pairs a high-contrast Bodoni Moda display face with the geometric Jost for UI, on a warm porcelain-and-espresso palette that reads like a house lookbook rather than a template. Every interaction is hand-written vanilla JavaScript with no jQuery, so it drops cleanly onto a strict-CSP host.
Features
- Full-bleed editorial hero with a running house marquee and layered display headline
- Asymmetric lookbook grid with live category filtering (Womenswear / Menswear / Accessories)
- Scroll-snap "new in" collection row with prev/next controls and hover quick-add
- Add-to-bag micro-interaction that updates the header cart count
- Editorial split section with a founder manifesto, signature and house stats
- Press / "as seen in" strip built from styled masthead wordmarks (no image logos to license)
- Shoppable Instagram-style grid with hover like-counts and a feed link
- Newsletter block with real front-end email validation and status messaging
- Fixed header that turns solid on scroll, plus a full-screen mobile overlay menu
- IntersectionObserver scroll-reveal, smooth in-page scrolling, and full prefers-reduced-motion support
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page)
- Responsive: Yes
- Style: Editorial high-fashion, whitespace-led, Didone + geometric-sans
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Maison really a single page?
Yes. It is a long-scroll landing page covering hero, lookbook, new arrivals, the house story, press, social feed and newsletter — everything a seasonal brand launch needs in one file. There is no separate secondary page to wire up.
Do I need a build step or npm?
No. Bootstrap's CSS and JS bundle are self-hosted in the template, fonts load from Google Fonts, and all behaviour lives in one plain `js/main.js`. Open `index.html` and it works.
Can I use it for a real online store?
It is a front-end brand and lookbook template, so the cart, add-to-bag and product links are demo interactions. Wire the product cards and the bag counter to your own commerce backend (Shopify, WooCommerce, a headless API) to sell.
How do I swap in my own collection?
Replace the images in `img/`, edit the copy directly in `index.html`, and adjust the palette by changing the CSS custom properties at the top of `css/style.css`. The lookbook filter reads each card's `data-cat` attribute, so new looks slot straight in.
