16 November 2025 : for now, 3 pages are developed, but 4 more pages are there, partially done. 6 December 2025 : All files are done with HTML,CSS and JS, few js features like add to cart and signin feature added
ZHive Index Page - Code Explanation HTML Structure The page uses HTML with three main sections:
Header: Contains a sticky navigation bar with logo, links to all pages, and an active state indicator on the current page.
Main Content:
Hero Section: A centered banner with headline, tagline, and call-to-action button directing users to the shop Featured Products: A responsive product grid displaying 3 featured items Shop by Category: Three category cards linking to Men's, Women's, and Accessories pages Footer: Copyright and project information.
CSS Styling Layout: Uses CSS Grid (grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) for responsive product cards that adapt from 1 to 4 columns based on screen size.
Colors: Dark theme with gold accents (#D4AF37) for luxury feel.
Interactions:
Smooth transitions on hover effects Cards lift slightly (transform: translateY(-3px)) Buttons change background/text colors on hover Gold box shadow on product card hover Typography: 'Playfair Display' for headings (serif, premium) and 'Inter' for body text (clean, readable).
The design prioritizes luxury aesthetics with smooth animations and consistent spacing throughout.