HTML5 CSS3 JavaScript RemixIcon
A beautiful and responsive website for an online plant store built with modern web technologies.
Features β’ Installation β’ Usage β’ Structure
Greenery is a modern, fully responsive online plant store website that provides users with a seamless shopping experience. Whether you're a seasoned gardener or just starting out, Greenery offers a curated collection of plants with detailed information and easy ordering process.
- β Responsive Design - Works seamlessly across all devices (desktop, tablet, mobile)
- π Dark/Light Theme Toggle - Users can switch between dark and light modes
- π§ Interactive Navigation - Smooth scrolling and mobile-friendly menu
- ποΈ Product Showcase - Display of various plants with prices and add-to-cart functionality
- β FAQ Section - Accordion-style frequently asked questions
- π§ Contact Form - Easy way for customers to reach out
- π¬ Newsletter Subscription - Keep customers updated with latest offers
- β¨ Scroll Reveal Animations - Smooth entrance animations for better UX
- π Social Media Integration - Links to social media platforms
HTML5
HTML5
Structure & Content CSS3
CSS3
Styling & Animations JavaScript
JavaScript
Interactive Functionality Git
Git
Version Control
HTML5
Structure & Content CSS3
CSS3
Styling & Animations JavaScript
JavaScript
Interactive Functionality Git
Git
Version Control
- RemixIcon - Beautiful icon library for UI elements
- ScrollReveal.js - JavaScript library for scroll animations
- Google Fonts - Typography enhancement
Greenery/
β
βββ π index.html # Main HTML file
β
βββ π images/ # Image assets folder
β βββ favicon.png
β βββ home.png
β βββ about.jpg
β βββ product1.png
β βββ product2.png
β βββ product3.png
β βββ product4.png
β βββ product5.png
β βββ product6.png
β βββ card1.png
β βββ card2.png
β βββ card3.png
β βββ card4.png
β
βββ π src/ # Source files folder
βββ styles.css # Main CSS file
βββ main.js # Main JavaScript file
βββ scrollreveal.min.js # ScrollReveal library
-
Clone the repository
git clone https://github.com/akashasahu07/Greenery.git
-
Navigate to the project directory
cd Greenery -
Open in browser
- Simply double-click
index.htmlor - Use a local development server
- Simply double-click
- Open the
index.htmlfile in any modern web browser - Navigate through different sections using the navigation menu
- Toggle between dark and light themes using the moon/sun icon
- Browse products and click the shopping bag icon to add items
- Fill out the contact form to reach out to the team
- Subscribe to the newsletter for updates
| Section | Description |
|---|---|
| π Home | Landing section with hero image and call-to-action |
| iοΈ About | Why choose Greenery - benefits and guarantees |
| π Steps | Three-step process to start your plant collection |
| π Products | Showcase of available plants with prices |
| β FAQs | Accordion-style frequently asked questions |
| π Contact | Contact form and information |
| π§ Footer | Newsletter, address, social links, and payment methods |
- π΅ Cacti Plant - 10γγ«.99
- π΅ Cactus Plant - 11γγ«.99
- πΏ Aloe Vera Plant - 7γγ«.99
- πͺ΄ Succulent Plant - 5γγ«.99 - 9γγ«.99
- π± Green Plant - 8γγ«.99
- π± Phone: +91-98765-43210
- π§ Email: greenery@example.com
- π Location: Berhampur, Ganjam, Odisha, India
This project is open source and available under the MIT License.
Made with π by Flashβ‘Code
β Star this repo if you like it!