Trend Fashion 👗✨

• Live: https://trend-fashion.netlify.app/
• Built with: HTML, Bootstrap, Vanilla JavaScript

🔥 Project Overview

Trend Fashion is a responsive, frontend-only fashion website built using HTML, Bootstrap, and a bit of JavaScript. I designed this project using Bootstrap components and custom JS — featuring clean layouts, product cards, filters, and a carousel on the home page.

From the very beginning, I focused on a smooth UI/UX and built it with a simple yet elegant responsive grid system. It’s a perfect portfolio project that showcases frontend fundamentals and Bootstrap proficiency.

🎯 Key Features

• ✅ Responsive layout using Bootstrap grid (col-sm, col-md, col-lg)
• ✅ Home page carousel (Hero slider)
• ✅ Collection page with filter buttons (data-filter attribute) to show/hide product groups
• ✅ Special collection section made with cards to highlight items
• ✅ Latest Blog section — card grid layout
• ✅ About section — two-column layout (image + text)
• ✅ Popular of the year showcase
• ✅ Navbar + secondary top navbar (used two navbar components) — fully responsive
• ✅ Footer with quick links and social icons

✨ Tech Stack / Tools

• HTML5 — semantic markup
• Bootstrap 5 — layout, grid, responsive utilities, cards, navbar, buttons
• Vanilla JavaScript — small interactive bits (carousel init, filter buttons)
• Netlify — deployed live site

✍️ How I implemented important pieces

• Carousel: Bootstrap carousel with indicators and controls. Minor JS to pause/auto-play customization.
• Collection filters: Buttons have data-filter attributes and JS toggles classes (.d-none / show) to filter items without re-rendering.
• Cards & Grid: Used Bootstrap's card components + grid classes (col-sm-6 col-md-4 col-lg-3) to keep the layout fluid across devices.
• Two navbars: Implemented a slim top navbar for quick links and a main navbar below it. Collapses into a hamburger menu on mobile.

📸 Screenshots

🏠 Home Page

👗 Collection Section

📰 Blog Section

📰 Blog Section (2)

💸 Offer Section

👤 About Section

⚡ Footer

---

🚀 How to run locally

This is a static site — easy to run locally:

1. Clone the repo

git clone https://github.com/yourusername/trend-fashion.git
cd trend-fashion

2. Open index.html in your browser or run a simple static server

# then open http://localhost:8000

---

🙋 Contributions / Future improvements

• Add product detail pages and cart (use localStorage)
• Convert to a React app for component-driven architecture
• Add accessibility improvements and ARIA labels
• Add unit tests for JS components

---

📜 License

This project is open-source under the MIT License.
Feel free to use, modify, and distribute with attribution.

---

📫 Contact

• 💻 GitHub: prem2621
• 📧 Email: premkumar200326@gmail.com
• 🌐 Portfolio: https://prem2621.github.io/webfolio/

---