A premium Pakistani ladies fashion e-commerce website built with pure HTML, Tailwind CSS & Vanilla JavaScript.
🕐 Screenshots will be added soon. To preview the project, visit the live demo link above or clone the repository and open
index.htmllocally.
| Page | File | Description |
|---|---|---|
| 🏠 Homepage | index.html |
Hero banner, collections grid, product listings |
| 🛍️ Product Catalog | products.html |
Full catalog with category filters |
| 👗 Product Detail | product-detail.html |
Individual product view with cart & WhatsApp |
| 🧾 Order Dashboard | order.html |
Cart review, order history, WhatsApp checkout |
| 💛 About | about.html |
Brand story, founder's message, stats |
| 📞 Contact | contact.html |
Contact form, WhatsApp card, FAQ |
| 🔄 Returns | return.html |
Returns & exchange policy |
- Dark Luxury Theme — Premium black & gold design language throughout every page
- Fully Responsive — Optimised for desktop, tablet, and mobile screens
- Product Catalog — 27+ products across Casual, Formal, Party Wear & Bridal categories
- Dynamic Filtering — Filter products by category with no page reload
- Product Detail Pages — URL-based routing (
?id=lawn1) with dynamic content rendering - Shopping Cart — Persistent cart using
localStorageshared across all pages - WhatsApp Checkout — One-click order confirmation via WhatsApp with full order summary
- Order History Dashboard — Auto-saved order history with unique IDs (
#LBS-2026-001) and status badges - Sticky Cart & Header — Smooth header scroll behaviour with cart item badge
- Accordion UI — Animated accordion sections on Returns and FAQ pages
- Contact Form — Validated form that forwards enquiries directly to WhatsApp
- Brand Story / About Page — Scroll-reveal animations, founder's message, stats strip
- Returns Policy Page — Structured 5-section accordion policy with visual process timeline
- Auth Modal — Login / Sign Up modal with smooth transitions
- Search Overlay — Full-width animated search bar
- Mobile Hamburger Menu — Full-screen animated mobile navigation
- Announcement Ticker — Scrolling promotional banner
- Scroll Reveal Animations — IntersectionObserver-powered reveal on all pages
- PKR Pricing — All prices displayed in Pakistani Rupees
| File | Description |
|---|---|
index.html |
Homepage — hero banner, collections, product grid, testimonials |
products.html |
Full product catalog with sticky filter bar (27 products) |
product-detail.html |
Dynamic product detail — URL-param driven (?id=...) |
order.html |
Order dashboard — cart, history, WhatsApp checkout |
about.html |
Brand story, philosophy, founder's message, stats |
contact.html |
Contact form, WhatsApp card, social links, FAQ |
return.html |
Returns & Exchange Policy with accordion sections |
| Technology | Usage |
|---|---|
| HTML5 | Semantic page structure |
| Tailwind CSS (CDN) | Utility-first styling |
| Custom CSS | CSS Variables, animations, accordion logic |
| Vanilla JavaScript | Cart, modals, routing, WhatsApp integration |
| localStorage | Persistent cart & order history across pages |
| Google Fonts | Playfair Display, Montserrat, Great Vibes |
| Font Awesome 6 | Icon library |
libaas-studio/
│
├── index.html # Homepage
├── products.html # Product catalog
├── product-detail.html # Product detail (dynamic)
├── order.html # Order dashboard & checkout
├── about.html # Brand story
├── contact.html # Contact & FAQ
├── return.html # Returns policy
├── README.md # This file
│
└── image/ # All product & UI images
├── githubbanner.jpg # GitHub README banner
├── banner-d.jpg # Desktop hero banner
├── banner-r.jpg # Mobile hero banner
├── favicon.jpg
├── newarrival1-5.jpg # Collection grid images
├── lawn1-9.jpg # Casual/Lawn product images
├── formal1-6.jpg # Formal product images
├── party1-6.jpg # Party wear product images
└── bridal1-6.jpg # Bridal product images
No build tools or dependencies required — this is a pure static site.
git clone https://github.com/CodeWithAliyan/libaas-studio.gitcd libaas-studioPlace all product images inside the /image folder following the naming convention in the structure above.
Simply open index.html in any modern browser:
# macOS
open index.html
# Windows
start index.html
# Or use VS Code's Live Server extension for best resultsBefore going live, update these values across all HTML files:
| What to change | Where to find it | Example |
|---|---|---|
| WhatsApp number | const WA_NUMBER = '923700256087' |
Replace with your number |
| Business email | connect.aliyansaleem@gmail.com |
Your actual email |
| Store address | Address block in contact.html |
Your real address |
| Social media links | Footer & contact page href values |
Your profile URLs |
| Product prices | Product data arrays in each HTML file | Your actual pricing |
- Push this repository to GitHub
- Go to Settings → Pages
- Set source to main branch / root
- Your site will be live at:
https://yourusername.github.io/libaas-studio/
--dark: #111111 /* Page background */
--dark-card: #181818 /* Card backgrounds */
--dark-border: #222222 /* Borders & dividers */
--gold: #c9a96e /* Primary accent */
--gold-light: #e1c99a /* Hover/lighter gold */
--off-white: #f5f0eb /* Body text */
--text-muted: #888888 /* Secondary text */Fonts: Playfair Display (headings) · Montserrat (body) · Great Vibes (script accents)
This project is licensed under the MIT License — see the LICENSE file for details.
MIT License
Copyright (c) 2024 Libaas Studio
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Made with ❤️ for Libaas Studio — Karachi, Pakistan
⭐ Star this repo if you found it helpful!