@lucasrgt
Posted
Good job on completing the challenge Augusto.
There's some points you can change in your code to improve it.
Semantic HTML:
You can wrap your card conteiner div to the <main> tag.
You can change the attribution container to <footer> tag too.
Structural Problem:
In your body you've put 200svh, that's the double of the amount of the viewport size, so it expanded your view and distorted the website structure.
Use 100svh instead with a fallback to 100vh.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; height: 100svh; font-family: Lexend Deca; background-color: hsl(0, 0%, 95%); }
Insteand of using px values into your components, i suggest you to learn how to use rem and em units, it's better for most of the cases (responsiveness).
Avoid putting width and height constraints into text elements like:
p { max-width: 100%; }
instead, wrap it into a div and put the width on the div.
Thats it! Keep going.
