Fashion E-commerce Storefront
Build a modern and elegant fashion e-commerce storefront based on the provided design. The page should include a promotional top bar, navigation header, hero banner, category highlights, featured products section, editorial image blocks, brand message section, Instagram-style gallery, newsletter form, and footer. Use HTML for structure, CSS for styling, and JavaScript for dynamic behavior and rendering. Integrate an API or mock JSON data source to display product listings, category data, pricing, featured collections, or gallery items dynamically. The final result should focus on a clean luxury-inspired layout, responsive design, reusable product cards, interactive UI elements, and data-driven content.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build the full e-commerce landing page based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for dynamic rendering and UI interactions
- Create a promotional top announcement bar
- Build a navigation header with logo, menu links, and action icons
- Create a hero section with headline, call-to-action button, and large featured image
- Add category or editorial collection cards below the hero section
- Build a featured products section with multiple product cards
- Display product image, title, and price for each item
- Include at least one product color or variant indicator
- Create large promotional/editorial banner sections
- Add a brand story or marketing message section
- Build an Instagram-style gallery section
- Create a newsletter subscription form
- Add a structured footer with company, customer service, and contact links
- Integrate at least one API or mock API for products or collections data
- Render product data dynamically using JavaScript
- Add hover states for buttons, cards, links, and product items
- Make the page responsive for tablet and mobile devices
- Keep code clean and organized across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.