Design comparison
SolutionDesign
Solution retrospective
The development of the NFT card, written in HTML and CSS
Community feedback
- @DigitaleWeltLibraryPosted 12 months ago
Hey good solution.
Small suggestions for improvement:
- the
min function
always uses the smaller value and this gives you a distance when viewing the mobile phone - with
object-fit
you can prevent your images from distorting
The improved CSS:
.card-nft{ width: min(375px, 90dvw); } img{ object-fit: cover; } /* possible solution for the turquoise background: */ .card-nft-header { position: relative; transition: .75s all; } .card-nft-header::before { width: 100%; background: var(--primary-cyan); top: 1px; height: 100%; position: absolute; border-radius: 1rem; content: ""; opacity: 0; } .card-nft-header:hover::before { opacity: 1; transition: .75s all; }
Happy Coding 😉
Marked as helpful0@mlaferreiraPosted 12 months ago@DigitaleWeltLibrary mutio obrigado meu amigo value mesmo pela dica, não tinha conhecimento desse tecnica, vou aplicar agora mesmo
0 - the
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