Skip to content
Submitted about 4 years ago

Single Price Grid Component using HTML/CSS - Grid

Josh Prentice•235
@jfprentice
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

Could only work on this for 10-20 minutes a day because of work so it took me a few days to complete - ended up scrapping my original styling and redoing all of it the first day I had off.

I used the PixelPerfect extension to duplicate the layout but ended up getting frustrated by trying to get every perfect. That being said, the layout isn't perfect.

I really need to work on my CSS abstraction.

Any and all critiques are welcome! Thanks for looking!

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted about 4 years ago

    Hi Josh, good job, don't see any big mistakes here. Some tips for you:

    • border-radius can be set only once on parent container with overflow:hidden;
    • same with spacing inside some parent element (padding);
    • try to be more consistent with values;
    • preferable to use rems and ems;
    • vertical rhythm also proved to be a great pattern (defining spaces beetween elements in one direction, like margin-bottom);

    Hope this was helpful, Roman

    1
    Josh Prentice•235
    @jfprenticePosted about 4 years ago

    Thanks for taking the time to check out my work!

    I will keep these tips in mind as I move forward with my projects.

    1

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