Product preview card component

Community feedback

• 

  Daniel•70

  @RadiantReversal

  Posted over 1 year ago

  Ficou perfeito, a única coisa que notei que faltou foi o hover button:hover do botão e poderia ter o button:active pra fazer um efeito legal de clicar sabe.

  10
• 

  P

  Daniel 🛸•44,780

  @danielmrz-dev

  Posted over 1 year ago

  Oi Ana!

  Seu projeto ficou ótimo!

  Sobre dicas pra melhorar, tenho algumas:

  • Vi que você utilizou 2 tags pro conteúdo principal: main.card e div.produto. Nesse caso, você poderia ter utilizado apenas uma tag, e visto que é o conteúdo principal da página, a tag main faria o papel.

  • Vi também que você utilizou height:90vh no main.card para posicioná-lo mais próximo do meio da página. Isso funciona, mas existem duas maneiras melhores, mais fáceis e eficientes para centralizar elementos no meio da página vertical e horizontalmente:

  Você pode aplicar isso ao body:

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

  ou pode aplicar isso ao elemento que você quer centralizar:

  .element {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
  }
  

  • E por último, visto que o botão é um elemento clicável, adicionar um cursor: pointer; e também um hover para alterar a cor de fundo quando o mouse for passado por ele, tornaria seu projeto ainda mais intuitivo pro usuário.

  Espero que as dicas ajudem!

  Fora esses detalhes, você fez um belo trabalho!

  00