Skip to content
Submitted over 1 year ago

Single price grid component with flexbox

C4rlos•410
@solracss
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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-HarratPosted over 1 year ago

    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
    @solracssPosted over 1 year ago

    @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-HarratPosted over 1 year ago

    @solracss Good luck 👌

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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