Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card Component - Solution

Joshua 40

@jmzarate09

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'll appreciate any feedback. Thank you.

Community feedback

@nenadmne

Posted

Looks like a nice and simple solution.

Only thing i would add is that icon position (eye in the center of equilibrium photo).

 <div class="icon-img">
 <img src="images/icon-view.svg" alt="icon-view">
 </div> 

Try to either use z-index or pseudo ::before to fix its background color, as it should be white on hover.

Happy coding =)

Marked as helpful

0

Joshua 40

@jmzarate09

Posted

@nenadmne Thank you so much for the tip/advice :)

0
Angel M 370

@csmurillo

Posted

Hello Joshua, Great job in creating this NFT card component. I think their is not much area for improvement for this project but i do suggest the following:

1. I noticed that you wrap the whole card component inside an section tag, but a more appropriate tag would be the <article></article>. Article tag are used to wrap card components.Article Tag

2. I think you should add the style cursor: pointer; to the class .overlay of the image.

Marked as helpful

0

Joshua 40

@jmzarate09

Posted

@csmurillo Thank you so much for the tip/advice :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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