Submitted almost 2 years ago

Single price grid solution

Zarko Petrov• 210

@zp021

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

I tried to do the desktop design with grid initially, but couldn't get it quit right. Any tips or links to such solutions are welcome. Also my concern is that maybe I'm writing too much css, so if anyone could link their solution/code for me to study, I find it very helpful to look at code of more experienced devs.

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @zp021, some suggestions to improve you code:

https://css-tricks.com/snippets/css/complete-guide-grid/
The headings are being used incorrectly. There are only three headings in this component; “Join our community”, “Monthly Subscription”, and “Why us”
Your button needs to have a :hover.
The “Why Us” list should be created using an Unordered List Element along with the List Items Element.
Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

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