Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product showing page using HTML and CSS

@lucas-merino-dev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

Dicas HTML

  • É bom utilizar tag mais semânticas. Ao invés de utilizar a tag p para os preços, você pode utilizar <em> que significa emphasis. Você usa em para quando você tem um texto onde você quer que ele tenha ênfase, que se enquadra no contexto do preço verde. Você usa a tag <s> que significa strikethrough que é para texto que não são mais relevantes. A tag s vem por padrão com a estilização do texto riscado no meio, tachado.
  • A foto do perfume não é meramente ilustrativa então ela exige que tenha um atributo alt para dizer que existe uma foto ali e seria bom que você descrevesse o que seria essa foto.

Dicas CSS

  • Você pode adicionar um paradinha a mais no hover do botão. Coloque cursor: pointer; para que ele pareça ser um componente clicavel.
  • Você pode deixar a mudança de cor mais fluida adicionando um transition na classe botão. transition: 200ms; ( recomendo é +- 150ms até 300ms mas fica do seu gosto )

Dica geral

  • Se quiser que outras pessoas cometem sobre seu projeto, deixe um comentário, o minimo que seja pois se estiver vazio, não irá aparecer que você está solicitando feedback ( posso estar so fazendo um papel de bobo aqui dando dica atoa mas tanto faz )

Marked as helpful

1

@lucas-merino-dev

Posted

Salve Ricardo, tudo bem?

Valeu pela review do código! Apesar de ser um que eu me orgulhei bastante por ter feito sozinho, sabia que tinha muitas partes a serem melhoradas, e pretendo arrumá-las logo mais, deixando o código mais semântico e organizado.

Novamente, obrigado pela review e seu tempo ao dar essas dicas! :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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