Skip to content
Submitted over 2 years ago

Mobile First | Responsive product preview card component with Flexbox

Alexandre Coelho•50
@coelhoalexandre
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Doubts

  1. For this one, would it be ideal to use Grid instead of Flexbox?
  2. How do you get the icon?
  3. I was also quite doubtful about the stylization of the button, the way it is in the design.

Dúvidas

  1. Para este, seria ideal usar Grid ao invés de Flexbox?
  2. Como consegue o icon?
  3. Também fiquei bastante dúvida na estilização do botão, a como está no design.
Code

Please log in to post a comment

Log in

Community feedback

  • Wellington Damasio•210
    @wellington-damasio

    Eaí Alexandre, beleza?

    Grid x Flexbox

    Utilizar grid ou flexbox fica a critério do desenvolvedor. Use o que for mais confortável para você. O que importa neste caso é o resultado.

    Eu, particularmente, gosto de utilizar flexbox em cards, pois o layout não é tão complexo à ponto de utilizar grid, e flexbox é mais rápido de se escrever, na minha opinião.

    Utilizando o icon

    1. Adicione o CDN do FontAwesome na tag head do seu projeto
    2. Vá até o website do FontAwesome e pesquise por 'chart'. Você irá achar o HTML necessário para adicionar o ícone no seu botão. Basta copiar e colar o HTML que estará lá.

    Sobre o design do botão

    Acho que a sua dúvida se deve ao fato de o seu card estar um pouco maior que o do design. Nada demais.

    Além de faltar o ícone do carrinho e a fonte estar um pouco menor comparada ao design, não vejo nada de errado no botão.

    Melhorando o CSS

    Meus parabéns pelo CSS, ficou organizado, responsivo e parecido com o design. Recomendo dar uma olhada no website do BEMCSS, vai te ajudar a dar bons nomes para suas classes e evitar confusão com CSS em projetos grandes.

    Espero ter ajudado

    Vlw, flw!

    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