Product preview card component main | HTML, CSS (FLEXBOX).

Solution retrospective
All feedback is welcome! Thank you! :D
Todo feedback é bem-vindo! Obrigado :D
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Fala Murilo, tudo bem? Parabéns pelo desafio!
Cara eu fiz esse desafio com grid, acho que com flex complicou um pouco, meu conselho seria vc recomeçar a estrutura com GRID.
Aqui o 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 seuwidth
comomax-width: 100px
(é o tamanho do contêiner) edisplay: grid
/grid-template-column: 1fr 1fr
(isso significa que seu componente terá duas colunas com 50% da largura do contêiner cada uma é ** 500px**)👨💻 Aqui minha solução se vc quiser usar como base pra faze-la com grid: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1
👋 Espero ter ajudado e continue no foco!
Marked as helpful
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