Parfum Project Css

Solution retrospective
I improved my understanding of box-sizing: border-box for consistent layouts and practiced using object-fit: cover to handle responsive images without distortion.
What challenges did you encounter, and how did you overcome them?Maintaining the aspect ratio of images inside containers was tricky at first, but using object-fit: cover solved this issue effectively.
What specific areas of your project would you like help with?I’d appreciate suggestions on optimizing my CSS for better maintainability and performance.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@nishanth1596
Hi @DyaC-703, Great job, the design is clean, semantic, and well-organized!
A few small suggestions to make it even better:
- Simplify the layout if possible: If you're not styling the image wrapper specifically, you can simplify the structure like this:
<main class="container"> <img src="./images/image-product-desktop.jpg" alt="Perfume Bottle" class="product-image" /> <div class="product-info">...</div> </main> .container { display: flex; }
But if you need more control over image sizing or layout ratios, wrapping the image in a .card-image div is still a good idea.
-
Avoid redundant class names: If .container and .product-card are applied to the same element and not reused separately, you can consolidate them into one class to keep things simpler.
-
Make price info more semantic: You could wrap the pricing section in a <p> or semantic container for better structure:
<p class="price"> <span class="discount-price">$149.99</span> <span class="original-price">$169.99</span> </p>
- Consider mobile-first development: It’s generally easier to start with a simple mobile layout and scale up using min-width media queries. This also leads to more maintainable CSS as the project grows.
Overall, great work! Just a few tweaks here and there to make it even more awesome. Keep building
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord