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

Juveria Dalvi• 1,375

@Juveria-Dalvi

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


...

Community feedback

Dušan Lukić• 1,660

@dusanlukic404

Posted

Hi Juveria, you did very nice job! I like your solution 😃

There is a few things you should probably change:

  • My suggestion is to use button element instead of input with type of button and then to add cursor: pointer; and some transition to button
  • Your accessibility is good but you have one problem. You should increase heading element only by one. You have <h3> so use <h2> instead
  • Why Us section should be unordered list with list items for a way better accessibility instead of writing a paragraph with line breaks.

There is a saying that you always look at everything to make it look good without using CSS. Then, you are 100% sure that accessibility is excellent and you can start styling your website. 🤩

Marked as helpful

0

Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted

@dusanlukic404 thanks I've noticed that accessibility issue and I used margin-padding instead of line-break <br> tag

0
Dušan Lukić• 1,660

@dusanlukic404

Posted

@JuveriaD yeah it is also common mistake. I don't suggest you to do in your next projects :)

0
Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted

@dusanlukic404 thanks I'm not going for same mistake again 😃

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