I used Vscode to code this solution as well as grid-box and flex-box

Community feedback

• 

  LetsFrontend•500

  @B1N4R1Posted over 3 years ago

  Hi Thiago,

  First your solution looks good, here some improvements:

  • Although you got the layout correct and the responsiveness works fine, there is to much whitespace. To improve this I would remove the grid-template-rows, height & width of the .conteiner element. This way we let the content fill the width and height.

  • You should avoid defining font-size with pixels and instead use rems, what I usually do in this challenges is set a font-size with the * selector such as: *{font-size: 16px;} , once this is done every time I have to define a font-size for an element let's say an h1 I'll do: h1{font-size: 2rem}. What this does is it takes the 16px defined with the * selector and multiplies it by 2 which results in 32px. This is just how the rem unit works, here and article explained with more details.

  • You should redo the Sign up button part where you use a a tag wrapped in a p element. For this you should use the button element and style it with a background and a box shadow to make it look like the design you are given. You can look on the internet different ways to style button elements with CSS.

  • To finish, in the why us part instead of using a p element and a bunch of <br> it would be better to use an html unordered list.

  Keep on the good work!

  Cheers!

  Marked as helpful

  1