QR code component using HTML and CSS

Congratulations on your first project, but I can tell you that we can improve it much more in order to gain more experience. When analyzing your code I could see that you used the margin: auto property in the section in order to center it, nice idea to use, but instead of using the margin property you can center it with flex, which is much more advisable to use It is simpler to use in all cases, I will leave an example of how it would be applied in your case, and I will leave the rest to your investigations:

-- body { background-color: hsla(207, 44%, 81%, 0.5); display: flex; align-items: center; juststify-content: center; }

Oi Rebeca, tudo bem? Parabéns por conseguir concluir o desafio, também estou estudando JavaScript, com o Profº Guanabara hahaha. Tenho algumas dicas que você pode usar.

Recomendo para esse desafio, você estruturar seu HTML assim:

<main>
  <img>
  <h1>
  <p>
</main> 

Na sua imagem defina o tamanho para width: 100%, assim ela acompanha sempre o tamanho do seu card e fica responsiva.

Para centralizar o card no centro, você pode utilizar o flexbox ou Css Grid. Como o Guanabara ainda não ensinou sobre o assunto, recomendo esses vídeos Css Grid e Flexbox da Origamid.

Hey, you do it great!

Just some feedback: In your style.css, line 11, you have a margin for the body. Use this

body { background-color: hsla(207, 44%, 81%, 0.5); margin: 70px auto; }

instead of this: body { background-color: hsla(207, 44%, 81%, 0.5); margin: 70px; }

Auto will center your content in horizontal axe.

Next. If you want to improve your HTML, you can change the section for main because is your main content. And the p class= "p1" for h1 class="p1". This'll make your site more accessibility for people that use other equipment to read your site.

You can read more about this here: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

I hope helped you. Greetings.