Skip to content
Submitted almost 2 years ago

Responsive Single Price Grid Component using Flexbox

Megan May•180
@mooogz
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Just a quick HTML/CSS project. Working on more concise code--I feel that there are better ways to organize styles but I end up confusing myself. Also, is there a better way to do the border-radius properties without using top-left, top-right, etc.? I feel like I did it before with something like overflow: hidden but I'm struggling to find the solution.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Alexandra•580
    @Alexandra2888

    Hi! Congrats for finishi9ng challenge! Your solution is very close to the design!

    For border-radius you can border-radius shorthand: top->right->bottom->left. So if you need only left & right would be: 0 10px 0 10px for eg.

    Other advices for improvement:

    • add aria-label for button,
    • add for reset also *::after, *::before to target pseudo-elements also,
    • implement BEM naming convention, it will help you in larger projects for cleaner & more maintainable code, mainly when you will use SCSS. Happy coding!
    Marked as helpful

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