thanks

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Mateus Duarte, tudo bem? Parabéns pelo desafio!

  Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

  1.A sua solução ficou muito boa, a estrutura html o design também, mas se você quiser melhorar ainda mais, você pode usar a tag <picture> para simplificar seu código e segurar as duas imagens dentro do html. Usando essa tag, você nem precisará de media query para mudar de uma imagem para outra dependendo do dispositivo (mobile ou desktop), basta configurar tudo dentro do html.

  Caso você ainda não conheça essa tag, aqui na documentação explica certinho como configurá-la: **https://www.w3schools.com/tags/tag_picture.asp **

  Veja o exemplo abaixo:

  <picture>
    <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
    <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
  </picture>
  

  2.Use unidades relativas como rem ou em em vez de px para melhorar seu desempenho redimensionando fontes entre diferentes telas e dispositivos. Para fazer um site mais acessível, o ideal seria usar rem em vez de px. O REM não se aplica apenas ao tamanho da fonte, mas também a todos os tamanhos.

  👋 Espero que essas dicas te ajudem e que você continue no foco!

  Marked as helpful

  0
• 

  Raymond Fajiculay•230

  @keyztrokeePosted about 2 years ago

  Hi Mateus Duarte great start, but I have few thing you might want to consider

  1. Instead of putting paddings and margin on the right corner you can use the padding on the text1 div instead.

  2. Consider making a mobile view of the card with media query and flexbox

  Media Query https://css-tricks.com/a-complete-guide-to-css-media-queries/

  Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  3.Add padding on your button

  It will improve a lot your work I hope it helps

  Marked as helpful

  0