Submitted 7 months ago

Single Price Grid Component Built With Flexbox & Grid

Samuel Hernandez• 80

@S067130H

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

One thing I found (arguably) difficult was attempting to complete the project purely using CSS grid. I don't have much hands-on experience yet and could not achieve the wrapping effect I wanted. I did use grid on the container as an experiment to get more practice, but the rest is built using flexbox. Other than that, I enjoyed this project a lot.

If anyone has any tips or information about how or if I could've built this project entirely with grid, I would be happy to get any tips!

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 7 months ago

Hello @S067130H!

You did a very good job there!

I have a very simple suggestion for improvement:

Since the sign up button is a clickable element, it's nice to add cursor: pointer to it.

📌 This gives the user one more visual indication that the element is clickable, as obvious as it may look.

I hope it helps!

Other than that, you did a great job!

Marked as helpful

Samuel Hernandez• 80

@S067130H

Posted 7 months ago

Hello @danielmrz-dev!

Thank you for bringing that up, I have a bad habit of not setting the cursor property on clickable elements. I’ll get that added on, thank you!

Erratic56• 70

@CozyMeds

Posted 7 months ago

Site looks awesome mate

A quick couple sightings, when shrinking 400px - 510px the text in "Join our community" is overflowing and cutting off, The button shrinking adaptively is awesome but maybe decrease the size so its not stretching end to end, The hover effect is cool but a tad slow, maybe speed it up slightly

Otherwise site looks awesome, keep up the hard work and happy coding bro

Marked as helpful

Samuel Hernandez• 80

@S067130H

Posted 7 months ago

@CozyMeds thanks for pointing that out!

I didn't look carefully at other width sizes so I'll get those few things fixed. I appreciate the feedback!

Olaniyi Ezekiel• 7,600

@Ezekiel225

Posted 7 months ago

Hello there 👋 @S067130H.

Good job on completing the challenge !

Your project looks really good!

Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

Happy coding.

Marked as helpful

Samuel Hernandez• 80

@S067130H

Posted 7 months ago

@Ezekiel225 thank you for the kind words! I appreciate it a lot. Looking forward to having solutions on my page as good as yours!

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