Skip to content
Submitted about 1 year ago

Pricing component with CSS Grid

Corina•30
@Dangerina
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

My workflow has been to use the figma plugin through vs code to grab font styles and colors. Is there a better way to do this? I'm on a laptop and I don't like having the plugin take up so much screen space.

Misc. thoughts from this project: CSS Grid made a lot more sense to me conceptually compared to flexbox. Excited to use it more.

I think I need to work in better "chunks" in the future for the sake of my commits. I feel they were too generic and too far apart in this project. Maybe this will be easier to do with more complex projects?

Community feedback

  • hitmorecode•6,360
    @hitmorecodePosted about 1 year ago

    Nice well done. Just one tip

    • The margin on main, you can remove it. You already have flexbox on the body and this is holding the card in the center of the page.

    I don't understand why you need a figma plugin to grab font style and colors. If you check the folder where the FEM design files are. You'll see a file style-guide.md in this file you have all the information you need regarding font style, font size, colors and so on...

    Marked as helpful
    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