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

MrJay's Solution to Single price grid component

Jereโ€ข 150

@chungvuiloong

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


The only thing I didn't build is the hover/ active state. Although there was instructions about it, there was no clarity of the hover/active 's colour or style.

Feedbacks are welcome! Help like as well star my GitHub repo.

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

Here are some suggestions to further improve your solution:

  • Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of just using paragraph (<p>).
  • Consider using min-h-screen (which translates to min-height: 100vh) rather than combining breakpoints with heights like lg:h-[100vh] h-auto. This approach is more straightforward and ensures that there are no unexpected issues on smaller screens. It simplifies your code while achieving the same result.

I hope you find it useful! ๐Ÿ˜„

Happy coding!

Marked as helpful

1

Jereโ€ข 150

@chungvuiloong

Posted

Hi @MelvinAguilar,

Thank you for your feedback and your support ๐Ÿ˜Š.

Amazing feedback!

I tried both solutions and it worked great!

Hope to see more of your feedback as it is very helpful.

Have you considered being a mentor?

Happy Hacking!

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