Product design page

Fala Lucas, vou te dar uma dica pra vc recriar essa solução com grid e alinhar ela:

1.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.

2.Pra fazer o alinhamento vertical você vai ter que usar min-height: 100vh pra fazer o body ficar com o tamanho de no mínimo 100% da altura da tela e fazer com que o container alinha com essa altura, desse jeito o card vai ficar sempre alinhado ao centro usando display: flex / align-items: center e justify-content: center.

Ve ai se te ajuda irmao! Continue codando

Hey @Lucasinho92, great job on this project!

Some suggestions to improve you code:

1. For accessibility purposes, its better to use rem/em instead of px for your CSS property values.

2. When using different images for responsiveness, it’s far more efficient to use the <picture> element.

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

Heres a link with more details on it: https://www.w3schools.com/html/html_images_picture.asp

Happy Coding!