Product Card
Welcome to the Product Card challenge! In this page, you can navigate between the different tasks of your challenge and submit your solution for evaluation.
Product Card
Create a product card layout for a perfume product. This challenge is pixel-perfect only — no functionality required.
Instructions:
- Recreate the product card layout using the provided HTML and CSS.
Evaluating Requirement: You MUST use the following classes for evaluation:
- Main wrapper:
.product-card(must use this class for pixel-perfect evaluation) - Product image wrapper:
.product-image - Product title:
.product-title - Add to cart button:
.add-to-cart
- No JavaScript functionality is required; this is a visual/pixel-perfect challenge.
Upload Your Web Page Files (Upload a Folder)
Your Uploaded Page
Upload files to see your page here.
Original Task Page
Evaluation Results
Load a task and upload your files to see evaluation results.