https://github.com/shawaiz-khan/ecommerce-site-project
A simple mock e-commerce store built using HTML, CSS, JavaScript, and Bootstrap.
https://github.com/shawaiz-khan/ecommerce-site-project
bootstrap css eccomerce html js
Last synced: about 2 months ago
JSON representation
A simple mock e-commerce store built using HTML, CSS, JavaScript, and Bootstrap.
- Host: GitHub
- URL: https://github.com/shawaiz-khan/ecommerce-site-project
- Owner: shawaiz-khan
- License: mit
- Created: 2025-01-14T07:45:07.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-01-14T16:54:08.000Z (3 months ago)
- Last Synced: 2025-01-14T18:35:58.621Z (3 months ago)
- Topics: bootstrap, css, eccomerce, html, js
- Language: HTML
- Homepage:
- Size: 670 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# EcoMart 🌿
EcoMart is a simple, user-friendly e-commerce website offering eco-friendly products. Our mission is to make sustainable living accessible and convenient for everyone. This project demonstrates how to build a modern, responsive web application using HTML, CSS, JavaScript, and Bootstrap.
---
## Features ✨
- **Dynamic Navbar & Footer:** Reusable and responsive components implemented with Bootstrap.
- **Featured Products Section:** Highlights selected products dynamically loaded from JavaScript.
- **Shop Page:** Displays all available products with responsive cards.
- **About Us Page:** A detailed, responsive layout introducing EcoMart's mission and values.
- **Sustainable Design:** Focused on simplicity, accessibility, and eco-friendly branding.
---
## Tech Stack 🛠️
- **Frontend:** HTML, CSS, JavaScript, Bootstrap
- **Icons:** Favicon and assets
- **Responsive Design:** Bootstrap's grid system and utility classes
---
## Folder Structure 📂
```plaintext
EcoMart/
│
├── assets/ # Images, icons, and other static assets
│ ├── icons/
│ ├── images/
│
├── bootstrap/ # Bootstrap CSS and JS files
│ ├── css/
│ ├── js/
│
├── css/ # Custom CSS styles
│ └── main.css
│
├── data/ # Product data in JavaScript
│ ├── featuredProducts.js
│ └── products.js
│
├── js/ # JavaScript functionality
│ └── index.js
│
├── pages/ # Individual website pages
│ ├── about.html
│ ├── contact.html
│ └── shop.html
│
├── index.html # Home page
└── README.md # Project documentation
```
---
## Installation 🛠️
1. Clone the repository:
```bash
git clone https://github.com/your-username/ecomart.git
cd ecomart
```
2. Open the project in your preferred code editor.
3. Launch the project in your browser by opening `index.html`.
---
## Usage 🚀
1. Navigate to different sections:
- **Home Page:** Features eco-friendly products.
- **Shop Page:** View all available products.
- **About Us Page:** Learn more about EcoMart’s story and mission.
- **Contact Page:** Reach out to EcoMart.
2. Modify products:
- Update `data/featuredProducts.js` and `data/products.js` to customize product details.
3. Customize styles:
- Modify `css/main.css` for additional styling or override Bootstrap classes.
---
## Contributing 🤝
Contributions are welcome! If you have ideas for improving this project, follow these steps:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-branch-name
```
3. Make your changes and commit them:
```bash
git commit -m "Added a feature"
```
4. Push to your branch:
```bash
git push origin feature-branch-name
```
5. Submit a pull request.
---
## License 📜
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
## Acknowledgments 🙌
- [Bootstrap](https://getbootstrap.com/) for responsive design and components.
- Inspiration and support from the global eco-friendly community.
---
## Author 💻
Created by **Shawaiz Khan**. Connect with me:
- [GitHub](https://github.com/shawaiz-khan)
- [LinkedIn](https://linkedin.com/in/bizshawaizkhan)
```