Design comparison
Solution retrospective
Boa tarde galera, gostaria de se possível que me dessem dois feedback: 1- Se na visão de vocês ficou bom e parecido com o exercício proposto.
2- Tive dificuldade apenas em fazer o efeito do hover na imagem, a dificuldade em si não foi nem fazer o hover, mas sim fazer a imagem do olho aparecer. Se alguém puder me dar um feedback quanto a isso, ficarei agradecido.
Community feedback
- @loopchavesPosted about 2 years ago
Iae, Bruno. O layout ficou muito bom!
Você colocou o link errado do repositório. Tá o repositório da solução do QR-Code, mas ancontrei o reposiotrio certo no seu GitHub.
Em relação a imagem do olho, você pode fazer assim no CSS em .container-imagem:
background: url('../img/icon-view.svg') no-repeat; background-position: center;
0 - @correlucasPosted about 2 years ago
👾Oi Bruno Luiz, tudo bem? Parabéns pelo desafio!
Esse tutorial aqui vai explicar exatamente essa questão do icone:
https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp
Como eu fiz esse desafio há mto tempo, nem lembro exatamente como fiz, mas acho que foi um pseudo-element. Aqui minha solução caso vc queira consuktarhttps://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX
Quando esse NFT card vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:
@media (max-width: 350px) { body .container .container-info { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } }
👋 Espero que essas dicas tenham sido úteis e continue codando!
0
Please log in to post a comment
Log in with GitHubJoin 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