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

Tejaswini Labadeβ€’ 150

@TejaswiniLabade

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


Hi, after the completion of my first frontend mentor challenge, I was very excited to finish the second challenge as well, so here is my solution to NFT preview card component. Any feedback will be really appreciated.

Community feedback

P
Remus D. Buhaianuβ€’ 3,145

@Miculino

Posted

Hey @TejaswiniLabade, good job on completing this challenge!

I'm impressed with how similar to the original design your final solution looks - well done!

As @denielden already suggested, you can consider adding the transition property for your hover effects, mainly the image hover effect as it can give it that extra nice detail ;)

Had a look at your Github repo and you should definitely consider looking into BEM methodology. Also, some parts of your code require a bit of formatting so they can be more readable.

Overall, well done. Keep up the good work!

Marked as helpful

1
Travolgi πŸ•β€’ 31,500

@denielden

Posted

Hi Tejaswini, great work!

You can remove the margins from the .card class because they are superfluous ... flexbox already has it centered.

Try to use transition property to all element with :hover state ;)

Happy coding!

Marked as helpful

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