Khamsat Clone (Static Marketplace UI)
A responsive front-end clone inspired by the Khamsat marketplace homepage, built with HTML and CSS. It features an Arabic RTL layout, a hero search section, service categories, featured gig cards with ratings/prices, and a multi-column footer.
HTML
CSS
Bootstrap
Responsive Design
Bootstrap Grid
Landing Page
Font Awesome
Video
Project Overview
Features
Navbar with marketplace quick actions (notifications, messages, cart, search) and logo.
Hero + search section for service browsing.
Service categories in a clean, RTL-supported grid layout.
Featured service cards with thumbnails, titles, rating stars, and prices.
Multi-section footer with social links, payment icons, and link columns.
Arabic-friendly typography using Google Fonts.
Tech Stack
Frontend: HTML + CSS.
Icons: Font Awesome (navbar, cards, footer).
Fonts: Google Fonts (Arabic web font).
Deployment: Vercel.
Implementation
Layout & Components
Clear sections (navbar, hero/search, categories, listings, footer) with consistent class naming and container wrappers. CSS Flexbox/Grid for aligning icons, cards, and footer columns.
RTL Support
Applied direction: rtl to key sections for natural Arabic alignment and reading flow.
How It Works
Static homepage clone loads instantly. View category blocks, browse featured service cards, and explore the marketplace-style footer navigation.
Challenges Faced
Organizing complex marketplace structure in clean HTML/CSS.
Consistent RTL alignment across cards, lists, and footer columns.
Future Enhancements
JavaScript interactions (search filtering, responsive menu, dynamic cards).
Data-driven content from JSON.
Accessibility improvements (ARIA labels, keyboard navigation) and asset optimization.
Navbar with marketplace quick actions (notifications, messages, cart, search) and logo.
Hero + search section for service browsing.
Service categories in a clean, RTL-supported grid layout.
Featured service cards with thumbnails, titles, rating stars, and prices.
Multi-section footer with social links, payment icons, and link columns.
Arabic-friendly typography using Google Fonts.
Tech Stack
Frontend: HTML + CSS.
Icons: Font Awesome (navbar, cards, footer).
Fonts: Google Fonts (Arabic web font).
Deployment: Vercel.
Implementation
Layout & Components
Clear sections (navbar, hero/search, categories, listings, footer) with consistent class naming and container wrappers. CSS Flexbox/Grid for aligning icons, cards, and footer columns.
RTL Support
Applied direction: rtl to key sections for natural Arabic alignment and reading flow.
How It Works
Static homepage clone loads instantly. View category blocks, browse featured service cards, and explore the marketplace-style footer navigation.
Challenges Faced
Organizing complex marketplace structure in clean HTML/CSS.
Consistent RTL alignment across cards, lists, and footer columns.
Future Enhancements
JavaScript interactions (search filtering, responsive menu, dynamic cards).
Data-driven content from JSON.
Accessibility improvements (ARIA labels, keyboard navigation) and asset optimization.
ContactMe
Have a question or want to work together? Send me a message using the form below.