Product preview card component (html + css)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Oi Luciano, beleza? Parabéns pela sua nova solução.

  Como o Felipe falou no comentário anterior realmente ficou faltando o alinhamento, vou te dar algumas dicas em relação ao seu código.

  Sempre que você for fazer um desafio tipo esse, tenta pensar em quais são os elementos extremamente necessários afim de evitar colocar aquela div a mais e deixar seu html muito longo, por exemplo, nesse desafio tudo que você precisa são uma <main> pra segurar as duas colunas e uma <section> pra cada coluna, na coluna de text pode deixar tudo solto exceto a parte do botão que precisa de uma div.

  Ao invés de puxar as imagens pelo css você pode usar picture pra segurar as imagens desktop e mobile dentro de um mesmo elemento e ainda definir quando elas devem ser trocadas de acordo com o tamanho de tela e dispositivo.

  Caso você não conheça ainda a tag picture, aqui um guia de como usá-la:

  https://www.w3schools.com/tags/tag_picture.asp

  Espero ter ajudado e continue no foco!

  Marked as helpful

  1

  ---

  

  Luciano Oliveira•300

  @LucianoOliveira1Posted over 2 years ago

  @correlucas Valeu Lucas!! Eu tenho tido um pouco de dificuldade na hora manipular as imagens e pra organizar o código mesmo, com isso acabo colocando coisa demais. Mas com as suas dicas e do Felipe tenho certeza pros próximos desafios eu já consigo melhorar nesses pontos. Obrigado pelo feedback!!

  0
• 

  Felipe Chaves•240

  @loopchavesPosted over 2 years ago

  Como vai, Luciano! Seu layout ficou muito bom.

  Em relação ao seu código, você pode usar o flex no body pra centralizar todo o conteúdo na tela. Precisa definir o tamanho do elemento pai (nesse caso o body) porque o flex vai centralizar de acordo com esse valor.

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

  Nesse exemplo 100vw e 100vh vai ocupar todo o espaço da tela, "vw" e "vh" siginifiam "view width" e "view height" respectivamente.

  Outra dica é usar a tag <main> invés de <section>. Isso optimiza seu site para recursos de acessibilidade.

  Por último, evite usar <br> para espaçar os elementos. Você pode substituir isso por margin ou padding no CSS.

  Marked as helpful

  1

  ---

  

  Luciano Oliveira•300

  @LucianoOliveira1Posted over 2 years ago

  @loopchaves Fala Felipe, muito obrigado pelas dicas! Inclusive já até as usei no outro desafio!!

  0