Submitted 7 months ago

Responsive NFT preview card usig HTML5 and CSS3

Nikola Petkovic• 90

@nikolapetkovicdev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

-There were no major issues with this task, except for the overlay on the cover image. Prior to this, I didn't know how to do it, but with a bit more research, I managed to figure it out.

-There were moments when I thought I couldn't do it and considered giving up. However, it's a good thing I didn't. That's why I love coding. Every day, you push your boundaries and enhance your knowledge. Because you can lose everything, but knowledge is something no one can take away from you.

-Please let me know if there are any mistakes and what I could have done better. Happy coding, everyone!

Community feedback

Abere Fejiro• 470

@Fejiro001

Posted 7 months ago

Very good solution, love the little animation when hovering over the image. Some things I will love to point out are:

The duration of the animation I believe should be shorter
Change the cursor to pointer for the image and the two texts that change color when hovering
Surround the main element with margin of maybe about 1rem so it looks pleasing to the eye
I ran lighthouse on it and it is accessible, but the performance needs improvement

Keep up the good work !

Marked as helpful

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