ShopEase - E-Commerce Website

A modern, responsive e-commerce website built with HTML5, CSS3, Bootstrap 5, and vanilla JavaScript. Features a clean UI with dark mode support, dynamic content loading, and mobile-first design.

Live Demo

https://rishi1508.github.io/ecommerce-website

Features

• Responsive design optimized for all screen sizes
• Dark/light mode toggle with localStorage persistence
• Dynamic section loading via Fetch API
• Image carousel with 8 featured banners
• Product catalog with hover animations
• Shop by category with interactive cards
• Shopping cart and checkout flow
• Product search functionality
• Scroll-to-top button with smooth scrolling
• SEO-optimized with Open Graph and Twitter Card meta tags
• Accessible markup with ARIA labels and semantic HTML

Tech Stack

• HTML5 — Semantic markup with accessibility best practices
• CSS3 — Custom properties, transitions, flexbox, dark mode
• Bootstrap 5.3 — Responsive grid and UI components
• JavaScript (ES6+) — Fetch API, localStorage, event delegation
• Font Awesome 5 — Icon library

Pages

Page	Description
Home	Hero carousel, categories, featured products, features
Products	Full product listing with ratings and prices
Categories	Browse products by category
Product Detail	Individual product view
Cart	Shopping cart management
Checkout	Order placement form
Order Confirmation	Post-purchase confirmation
Search	Product search
About	Company information
Contact	Contact form

Setup

1. Clone the repository:

   git clone https://github.com/rishi1508/ecommerce-website.git

2. Open index.html in your browser, or serve with any static file server:

   npx serve .

No build step or dependencies required.

Project Structure

├── index.html              # Main homepage
├── navbar.html             # Navigation component
├── footer.html             # Footer component
├── scrollToTop.html        # Scroll-to-top button
├── assets/
│   ├── css/styles.css      # Custom styles with CSS variables & dark mode
│   ├── script/
│   │   ├── loadSections.js # Fetch-based HTML section loader
│   │   └── script.js       # Dark mode toggle & scroll-to-top
│   └── images/             # Product, category, and carousel images
└── [page].html             # Individual page files

License

This project is open source and available for personal and educational use.