Componente de QR Code feito usando HTML e CSS

Community feedback

• 

  benssssss•380

  @benssssss

  Posted 5 months ago

  Olá, vi seu código e vou sugerir algumas alterações.

  Você poderia colocar seus textos (h1 e p) dentro de uma div, assim como fez com a imagem, e então aplicar um padding diretamente nessa div, em vez de colocá-lo nos textos individualmente. Isso tornaria seu CSS mais limpo.

  Notei que você usou translate para centralizar o cartão, o que funciona, mas não é a melhor abordagem, na minha opinião. Como você está aprendendo, pode não ter tido contato com display: flex;, que facilita muito o posicionamento dos elementos com menos código.

  O que eu faria é:

  1 - Remover a centralização do .card

  .card { 
      /* position: absolute; */ /* remover */
      /* top: 50%; */ /* remover */
      /* left: 50%; */ /* remover */
      /* transform: translate(-50%, -50%); */ /* remover */
      /* margin: auto; */ /* remover */
  
      width: 300px;
      border-radius: 20px;
      background-color: var(--white);
  }
  

  2 - Definir e centralizar o .card usando flex

  body {
      /* max-width: 1444px; */ /* remover */
  
      font-family: Outfit, Arial, Helvetica, sans-serif;
      background-color: var(--slate-300);
  
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  }
  

  display: flex; define o body como um contêiner flexível.

  justify-content: center; centraliza o .card horizontalmente.

  ---

  align-items: center; centraliza o .card verticalmente.

  Porém, por padrão, o body tem a altura do conteúdo (neste caso, o .card, que tem 466px). Se aplicarmos align-items: center;, nada mudará, pois o conteúdo já está no centro do body. Para resolver isso, adicionamos height: 100vh;, que define a altura do body como 100% da tela do dispositivo, garantindo que o .card fique exatamente no meio da página.

  Seu HTML é semântico e seu CSS está bem organizado.

  Parabéns pelo primeiro projeto!

  00