NFT Preview Card Component using pure HTML and CSS
Design comparison
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.
Community feedback
- @Eric-FerolePosted almost 3 years ago
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 helpful1@WillwfPosted almost 3 years ago@Eric-Ferole Ow! Thanks for that, I didn't know how to make that gap disappear. I tried using object-fit : cover to stretch the image, but it didn't work. Thanks for the tip.
0 - @hiddehulshofPosted almost 3 years ago
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!
0@WillwfPosted almost 3 years ago@hiddehulshof That's precisely what I don't understand. On the screenshot from Frontendmentor doesn't show the text on 1 line. But on the live preview is different. And I always see the text on one line, even on chrome console where I can change to different screen sizes. My monitor is 1366x768. I have made a test right now using your tip, but changes the design if I set the width like that.
0@hiddehulshofPosted almost 3 years ago@Willwf It's different between browsers when i use chrome it is indeed on 1 line but when i'm using firefox it is on 2 lines
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