Skip to content
Submitted over 1 year ago

Summary Component with Flexbox and custom properties

Carlos Chaves•260
@sircarloschaves
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had difficulty with how to make the image part of my card, I was unsure whether I should use an <img> tag or a <div> with a background-image.

Code

Please log in to post a comment

Log in

Community feedback

  • P. Ricardo•2,370
    @pRicard0

    Projeto ficou visualmente perfeito, só tem algumas coisas que dá para melhorar.

    • Você pode adicionar um transition: 200ms para a classe "payment-btn" para deixar a mudança de cor mais fluída.
    • É bom adicionar dois atributos para os svg... aria-hidden="true" e focusable="false. Aria hidden é para impedir que leitores tentem ler a imagem que é apenas meramente ilustrativa como o ícone de música e focusable é para impedir que o componente possa ser focado durante a navegação pelo o teclado.

    Sobre a questão da div e img, você pode criar uma tag div e uma tag img dentro da div. No final de tudo, tanto faz, dá na mesma.

    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