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 📂

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:

   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:

   git checkout -b feature-branch-name

3. Make your changes and commit them:

   git commit -m "Added a feature"

4. Push to your branch:

   git push origin feature-branch-name

5. Submit a pull request.

---

License 📜

This project is licensed under the MIT License. See the LICENSE file for details.

---

Acknowledgments 🙌

• Bootstrap for responsive design and components.
• Inspiration and support from the global eco-friendly community.

---

Author 💻

Created by Shawaiz Khan. Connect with me:

• GitHub
• LinkedIn