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_Card solution

AndriiIladiiβ€’ 80

@AndriiIladii

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


Had some problems with image hover, if anyone have better solution for this please let me know =) I will accept any comments. I'm newbie that just trying to learn =)

Community feedback

Ferβ€’ 3,970

@fernandolapaz

Posted

Hi πŸ‘‹,

  • Regarding the problems that you say you had with the image hover, it seems that you solved it very well : ). That's a good way to do it.

But perhaps some of this may interest you:

  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.
  • You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the font-size.

I hope it’s useful : )

Regards,

Marked as helpful

1

AndriiIladiiβ€’ 80

@AndriiIladii

Posted

@fernandolapaz Thanks a lot for advice. I really appreciate it=)

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