Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column Card Component 🎯 [ SEMANTIC MARKUP - BEM - VANILLA CSS3 ]

#accessibility#bem

@0xabdulkhalid

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Mukwende 1,370

@mukwende2000

Posted

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 helpful

3

@0xabdulkhalid

Posted

Thanks for noticing that issue @mukwende2000, i will try to resolve it as soon as possible

2

@devaramnye

Posted

why did you used twice id="sedans-section-heading" & id="luxury-section-heading" for headings and once aria-labelledby="suv-section-heading"? only a question for my understanding

0

Please log in to post a comment

Log in with GitHub
Discord logo

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