Planto. is a complete multi-page front-end project build for small nurcary and decoration purpose
The site follows one focused concept: small plants only, three plant families (Calathea, Desk greens/Pothos, Snake plants), sold purely as home & office decoration in gift-ready pots.
| Page | File | What's inside |
|---|---|---|
| 🏠 Home | index.html |
Hero, explore teaser cards, Décor Collection slider |
| ✨ Trendy Plants | trendy.html |
2 wide feature cards + care strip |
| 🛍️ Top Selling | shop.html |
6-product grid with type filters + live search |
| ⭐ Reviews | reviews.html |
6 customer reviews + post-your-own review form |
| ✉️ Contact | contact.html |
Studio info cards, contact form + FAQ accordion |
Every page shares the same sticky glass header (5-link nav, live search, cart badge) and footer.
- 📱 Fully responsive — desktop, tablet & mobile with hamburger menu
- 🛒 Cart badge that remembers you — count persists across pages via
localStorage - 🔍 Site-wide search — searching from any page jumps to the shop with results filtered (
shop.html?q=snake) - 🏷️ Type filter chips — All / Calathea / Desk / Snake on the shop page
- 🎠 Auto-playing sliders — hero mini-slider + Décor Collection slider with arrows, dots & counters
- ⭐ Instant review posting — your review appears on the page immediately (XSS-safe rendering)
- ✉️ Working demo forms — contact, newsletter & reviews with toast notifications
- ✨ Scroll-reveal animations — respects
prefers-reduced-motion - ♿ Accessible — semantic HTML, ARIA labels, keyboard-friendly, lazy-loaded images
planto-website/
├── index.html → home page
├── trendy.html → trendy plants page
├── shop.html → top-selling shop page
├── reviews.html → customer reviews page
├── contact.html → contact + FAQ page
├── css/
│ └── style.css → shared styles (design tokens, layout, responsive)
├── js/
│ └── main.js → shared script (sliders, cart, search, forms…)
├── images/ → 6 optimized plant photos (+ unused/ spares)
├── screenshots/ → screenshots used in this README
└── README.md → you are here