Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single Price Grid Component with vanilla css

P
Fluffy Kas 7,735

@FluffyKas

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback are very much appreciated, have a good day everyone! :)

Community feedback

@Nishkarsh01

Posted

Could you please help me understand the place-value property that you used on body. Could not understand it over documentation. Would be great if you could take the time to help.

Also, I loved the way you've written and organised your code. Really Beautiful.

0

P
Fluffy Kas 7,735

@FluffyKas

Posted

@Nishkarsh01 Hey, place-items is basically just a shorthand for align-items and justify-content properties. You can use it together with grid. On the body I used it to both horizontally&vertically center my component. I hope this helps ^^

Also, thanks :)

1

@Nishkarsh01

Posted

@FluffyKas understood, thanks a ton!

0
P
Patrick 14,285

@palgramming

Posted

Good start to the challenge. You might want to look at your layout in a browser about 750px wide and just look at your text alignment and how all your elements are reacting together. Specifically in the middle card the Price Text and how it is compared to all its siblings

0

P
Fluffy Kas 7,735

@FluffyKas

Posted

Thanks, I didn't notice I messed up that flexbox. Corrected. :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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