Product preview using HTML and CSS

👾Fala Nathan, tudo bem? Parabéns pelo desafio!

Eu sugiro você construir esse component com GRID, que é bem mais fácil e pratico. Aqui um passo a passo para construir este componente com 2 colunas tudo o que você precisa fazer é criar um bloco principal para conter todo o conteúdo (você pode usar <main> para quebrar), defina seu width como max-width: 900px (é o tamanho do contêiner) e display: grid / grid-template-column: 1fr 1fr (isso significa que seu componente terá duas colunas com 50% da largura do contêiner cada uma é 450px)

Para fazer a parte mobile basta aplicar grid-template-column: 1fr pra deixar o container mostrando apenas uma div por coluna.

👋 Espero ter ajudado e continue no foco!

Hi @Nathan4Andrade. Congratulations on your project. I think you could try some changes to improve the code. First of all, you could explore the semantic tags that HTML has and decrease the use of divs. Here is an interesting link about it: https://www.w3schools.com/html/html5_semantic_elements.asp

On the other hand, the mobile version is not responsive. I suggest that in the mobile version you incorporate the flex-direction: column property along with some changes to the size of the image. Greetings, I hope this comment has been useful to you.