NFT Preview Card Component using pure HTML and CSS

Solution retrospective
This is my first solution submitted here. It was very entertaining and it took less time then I was imagining, but I had a little bit of trouble to create the overlay with the eye icon on top of the image. I appreciate feedback on whatever you think is necessary to be improved. Do my tags on HTML need changes to be more accessible? Did I forget something that could make development and maintenance easier? What about the use of rem to resize the page on different screens, is there another better and faster ways? Anything you might think that is useful for me to know, please be free to share. Thanks, in advance.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Eric-Ferole
Hi ! Great job. Add a display : block on your image to make the gap at the bottom of your image when you hover it.
Keep up !
Marked as helpful - @hiddehulshof
Nicely done,
You should add width: 50%; to your .remaining-time and .nft-value classes this way the text will be on 1 line like in the design!
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