Skip to content

Devasurya-26/Zafran-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

███████╗ █████╗ ███████╗██████╗  █████╗ ███╗   ██╗
╚══███╔╝██╔══██╗██╔════╝██╔══██╗██╔══██╗████╗  ██║
  ███╔╝ ███████║█████╗  ██████╔╝███████║██╔██╗ ██║
 ███╔╝  ██╔══██║██╔══╝  ██╔══██╗██╔══██║██║╚██╗██║
███████╗██║  ██║██║     ██║  ██║██║  ██║██║ ╚████║
╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝

✦ Premium Men's Fashion — E-Commerce Experience ✦

HTML5 CSS3 JavaScript Live on Render


"Where modern streetwear meets timeless Indian elegance."


🌐 Live Demo  ·  📂 Repository  ·  🐛 Report Bug  ·  ✨ Request Feature



✦ Overview

ZAFRAN is a fully functional, single-page men's fashion e-commerce storefront — built with pure HTML, CSS & Vanilla JavaScript. Zero frameworks. Zero dependencies. One file. Fully deployed.

It delivers a complete shopping experience: browse 6 curated fashion categories, filter across 62+ products, manage a live cart, wishlist favourites, and place orders — all inside a single index.html.


✦ Live Preview

🌐 https://zafran-mens-fashion-hub.onrender.com/


✦ Features

🎨 Design & UI

  • Custom animated cursor with smooth lag effect
  • Brand loader with animated progress bar
  • Scroll-triggered reveal animations
  • Floating hero stat pills
  • Infinite ticker marquee banner
  • Fully responsive — mobile to desktop

🛒 Shopping Experience

  • 6 main categories with interactive sub-category panel
  • 62+ products with HD images & Indian market pricing
  • Filter tabs — Casual, Ethnic, Formal, Winter, Active
  • Wishlist with badge counter
  • Cart sidebar — add, remove, quantity control
  • Checkout modal with order confirmation

🔍 Discovery

  • Full-text search overlay
  • Quick-add to cart from search results
  • Color variant selector per product
  • Sale / New / Best Seller tags
  • Sub-category chip filters per collection

⚡ Performance

  • Pure Vanilla JS — zero React, zero Vue, zero jQuery
  • Single HTML file — instant load
  • Lazy-loaded product images via Unsplash CDN
  • CSS custom properties for instant theming
  • IntersectionObserver for scroll animations

✦ Category Structure

ZAFRAN/
├── 👕  Casual Wear      →  T-Shirts · Oversized · Polo · Shirts · Co-ords · Henleys · Tanks
├── 👖  Bottom Wear      →  Jeans · Baggy · Cargos · Joggers · Chinos · Trousers · Shorts
├── 🪡  Ethnic Wear      →  Kurtas · Sherwanis · Nehru Jackets · Dhotis · Ethnic Jackets
├── 🧥  Winter Wear      →  Hoodies · Sweatshirts · Bombers · Denim Jackets · Puffers · Cardigans
├── 👔  Formal Wear      →  Suits · Blazers · Formal Shirts · Trousers · Waistcoats · Ties
└── 🏋️  Activewear       →  Gym Tees · Compression · Sports Shorts · Joggers · Dry-Fit

✦ Roadmap

  • 6-category product catalog (62+ products)
  • Cart, wishlist & checkout flow
  • Search overlay with live results
  • Fully responsive design
  • Deployed on Render
  • Backend — Node.js / Supabase
  • User authentication & profiles
  • Razorpay payment gateway integration
  • Individual product detail pages
  • Admin dashboard for inventory

✦ Author

Devasurya S@Devasurya-26


ZAFRAN · Premium Men's Fashion E-Commerce

Live Demo GitHub

Developed by Devasurya Senthilkumar 🧡 · Pure HTML · CSS · JavaScript

About

✦ Premium men's fashion e-commerce storefront — built with pure HTML, CSS & Vanilla JS. 6 categories, 62+ products, cart, wishlist & checkout. Zero dependencies.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors