Submitted 10 months ago

Responsive NFT preview card

DeadvLoper• 70

@DeadvLoper

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

It was fun and challenging, especially the part where I had to add a hover effect over the image which really got me stuck. However, I revised my knowledge and found that it was actually straightforward to do it. By the way, it was fun and I would appreciate any suggestions regarding bad practices or code readability and vice-versa.

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 10 months ago

Hello there 👋. Good job on completing the challenge !

Your design looks great! Just a small suggestion: when you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the person in an <a href="#"> tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the creator. The same concept applies to the image; consider making it a clickable link for consistency.

Happy coding!

Marked as helpful

DeadvLoper• 70

@DeadvLoper

Posted 10 months ago

@MelvinAguilar Thank you so much for your wonderful tip. I will add this right now!

Daniel 🛸• 44,230

@danielmrz-dev

Posted 10 months ago

I had quite a hard time with this hover effect myself! Simple but tricky!

You did a great job!

DeadvLoper• 70

@DeadvLoper

Posted 10 months ago

@danielmrz-dev Ya, it was cool and I learned a lot of stuff by just building a single card component.

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