Responsive page using Flex-box, Grind and Js to store the "star"

Hi Pedro,

Congratulations 🎉 for completing this challenge, it was a great attempt however there are some issues regarding your HTML and CSS:

1. It is best practice to wrap your code within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
2. Your buttons are missing the type attribute e.g. <button class="btn" type="button"></button>
3. The star image should not be nested within the h1 tag since it requires a text and is mostly used as a title for something. If you want the image nested within something, you should use the div tag instead.
4. You should give the submit button, the cursor property of pointer e.g. cursor: pointer;
5. For the buttons, I would suggest you change the padding and add text-align like this:

.num {
  padding: 15px 20px;
  text-align: center;
}

Also, remove the width and height property within the .num to center the numbers in the middle.

Overall, great attempt and wish you the best for your future projects so keep coding 👍.

👾Oi de novo Pedro, tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução e ficou mto boa, está full responsiva, a unica coisa pra melhorar é o botao com os numeros que nao está alinhado com o circulo, pra fazer isso vc vai ter que colocar uma class flex fazendo esse alinhamento pra todo botoes pra centralizar os numeros em relacao ao circulo.

Uma boa pratica seria usar unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Pra fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

👋 Espero ter ajudado e continue no foco!