Submitted about 2 years ago

Single Price Grid / Responsive layout with grid

Adriel Santos Costa•130

@adriel-mp3

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Continuing the Frontend Mentor challenge journey here is another challenge :)

I applied the responsive layout using media queries
I used grid + flexbox for positioning
The practice again has brought me more efficiency in the processes and I am very happy that this has brought me results.
Let's go to the next ones! 🚀

"Winners are not people who never fail, they are people who never give up."

My question is in the use of the article if there is another tag better to have used and if my HTML is adequate and semantic

Community feedback

Miran Legin•680
@miranleginPosted about 2 years ago
Hi Adriel,

overall you did a great job on this challenge and there are only minor things you could change to make it better in my opinion.

put class monthly-button on a <a> tag instead of div and remove div completely, this way you will get nice large button because right now clickable area is really small

avoid using this kind of selectors because if the order of things change you need to style them again .join-text p:nth-child(2n) use classes instead, <p class="lighlight"> or similar

i think <h3>Why Us</h3> can become <h2> just like "Monthly Subscription"

you can also set the hover state on a button like explained in challenge info: "See a hover state on desktop for the Sign Up call-to-action", this is connected with 1. because it would be impossible to set hover styles on a parent element

Keep coding!
0

Please log in to post a comment

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