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-main

#sass/scss

@momenkamal221

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


Is my way of implementing the active state to the image is ideal?

Community feedback

@adityas24

Posted

Great Job Kamal!

One mistake i saw in your code is that you are using "ids" everywhere instead of "classes". I know the CSS will still work fine and the web page would look the same. But in real world it is a very bad practice and mostly classes are used for styling purpose. Biggest advantage of classes is reusability of code.

Ids have some very specific use cases. They are very much used when JavaScript comes into action. Google it and you will get more clarity.

So get into habit of writing classes from very beginning itself. All the best 🙂👍

Marked as helpful

2

@Brisa-Codes

Posted

I like how to did the transition on image hover. Nice work. However, the icons are not aligned to the center. You need to add it

0
P
Jessica 880

@perezjprz19

Posted

Your hover effect on the image worked fine for me as well. I would just recommend going through and clearing your html/accessibility report.

0

Account Deleted

It is really not, because it seems if i add a different width to the main wrapper the image doesnt resize.

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