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 flexbox

C4rlos 410

@solracss

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


For this challenge I use pseudo-element ::before for applying overlay background effect on why us section. Also it was nice working with 2 columns with flexbox.

Question for You:

  • is my semantic HTML good?
  • how about responsive display, is it ok?

Also...

I encourage you to leave any comments regarding my code as it is win-win.

You practice code-review and I get feedback!

Community feedback

Adel 820

@Adel-Harrat

Posted

Hello and congratulations on completing this challenge!

You've done an excellent job w🎉✨, and your solution closely matches the design. Well done! 🎊

I particularly liked your approach to responsiveness!

Regarding the UI, I have two minor observations: ⭕

  1. The "$29" should be in bold to make it stand out more.

  2. The "green/lime" title should be slightly larger than the accompanying text.

Overall, your work is commendable. Keep up the great work! 👋

Marked as helpful

1

C4rlos 410

@solracss

Posted

@Adel-Harrat

  1. Forgot to change font-weight, nice catch!
  2. It is, according to desing it's 15px for title, 14px for paragraph on mobile, and for desktop again, nice catch! I forgot to apply additional rule for this sentence.

Thanks for comments!

1
Adel 820

@Adel-Harrat

Posted

@solracss Good luck 👌

Marked as helpful

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