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 using HTML and CSS

@krystonen

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


When I got stuck with the hover state part of this challenge, I started to look at other people's solutions (on the slack channel) and I was surprised to see that many solutions didn't implement the hover state properly or at all. I would be curious to see how others solved this problem.

Community feedback

@sachinkhatrilin

Posted

Great job!

Marked as helpful

0

@krystonen

Posted

@sachinkhatrilin Thank you!

0

@krystonen

Posted

I actually found a great youtube video about before after pseudo elements plus hover state: https://www.youtube.com/watch?v=djbtPnNmc0I I thought this may help someone else with this task.

0

@KandalaSreekar

Posted

Hello madam, My solution:- https://objective-shirley-fc4abe.netlify.app/

I was able to get the hover state to not overflow, but not able to get the white eye to be on top.

0
ahmed 70

@ahmedgoddi

Posted

Great job my solution: https://www.frontendmentor.io/solutions/csshtml-3_HICEIkE

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