https://github.com/holedev/shopee
A responsive e-commerce website clone of Shopee built with HTML and CSS
https://github.com/holedev/shopee
Last synced: 4 months ago
JSON representation
A responsive e-commerce website clone of Shopee built with HTML and CSS
- Host: GitHub
- URL: https://github.com/holedev/shopee
- Owner: holedev
- Created: 2021-06-23T10:25:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-30T14:21:17.000Z (about 1 year ago)
- Last Synced: 2025-10-10T17:08:17.221Z (8 months ago)
- Language: HTML
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopee Clone
A responsive e-commerce website clone of Shopee built with HTML and CSS. This project replicates the core UI functionality and design of the Shopee e-commerce platform.
## Features
- 🛍️ Product Grid Layout
- Responsive product cards
- Product images, prices, and ratings
- Sale badges and discounts
- Favorite/Like functionality
- 🔍 Search & Navigation
- Search bar with history
- Category navigation
- Product filtering options
- Sorting by popularity, newest, bestselling
- Price range filtering
- Pagination
- 🛒 Shopping Cart
- Add/Remove products
- Quantity adjustment
- Cart notifications
- Empty cart state handling
- 👤 User Features
- Login/Register forms
- Social login options (Facebook, Google)
- User profile menu
- Notification center
- 📱 Mobile Integration
- QR code for app download
- App store links (iOS & Android)
- Mobile-first responsive design
## Tech Stack
- HTML5
- CSS3 (with Grid system)
- Font Awesome Icons
- Normalize.css
## Project Structure
```
.
├── index.html # Main HTML file
├── assets/
│ ├── css/
│ │ ├── base.css # Base styles and utilities
│ │ ├── grid.css # Grid system
│ │ └── main.css # Main component styles
│ └── img/
│ ├── Appstore.png # iOS app store image
│ ├── GGPlay.png # Google Play store image
│ ├── QR.png # QR code for app
│ └── no-cart.png # Empty cart image
```
## CSS Organization
- `base.css`: Contains base styles, variables, and utility classes
- `grid.css`: Implements the responsive grid system
- `main.css`: Contains component-specific styles
## Grid System
The project uses a custom grid system with the following breakpoints:
- Mobile: Default
- Tablet: 740px -> 1023px
- PC: 1024px+
## Running the Project
1. Clone the repository
2. Open `index.html` in your browser
3. No build process or dependencies required
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)