Submitted 29 days ago

NFT Preview card component

Letícia Fernanda•120

@Leticiafbm

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Estou orgulhosa do meu código por ser responsivo e visualmente atraente. Os efeitos de hover melhoram a interação, e a estrutura é clara, facilitando a manutenção. Também me preocupei com a acessibilidade usando atributos alt nas imagens.

What challenges did you encounter, and how did you overcome them?

Um dos principais desafios que enfrentei foi aplicar o filtro na imagem ao passar o mouse.

What specific areas of your project would you like help with?

Gostaria de ajuda com o efeito na imagem no hover. Quero garantir que o filtro seja aplicado corretamente e que a imagem no meio apareça ao mesmo tempo que o filtro. Estou buscando uma maneira de sincronizar esses efeitos para que, ao passar o mouse, tanto o filtro quanto a imagem de overlay apareçam de forma fluida e harmoniosa. Qual seria a melhor abordagem para conseguir isso?

Community feedback

Bernardo Poggioni•5,510
@R3ygoskiPosted 22 days ago
Olá Letícia, parabéns pela conclusão do projeto, ele ficou muito bem-feito e está extremamente próximo do design proposto, parabéns.

Sobre sua dúvida sobre como fazer o filtro (overlay) aparecer junto com o ícone, você pode fazer isso utilizando position, como é necessário mudar muito do CSS e HTML, eu irei abrir um Issues no seu Github desse projeto e lá mostrarei o código com comentários explicando. Você pode acessa-lo aqui: Github Issues.

Outra coisa que notei, é que no seu projeto, você utilizou CSS Internal, que é quando se utiliza CSS dentro do HTML, isso não está errado, mas é uma má prática, e eu percebi que você já tinha criado um style.css, o mais recomendado é que todas as estilizações fossem colocadas dentro desse arquivo.

Sobre seu HTML, ele está bem estruturado, mas está pouco semântico, e manter uma boa semântica é importante para melhorar a acessibilidade da página. Alguns trechos que podem ser alterados para ficarem mais semântico:

section.main_container pode ser alterado para <main>, pois é aqui onde está o seu conteúdo principal, e também porque sempre depois da tag <body> é comum utilizar a tag <main>.

section.text_box pode ser alterado para <article>, pois o conteúdo aqui presente é autoexplicativo.

section.creator_box pode ser alterado para <footer>, pois utilizamos o footer sempre ao fim de um determinado conteúdo.

Ainda sobre acessibilidade, as tags alt possuem um leve erro, imagens de ícones não recebem textos descritivos, por exemplo, na sua imagem do ícone de olho, do ícone do ethereum e do relógio, você poderia utilizar um alt vazio, dessa forma: alt="".

E é isso, novamente parabéns pela conclusão do projeto, ele ficou muito bom mesmo, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida sobre o que eu disse, por favor, comente aqui ou no Issues que eu abri no seu Github, que tentarei ajudar da melhor forma possível.
0

Please log in to post a comment

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