Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
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

Single price grid component

P
solvman 1,670

@solvman

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@tburette

Posted

Hello, Very good clean solution! There are a lot of things to take inspiration from :

  • custom properties to define color fonts with well organized naming
  • small negative letter spacing
  • I noticed many things that you did right for the button that I did wrong. Your button goes down when you use it, not up. The shadow effect works not just on :hover but on :focus as well.
  • Good implementation of BEM. It's weird to see it used for such a 'major' part of a page that is an entire section. However since the sections are simple it works well here. I imagine if sections were to evolve into something more complex the use of BEM on section would break down.

Personal preference : instead of grid-column: 1 / 3;, you could use grid-column: span 2;.

Marked as helpful

0

P
solvman 1,670

@solvman

Posted

@tburette Thank you for such detailed feedback!

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