Implemented in pure HTML/CSS/JavaScript, with no framework and no build step; open index.html to browse
HTMLE-commerce
colourbloom — HTML Ecommerce Template
By eramfatima971
ColourBloom is a beauty e-commerce static site template built with pure HTML, CSS and JavaScript. It includes 8 pages, 21 product records, and localStorage-based cart, wishlist, orders and login state, and runs without a backend.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Includes 8 pages: home, product listing, detail, cart, checkout, login/registration, wishlist and dashboard
Built-in data for 21 products across 7 categories, with filtering by category, price, brand and star rating
Cart, wishlist, orders and login state persist via localStorage, with no backend required
Glassmorphism interface with dark/light theme switching, with the theme preference saved locally
Mobile-first responsive layout with breakpoints at 1024px, 768px and 480px and hamburger navigation
Template Details
ColourBloom is a static e-commerce website template for beauty and cosmetics scenarios, written in HTML, CSS and vanilla JavaScript, with no front-end framework or build tool dependencies. The template provides 8 pages: home, product listing, product detail, cart, checkout, login/registration, wishlist and user dashboard. Product data is centralized in js/data.js and contains 21 products across 7 categories: makeup, skincare, haircare, fragrance, bath and body, tools, and men's care, with filters for category, price range, brand and star rating.
Interaction state is managed centrally by js/store.js. The cart, wishlist, order records and login information are all stored in the browser's localStorage, so data exists only in the current browser; it is not retained after clearing site data or switching devices, and there is no real payment, inventory validation or server-side account capability. The checkout page provides a shipping form and payment method selection (Card, UPI, COD); this is a front-end simulation and does not actually charge.
The interface uses a glassmorphism style with backdrop-filter blur effects and supports dark/light theme switching, with the theme preference also written to localStorage. The home page includes an autoplaying carousel, scroll-triggered animations and a marquee banner. The layout is mobile-first, with breakpoints at 1024px, 768px and 480px, and a hamburger menu on mobile. The template includes 5 home page carousel images and 21 product images; licenses for third-party assets such as images and fonts must be checked separately.
HTMLE-commerce
Is it right for your project?
Use Cases
- As a learning and reference project for a static e-commerce front end in the beauty or cosmetics category
- To demonstrate front-end interaction flows for product browsing, add-to-cart, wishlist and checkout without a backend
- For page structure and styling reference in coursework, personal portfolios or front-end practice
- As a front-end starting point for further integration with a real backend API or payment service
Suitable For
- Front-end beginners who want to learn vanilla JavaScript state management and localStorage usage
- Designers or independent developers who need a static page prototype for a beauty e-commerce site
- Developers looking for an e-commerce template with no build step that can be deployed directly to static hosting
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, double-click index.html to open it in a browser; Node.js or a build step is not required
- 2
You can also use the VS Code Live Server extension to open index.html for local preview
- 3
Product data is located in js/data.js; product entries can be replaced, added or removed using the same structure
- 4
Cart, wishlist, orders and login information are stored in browser localStorage; clearing site data will lose them
- 5
The checkout flow is a front-end simulation and does not actually charge; third-party assets such as images and fonts must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments or AI may incur separate charges.
- Cart, wishlist, orders and login state are all stored in browser localStorage; data exists only in the current browser and is not retained after clearing site data or switching devices.
- The project has no backend; all data and interactions are implemented on the front end and it does not have real payment, inventory validation or server-side account capabilities.
- The checkout flow is only a front-end simulation; it provides a shipping form and payment method selection but does not actually charge or process real payments.
- Product data consists of 21 built-in sample records in js/data.js and is not real sellable products or live inventory.
- The footer contains a signature watermark by the author Eram Fatima; when using the template, note that this attribution element must be retained or handled.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
**100% localStorage** — Cart, wishlist, orders, and auth all persist client-side
Original README
**No backend required** — Open `index.html` and it just works
Original README
**Checkout Flow** — Shipping form + payment method selection (Card, UPI, COD)
Original README
**Product Catalogue** — 21 real products across 7 categories (Makeup, Skincare, Haircare, Fragrance, Bath & Body, Tools, Men's)
Original README
https://github.com/eramfatima971/colourbloom/blob/main/LICENSEhttps://github.com/eramfatima971/colourbloom/blob/main/README.md**Watermark** — Subtle *Eram Fatima* signature at 5% opacity in footer sections
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 80 / 100
- Technologies
- HTML
- Website type
- E-commerce
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-06-07
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: efc968bd9c981e7f82229ee7a1d6294ac10990c08aefb1a138c6e8ee8190a290
2026-10-13T09:03:37.688Z
Source file / repository<div align="center">
# 🌸 ColourBloom
### *A Premium Beauty & Cosmetics E-Commerce Experience*
[](https://developer.mozilla.org/docs/Web/HTML)
[](https://developer.mozilla.org/docs/Web/CSS)
[](https://developer.mozilla.org/docs/Web/JavaScript)
[](https://eramfatima971.github.io/colourbloom/)
[](LICENSE)
**[🔗 Live Demo →](https://eramfatima971.github.io/colourbloom/)**
*A fully-responsive, zero-dependency static beauty e-commerce website built with pure HTML, CSS, and vanilla JavaScript. Features glassmorphism UI, a dark/light theme toggle, shopping cart, wishlist, simulated checkout, and 21 real product images — all without a backend.*
</div>
---
## 📸 Preview
> ✨ Visit the **[live demo](https://eramfatima971.github.io/colourbloom/)** to explore all 8 pages!
---
## ✨ Features
### 🛍️ Shopping Experience
- **Product Catalogue** — 21 real products across 7 categories (Makeup, Skincare, Haircare, Fragrance, Bath & Body, Tools, Men's)
- **Advanced Filtering** — Filter by category, price range, brand, and star rating
- **Product Detail Page** — Image gallery, description, trust badges, and related products
- **Shopping Cart** — Add/remove items, update quantities, real-time price calculation
- **Wishlist** — Save favourites, move to cart with one click
- **Checkout Flow** — Shipping form + payment method selection (Card, UPI, COD)
- **Order Tracking** — Dashboard with order history and status badges
### 🎨 Design & UI
- **Glassmorphism** — Frosted glass cards, navbar, and forms with `backdrop-filter: blur()`
- **Dark / Light Theme** — Persistent toggle with zero flash on load (saved to `localStorage`)
- **Hero Slider** — Auto-playing carousel with clickable thumbnails (5 real photos)
- **Scroll Animations** — Intersection Observer–powered fade-in-up effects
- **Marquee Banner** — Infinite-scroll promotional ticker
- **Micro-animations** — Hover states, card lifts, button transforms throughout
- **Watermark** — Subtle *Eram Fatima* signature at 5% opacity in footer sections
### 🔐 Auth & Data
- **Register / Login** — Tabbed auth card with full form validation
- **User Dashboard** — Profile editing, stats (orders, wishlist, spent), order history
- **100% localStorage** — Cart, wishlist, orders, and auth all persist client-side
- **No backend required** — Open `index.html` and it just works
### 📱 Responsive
- Mobile-first layout with hamburger nav and slide-out menu
- CSS Grid breakpoints at 1024px, 768px, and 480px
- Touch-friendly tap targets and swipe-friendly hero
---
## 🎨 Design System
### Colour Palette
| Token | Hex | Role |
|-------|-----|------|
| Powder Blue | `#BFD7EA` | Accents, borders, badges |
| Butter Yellow | `#FCE38A` | Stars, highlights, gradients |
| Blush Pink | `#F8C8DC` | Primary brand colour |
| Deep Pink | `#d870a8` | Buttons, active states, prices |
| Dark Blue | `#7BAAC8` | Brand accent, labels |
### Typography
| Role | Font | Weight |
|------|------|--------|
| Headings | [Outfit](https://fonts.google.com/specimen/Outfit) | 800–900 |
| Body | [Quicksand](https://fonts.google.com/specimen/Quicksand) | 400–700 |
| Accent / Italic | [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) | 700 italic |
---
## 📁 Project Structure
```
colourbloom/
│
├── index.html # Homepage — hero slider, marquee, categories, featured, reviews
├── products.html # Shop — filter sidebar, search bar, product grid
├── product.html # Product detail — gallery, description, reviews, add-to-cart
├── cart.html # Cart — items, qty controls, promo code, order summary
├── checkout.html # Checkout — shipping form, payment method, order confirm
├── login.html # Auth — tabbed register/login with validation
├── wishlist.html # Wishlist — saved items, add-to-cart, remove
├── dashboard.html # User — profile editor, stats, order history
│
├── css/
│ └── style.css # ~850 lines — full design system
│ # • CSS custom properties (light + dark themes)
│ # • Glassmorphism utilities
│ # • Component styles (cards, buttons, forms, navbar…)
│ # • Animations & keyframes
│ # • Responsive breakpoints
│
├── js/
│ ├── data.js # Product catalogue (21 products), categories, seed reviews
│ ├── store.js # localStorage state — cart, wishlist, orders, auth
│ └── main.js # Shared navbar/footer builder, theme toggle,
│ # hero slider, animations, helpers
│
└── images/
├── hero/ # 5 hero carousel photos
│ ├── hero1.jpg … hero5.jpg
└── products/ # 21 product photos
├── lipstick.jpg
├── highlighter-palette.jpg
├── foundation.jpg
├── serum-skincare.jpg
├── perfume.jpg
├── brush-set.jpg
├── kohl-kajal.jpg
├── mascara.jpg
├── contour-blush.jpg
├── moisturiser.jpg
├── vitamin-c-toner.jpg
├── night-cream.jpg
├── sunscreen.jpg
├── argan-hair-serum.jpg
├── keratin-shampoo.jpg
├── hair-mask.jpg
├── midnight-oud.jpg
├── lavender-lotion.jpg
├── rose-sugar-scrub.jpg
├── jade-roller.jpg
└── mens-facewash.jpg
```
---
## 🚀 Getting Started
### Option 1 — Open Directly *(fastest)*
```bash
git clone https://github.com/eramfatima971/colourbloom.git
# Then double-click index.html in File Explorer
```
### Option 2 — VS Code Live Server
```bash
git clone https://github.com/eramfatima971/colourbloom.git
code colourbloom
# Install "Live Server" extension → Right-click index.html → Open with Live Server
```
**Requirements:** Any modern browser (Chrome 88+, Firefox 87+, Edge 88+, Safari 14+)
No Node.js, no build step, no server — it's pure HTML/CSS/JS.
---
## 🛠️ Technical Highlights
| Aspect | Implementation |
|--------|----------------|
| **State Management** | `localStorage` with a `Store` singleton (`store.js`) |
| **Theming** | CSS custom properties + `[data-theme="dark"]` attribute on `<html>` |
| **No-FOUC Dark Mode** | IIFE at top of `main.js` applies theme before first paint |
| **Component System** | `buildNav()` / `buildFooter()` inject shared HTML from `main.js` |
| **Product Data** | Central `CB` object in `data.js` with helper methods |
| **Animations** | `IntersectionObserver` triggers `[data-animate]` elements |
| **Hero Slider** | Vanilla JS with crossfade transition and 4-second autoplay |
| **Glassmorphism** | `backdrop-filter: blur(20px)` + semi-transparent `rgba` backgrounds |
| **Responsive** | CSS Grid + Flexbox, 3 breakpoints (1024 / 768 / 480px) |
---
## 📦 Product Categories
| # | Category | Products |
|---|----------|----------|
| 1 | 💄 Makeup | Lipstick, Highlighter, Foundation, Kajal, Mascara, Contour & Blush |
| 2 | 🌿 Skincare | Face Serum, Moisturiser, Toner, Night Cream, Sunscreen |
| 3 | 💇 Haircare | Argan Oil Serum, Keratin Shampoo, Hair Mask |
| 4 | 🌸 Fragrance | Rose Petal EDP, Midnight Oud |
| 5 | 🛁 Bath & Body | Lavender Body Lotion, Rose Sugar Scrub |
| 6 | 🪄 Tools | Rose Gold Brush Set, Jade Roller & Gua Sha |
| 7 | 👨 Men's | Charcoal Face Wash |
---
## 📄 License
This project is licensed under the [MIT License](LICENSE) — feel free to use, modify, and share.
---
<div align="center">
**Made with 🌸 by [Eram Fatima](https://github.com/eramfatima971)**
*Beauty in Every Shade ✦*
⭐ If you like this project, please give it a star!
</div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
uikit-ecommerce-template
A responsive e-commerce front-end template built with UIkit, covering product catalog, filtering, product detail pages, and shopping cart. Written in Pug and Less, built with Gulp.
HTML · E-commerce
Shop Homepage
A clean Bootstrap store homepage skeleton for product listings, category displays, and small online store prototypes. It uses a responsive product grid, ships with a directly editable dist directory, and includes Pug and SCSS source with npm build and live preview support.
HTML · E-commerce
ludus-free-premium-ecommerce-template
Ludus is a pure HTML multipurpose e-commerce template under the MIT license, with 40+ pages including 3 homepages, 12 dashboard pages, 7 shop pages, and 5 blog pages, plus 3 header styles, a boxed layout, and 10 color schemes.
HTML · Admin dashboard
shoe_store
A shoe eCommerce website template built with HTML, CSS, and JavaScript, featuring a home page with banner, featured categories, and rated products, plus all-products, product detail, cart, and account pages.
HTML · E-commerce
LeatherHoard
LeatherHoard is a static e-commerce front-end template for leather goods, built with HTML, CSS, JavaScript, and Bootstrap.
HTML · E-commerce
vex-bootstrap
Vex is a clean, multipurpose e-commerce HTML template based on Bootstrap 4.5 and jQuery, released by Themefisher.
HTML · E-commerce