Skip to content
Submitted almost 2 years ago

Mobile First | Responsive product preview card component with Flexbox

Alexandre Coelho•50
@coelhoalexandre
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Wellington Damasio•210
    @wellington-damasioPosted almost 2 years ago

    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
    1
    Alexandre Coelho•50
    @coelhoalexandrePosted almost 2 years ago

    @wellington-damasio obrigado! Seu feedback foi de grande ajuda!

    0

Please log in to post a comment

Log in with GitHub

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