Skip to content
Submitted about 1 year ago

Responsive Single Price Grid Component using Flexbox

Megan May•170
@mooogz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Alexandra•580
    @Alexandra2888Posted about 1 year ago

    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
    2

Please log in to post a comment

Log in with GitHub

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