3 Column Card Component 🎯 [ SEMANTIC MARKUP - BEM - VANILLA CSS3 ]
Design comparison
Solution retrospective
👾 Hello, Frontend Mentor Community,
This is my solution for the 3-Column Preview Card Component .
- Used
Prettier
code formatter to ensure unified code format ⚙️ - Solution with
99.9
Percent Accuracy 🎯 - Layout was built responsive via mobile first workflow approach 📲
- Had a lots of fun building this challenge during my exam times ! 😝
- Feel free to leave any feedback and help me to improve my solution 💡
.
👨🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice !
Community feedback
- @mukwende2000Posted over 1 year ago
That is really great work from you You forgot to add a cursor pointer on the buttons. And notice how when you hover over buttons it shakes or moves a little, that is because a border takes up space in the document. To fix i'd suggest you use outline instead which doesn't take up space. so instead of
.container__section-action:hover{ background: unset; border: 1px solid var(--light-grey); color: var(--light-grey) !important; }
Do
.container__section-action:hover{ background: unset; outline: 1px solid var(--light-grey); color: var(--light-grey) !important; }
Great job overall, and i love your dedication to fronted mentor i see your comment like almost every time i log in on people's projects,
Marked as helpful3@0xabdulkhaliqPosted over 1 year agoThanks for noticing that issue @mukwende2000, i will try to resolve it as soon as possible
2 - @devaramnyePosted over 1 year ago
why did you used twice
id="sedans-section-heading"
&id="luxury-section-heading"
for headings and oncearia-labelledby="suv-section-heading"
? only a question for my understanding0
Please log in to post a comment
Log in with GitHubJoin 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