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

Four-Card-Feature [Added Hover-BEM - Mobile First - Vanilla CSS]

P

@DeyanTopalov

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


----- Feedback Welcome -----

Specific Question to the Community:

Hi guys,

In the Hover section of my code, I have commented out the CSS nesting part, as it was behaving weirdly in Safari (the cards were growing on Hover, but not returning to the original size afterwords). I am using the latest Safari version and based on the info checked - it is supposed to support the CSS nesting. Any ideas of what & why went wrong?

Built with:

  • Semantic HTML
  • CSS3 Accessibility in mind
  • Mobile first approach
  • BEM naming
  • CSS Reset and custom variables used
  • CSS Pseudo elements for styling

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

Community feedback

@shafni50

Posted

did you use the css nesting? Nesting in css is old. If you want to use nesting the better go to Saas. even i tried nesting using vanilla css in my some projects but it completely breaks for responsiveness

But there is no any issue in your project. Great work! super responsive!!

1

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