Single Price Grid Component

You need to fix up the html on this. It’s a really important skill to practice - translating a design into the most appropriate meaningful html elements.

For example

• think through heading order - this should only have one h1
• why is sign up a button? What would happen on click? Is that the right element?
• it’s definitely not a paragraph in the last box. What would be better?

Use css grid for this. That means the 3 boxes should be direct children of the main grid.

Never ever have font size in px. Really important. Use rem

Use max width in rem instead of %. Get back control.

No heights at all in this. Never limit the height on elements that have text content inside

Replace <div class="container"> with the main tag to fix accessibility issue.

in the mobile design give the main /.container a max-width value, for it to be a responsive content on different type of screens. e.g.: .container{max-width: 400px;}

There is no need to give the section and .card a height value , replace padding-top and padding-bottom values. give all of them equal padding-top and padding bottom values.

You forgot to give the body a background-color.

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING