Submitted over 2 years ago

Responsive NFT Preview Card

Daniel Barbosa• 250

@Danielhu3

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I've do it with JavaScript, someone knows how to show/hide the eye icon without JS? Help me if you know :)

Community feedback

Anosha Ahmed• 9,300

@anoshaahmed

Posted over 2 years ago

Hey good job on this challenge! Your report above shows a few issues. You can fix them by

wrap everything in your body in <main> ... OR use semantic tags! .... you can also give role="" to the direct children of your <body> but that's a little frowned upon... Click here to read more
have at least one <h1> in your code

Marked as helpful

Daniel Barbosa• 250

@Danielhu3

Posted over 2 years ago

@anoshaahmed Thanks for your help, i will study about that role attribute later :)

Web Wizard• 5,690

@rsrclab

Posted over 2 years ago

Hi, @Danielhu3 ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

Here are some of the tips I like to provide.

I suggest you to try transition on hoverable elements like image, heading and creator name.
Please try BEM for naming element classes. It will help you a lot on bigger projects.
Image overlay is missing border-radius.

https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~

Marked as helpful

Daniel Barbosa• 250

@Danielhu3

Posted over 2 years ago

@tymren608 thanks for you help, i made some changes with your tips.

Please log in to post a comment

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