PlantPedia

PlantPedia is a simple and elegant website dedicated to bringing the beauty of plants into your life. Whether you are an avid gardener or just looking to add a bit of greenery to your home or office, PlantPedia provides a variety of plant products and useful information.

Description

PlantPedia is currently a front-end project developed with HTML, CSS, and JavaScript. The website provides:

• A Home Page showcasing the benefits of having plants and the vibrancy they bring to your space.
• An About Page providing information about the mission of PlantPedia.
• A Products Page featuring a variety of plants available for purchase.
• A Contact Us Page with contact information and a form to reach out.

The website aims to provide an engaging experience for users, with a user-friendly navigation menu and smooth scrolling to different sections.

Features

• Responsive Navigation Bar: The navigation bar provides links to the Home, About, Products, and Contact Us pages.
• Theme Toggle: Users can switch between light and dark themes for a personalized browsing experience.
• Product Listings: Highlights different plant products with images, descriptions, and prices.
• FAQ Section: Answers commonly asked questions about plant care and maintenance.
• Contact Form: A form for visitors to send messages or inquiries.
• Social Media Links: Icons linked to social media profiles for staying updated.
• Newsletter Subscription: Visitors can subscribe to the newsletter to receive updates.

Getting Started

Prerequisites

To run PlantPedia, you need a modern web browser that supports HTML5, CSS3, and JavaScript.

Installation

1. Clone the repository from GitHub:

   git clone https://github.com/rdwaynedehoedt/plant-ecom-website.git

2. Navigate to the project directory:

   cd plant-ecom-website

3. Open the index.html file in your browser to view the website.

Project Structure

plant-ecom-website/
├── assets/
│   ├── css/
│   │   └── styles.css
│   ├── img/
│   └── js/
│       └── main.js
├── Front-end/
│   ├── about.html
│   ├── products.html
│   └── contact.html
└── index.html

• index.html: Main landing page for the website.
• assets/css/styles.css: Contains the styles for the website.
• assets/js/main.js: JavaScript code for interactive elements, such as theme toggling.
• Front-end/: Additional pages for the website (About, Products, Contact).

Usage

PlantPedia can be used to:

• Browse a variety of plants with descriptions and prices.
• Learn about different plant care methods.
• Connect with PlantPedia via the contact form or social media links.

Future Plans

• Add Backend Functionality: Integrate a backend to enable purchasing and user authentication.
• User Accounts: Allow users to sign up, log in, and manage their orders.
• Cart System: Implement a shopping cart system to allow users to purchase multiple items.
• Enhanced Animations: Improve the UI with smoother animations and transitions.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request to help improve the website.

License

This project is licensed under the MIT License.

Contact

For more information, please contact Dwayne De Hoedt:

• Email: [email protected]
• Phone: +94 772186241