Submitted almost 4 years ago

single-price-grid

Omen• 50

@bobaram

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

From the very start i struggled with this project . I need feedback on how i should have structured my HTML and which tags i should have used. I am still learning and would really appreciate any sort of feedback no matter how critical it is .

Community feedback

Basile Raiwet• 175

@BasileRaiwet

Posted almost 4 years ago

You can easily improve this solution by adding some padding / margin in order to fit with the design. Also, look at the design file to find correct font-size for your headings / content. don't forget details like border-radius and box-shadow.

Grace• 30,770

@grace-snow

Posted almost 4 years ago

Hi Omen,

Best thing you can do as well as the above is to take out all the bootstrap. You don't need it and i think it will hold back your learning.

Best of luck with it Grace

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 4 years ago

Hey, Omen! 👋

Good effort on this challenge! 👍

I suggest,

Getting rid of the border around the button and giving it a hover state.
Using an unordered list for the bottom-left box (rather than a paragraph tag) so that the items of the list break onto new lines.
Using flexbox to center the card component in the viewport (since it's usually easier and more foolproof than, like, using margins).
Like BasileRaiwet mentioned, adding a border-radius and box-shadow to the card component.

Keep coding (and happy coding, too)! 😁

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