Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Cartão de visualização do produto

Rafael 460

@rafaelvieiracosta

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,440

@correlucas

Posted

👾Fala Rafael, tudo bem? Parabéns pelo seu primeiro desafio e seja bem vinda a comunidade do Frontend Mentor!

1.Acabei de ver sua solução, tenho algumas dicas pra você. Sua solução ficou mto boa e tbm tá full responsiva, a customização ficou bem foda, o unico problema é que vc usou overflow: hidden pra arredondar todas as bordas, mas nesse caso seu conteudo fica cortando quando o container diminuir (olhe depois de 400px) o texto começa a cortar, pra solucionar isso vc vai ter que adicionar bordas com border-radius pra foto e pro container.

2.Por motivos de SEO e mecanismos de pesquisa tipo Google e bing, não é uma boa prática importar esta imagem do produto com CSS, pois isso dificultará a localização da imagem no google. Você pode gerenciar ambas as imagens dentro da tag <picture> e usar o código html para definir quando as imagens devem mudar configurando o dispositivo max-width dependendo do dispositivo (mobile / desktop) Aqui está um guia sobre como usar picture: https://www.w3schools.com/tags/tag_picture.asp

👋 Espero ter ajudado e continue no foco!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord