Habitat — Free Interior Design & Furniture Studio Website Template
Habitat trades the tired cream-and-terracotta look for a deeper, more tactile identity — deep loden green, brushed brass and a warm putty canvas, set in an editorial Cormorant Garamond / Hanken Grotesk pairing. It's a complete single-page studio site with a room-filterable portfolio, a made-to-order furniture row, a four-step process and a working contact flow, all built on Bootstrap 5 with zero jQuery.
Features
- Room-filterable portfolio grid (Living, Kitchen, Bedroom, Bath, Workspace) driven by lightweight vanilla JS
- Signature full-bleed hero with a transparent-to-solid sticky header that switches on scroll
- Horizontal scroll-snap furniture collection with priced product cards and arrow controls
- Auto-rotating testimonial slider with dots, prev/next and hover-pause (respects reduced motion)
- Four-step process section, services grid with hand-drawn inline SVG icons, and a designer/about split
- Front-end-validated enquiry form with project-type and budget selects, plus inline field errors
- Scroll-reveal animations via IntersectionObserver, all gated behind prefers-reduced-motion
- Accessible by default: skip link, semantic landmarks, aria labels, visible focus-visible styles, alt text on every image
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Warm architectural — loden green, brass and putty with an editorial serif
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 Habitat really free to use commercially?
Yes. Use it for personal and client projects, including commercial work. An attribution link back to uiCookies is appreciated but not required.
Does it use jQuery or any icon fonts?
No. Every interaction — mobile nav, portfolio filter, testimonial slider, furniture scroller and form validation — is hand-written vanilla JavaScript, and all icons are inline SVG. The only dependency is the self-hosted Bootstrap 5 bundle, so it deploys cleanly on strict-CSP hosts.
How do I swap in my own projects and furniture?
Each portfolio card is an `<article class="project">` with a `data-category` attribute that feeds the filter — duplicate a card, drop in your image and set its category. Furniture cards work the same way inside the scroll-snap track. Replace the images in `/img` with your own at similar aspect ratios.
Can I change the colour palette?
All colours live as CSS custom properties at the top of `css/style.css` (`–loden`, `–brass`, `–putty`, `–ink` and friends). Change those handful of values and the whole site re-tones — buttons, accents, dark sections and the footer included.
