Response Product Shopping card made using pure css and html

Solution retrospective
In this project i learnt how to perfectly vertically align before pseudo element with respect to element it is applied on. This is why i managed to center the shopping cart icon inside the button and side by Add to cart text. Below is the code snipped of how i achieved that -
What challenges did you encounter, and how did you overcome them?.perfume__shopping-btn:any-link { display: flex; justify-content: center; align-items: center; } .perfume__shopping-btn::before { display: flex; align-items: center; }
Making sure the image flex item stays 50% the width of its parent conatiner when flex direction of the parent is row was challenging. I thought i would easily achieve that by setting flex:1
by it did not do the job for me.
Then i had to do this -
What specific areas of your project would you like help with?.container figure { min-width: 50%; }
If you want to learn how to perfectly vertically align shopping cart as a before pseudo element with respect to the element it is applied on, then please do check my code on github.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @bhuvi819381
Code Feedback
Hello Friend 👋,
Your project is looking great overall! However, here are a few suggestions for improvement:
Suggestions 💡
1. Use Semantic Tags 🏷️
To improve code structure and accessibility, use semantic tags like
<main>
,<section>
, and<footer>
. It makes your code cleaner and easier to understand.2. Avoid Inline CSS 🚫
Inline CSS can make your code harder to maintain. Keep all your styles in a separate CSS file for better organization.
3. Avoid Fixed Heights 📏
Whenever possible, let the content define the height instead of setting fixed values. This approach ensures a more flexible and responsive design.
Final Thoughts ✨
Everything else in your project looks amazing 😎. Keep up the great work! Let me know if you need assistance with anything.
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