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

responsive card NFT

Maxwell 50

@Maxwell-Santos

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


This project was actually quite easy, I don't think I'm a beginner.

Community feedback

@snehamoybag

Posted

I think you forgot to add the image hover effect.. otherwise good job

0

Maxwell 50

@Maxwell-Santos

Posted

@snehamoybag thanks! the hover effect was it to scale up the image? becuse I couldn't think of anything..

0

@snehamoybag

Posted

@Maxwell-Santos i used ::before and ::after psuedo elements to do it. I set the image's positioning as relative then set the two psuedo elements as absolute and placed them on top the image using margin top 0 (::before with the green background and ::after with eye icon background) and set their opacity as 0 when not hovered and opacity as 1 when hovered 😅

Marked as helpful

0

@r-mayer

Posted

@Maxwell-Santos the hover effect was to add a cyan background in front of the image, a little bit transparent and with a little icon of an eye in the center of it. There is also two links in the card (one is in the name "Equilibrium" e other is in the name of the user) that has a hover effect too.

You can see the desired final result inside the folder "design", which comes with the rest of the files of the projects. Is an image with the name 'active-status.jpg'.

When I started this project I didn't see that either :)

Marked as helpful

0
Maxwell 50

@Maxwell-Santos

Posted

@snehamoybag very simple looll i love it, thanks

0
Maxwell 50

@Maxwell-Santos

Posted

@r-mayer this was my first project here, i like this site, thanks for the help :)

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