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

Responsive single page price grid

Kritika 20

@11Kritika11

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


I try my best to make it responsive as i can, i guess everything is almost fine i just have a mini problem with button shadow.It would be great if any one can help me with that

Community feedback

@ZenitsuAg

Posted

Hi Kritika, you've done a great job and your code is responsive. Some tips to help you improve your code.

  • It's better to wrap the entire code in a main tag for accessibility purposes
  • Also, the entire code cover the entire screen so we can't really see the body tag. We can change this by setting a width value maybe to 80% or something else, depends on you.
  • Heading tags should also increase in a logical order, that is h2 after h1, h3 after h2 like that. This is because of screen readers to make the page easy to navigate. You can read more about it here.
  • Then you can center it using CSS Flexbox with this code body {display: flex; justify-content: center; align-items: center} and that's it.
  • For the button shadow, you can solve that by using the box-shadow property. So something like box-shadow: 0px 6px rgba(0, 0, 0, 0.2) should do it, but feel free to edit it as you want. -Also in the "Why us" section, you should use a separate p tags for each item.
  • In your CSS where you called body, h1, h2 etc to remove the margins is okay but preferably you can use the universal selector to do it. Like this
* {
margin: 0;
}

Overall you did really well.

Happy Coding :)

Marked as helpful

1

Kritika 20

@11Kritika11

Posted

@ZenitsuAg Thank You so much for giving time and efforts to look at the code and pointing out where i can improve the code and it's accessibility. I'll definitely update this code as well as mind this points in future challenges :)

1

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