Pagina com QRCODE feito com html e css

Fala @Michaelrodriguesds!

Seu projeto está excelente!

Tenho duas sugestões:

• Primeira: Pra tornar seu código HTML mais semântico, use <main> pro conteúdo principal ao invés de <section>.

📌 A tag <section> faria mais sentido se o card fosse parte de um site maior (e com certeza seria no mundo real) mas aqui ele é o principal elemento da tela.

• Segunda: Também por questões semânticas, e por ser o título principal da tela, você pode substituir o <p> por <h1>. Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.

📌 As tags <h1> a <h6> são usadas para definir títulos em HTML.

📌 <h1> define o título mais importante.

📌 <h6> define o título menos importante.

📌 Use apenas um <h1> por página - isso deve representar o título principal de toda a página. Além disso, não pule os níveis de título - comece com <h1>, depois use <h2> e assim por diante.

Essas mudanças tem pouco ou nenhum efeito visual, mas tornam seu código HTML mais semântico, melhorando a otimização de SEO e também a acessibilidade do seu projeto.

Espero que ajude!

Fora isso, ótimo trabalho!

Greetings! you have done a great job 😎

📌 Some suggestions

• Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
• I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
• I leave you the task of researching the reset CSS and the box-sizing: border-box
• If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
• You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
• You can apply max-width: 320px to your section so that the container does not extend as much
• Don't use br to arrange the text as in the layout. Instead, use padding-inline and adjust the font-size if necessary
• Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}