Submitted about 1 year ago

Responsive Single Price Grid Component using Flexbox

Megan May• 170

@mooogz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

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• 510

@Alexandra2888

Posted 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

Please log in to post a comment

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