A modern, elegant e-commerce website for premium home furnishings and décor. Built with vanilla JavaScript, HTML5, and CSS3 with smooth animations and dark mode support.
Maison is a fully-functional e-commerce platform specializing in curated home living products. The site features a sophisticated design with multiple product collections, an interactive shopping cart, and a seamless user experience across devices.
- 30+ Curated Products across 7 collections
- Product Categories: New In, Living, Bedroom, Kitchen, Lighting, Outdoor, Office
- Product details with pricing, descriptions, and availability tags
- Sale, New, and Bestseller product indicators
- Dynamic Cart System - Add/remove items with real-time updates
- Product Collections - Browse by category with filter system
- Responsive Design - Mobile-first approach with hamburger navigation
- Product Pages - Detailed product views with related items
- Dark Mode Toggle - Seamless light/dark theme switching
- Smooth Animations - GSAP-powered scroll triggers and transitions
- Modern Typography - Premium fonts (Playfair Display & DM Sans)
- Icon-Based Navigation - Search, cart, and account buttons
- Header Navigation - Quick access to all product collections
- Mobile Drawer Menu - Slide-up menu for mobile devices
- Collection Links - Direct links to category pages with query parameters
ecommers/
├── index.html # Home page with hero and featured products
├── collection.html # Collection/category page template
├── product.html # Individual product detail page
├── app.js # Product data and cart system logic
├── style.css # Styles with CSS variables for theming
└── README.md # Project documentation
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Animations: GSAP (GreenSock Animation Platform) with ScrollTrigger plugin
- Fonts: Google Fonts (Playfair Display, DM Sans)
- Icons: Custom SVG icons
- Responsive: CSS Media Queries & Container Queries
| Collection | Description | Products |
|---|---|---|
| New In | Latest arrivals | 8 items |
| Living | Living room furniture & décor | 6 items |
| Bedroom | Bedding & bedroom furniture | 5 items |
| Kitchen | Kitchen essentials & cookware | 7 items |
| Lighting | Lamps & light fixtures | 4 items |
| Outdoor | Garden & outdoor furniture | 5 items |
| Office | Workspace & office furniture | 4 items |
- Primary: #1a1a1a (Dark text)
- Background: #fff (White)
- Secondary Background: #fafaf8 (Off-white)
- Accent: #333 (Secondary text)
- Automatically adjusts all colors for comfortable viewing
- Maintains contrast and readability
- Toggle button in header
- Mobile-first design
- Tablet and desktop optimizations
- Mobile drawer navigation on smaller screens
- Clone/Download the project files
- Open
index.htmlin a web browser - Browse products and explore collections
- Add items to cart for testing
This is a static site with no build steps. Simply open HTML files in a browser.
- Add to Cart - Each product can be added to cart
- Cart Badge - Shows item count in header
- Persistent Storage - Cart data can be saved to localStorage (if implemented)
- Real-time Updates - Instant UI feedback on cart changes
- Home:
index.html - Collection Pages:
collection.html?col=[collection-name]- Examples:
collection.html?col=new-in,collection.html?col=bedroom
- Examples:
- Product Details:
product.html?id=[product-id]
Complete product database with:
- Product ID, name, emoji icon
- Pricing (current and sale prices)
- Descriptions and tags
- Collection associations
Organized product groupings with:
- Collection name
- Item count
- Associated product IDs
- Add/remove items
- Update quantities
- Calculate totals
- Real-time cart badge updates
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Theme Toggle - Light/Dark mode
- Search - Link to search functionality
- Cart - Shopping cart view
- Account - User login/profile
- All products use emoji icons for visual representation
- Prices are in USD
- All product data is stored in
app.js - Animations use GSAP ScrollTrigger for performance
- CSS variables enable easy theme customization
- Product search functionality
- User authentication system
- Payment integration
- Product reviews and ratings
- Wishlist feature
- Advanced filtering and sorting
- Product inventory management
- Email notifications
This project is available for personal and commercial use.
Created by: Dhruv
Last Updated: 2026