@correlucas
Posted
👾Oi @arilthon, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor
Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:
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>
👋 Espero que essas dicas te ajudem e que você continue no foco!
Marked as helpful