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

landing page using SASS and Hover.css

@MarlonPassos-git

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


Simple challenge, but with it I had an idea to create an "algorithm" to make things even more flexible, I recommend you pay attention to the padding of each section and see the magic happening. And as always, any suggestion I can make to improve the project is welcome.

Community feedback

Fidel Lim 2,775

@fidellim

Posted

Hi Marlon,

Great work! Looks perfect as the design itself. I just have a question, is there a particular reason why you included an h1 tag and hid it?

Marked as helpful

0

@MarlonPassos-git

Posted

@fidellim to be honest, no. There are some specific cases that this is a valid approach (I don't know if in this case it is). But in my head what I did was not a page but a component, and if it was a page it would probably have some more important content that would be fair for the h1. That's why I hid it, because if I put h2 without putting h1 I get an accessibility error generated

1
Fidel Lim 2,775

@fidellim

Posted

@MarlonPassos-git oh yes. It will indeed cause an issue on the report if you have an h2 tag without having an h1 tag first. Good luck with your future projects!

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