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

NixyMcβ€’ 190

@Nix7amcm

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


Edit: I've updated my solution based on the recommendations in the feedback, and the reports. While doing this I tinkered with accessibility in general, and definitely learned a lot more in the process! I'm open to more feedback on this, whether things could be improved further, or if I've done anything wrong, particularly in the way I've added and hidden the h1 element.

The method I used to add the hover effect with the svg on the NFT logo image didn't allow the svg opacity to be 1, as it is tied to the background and therefore the opacity of that. I'd appreciate any feedback on this!

Thanks! πŸ˜ƒ

Community feedback

Abdul Khaliq πŸš€β€’ 72,660

@0xabdulkhaliq

Posted

Hello there πŸ‘‹. Congratulations on successfully completing the challenge! πŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

COMPONENT MEASUREMENTS πŸ“:

  • The min-width: 100vw property from body element and width: 100% property from main is not necessary. because they both are block level elements which will take the full width of the page by default.
  • So feel free to remove the above mentioned rules, this will help you to write efficient code and makes your code more reusable.

.

I hope you find this helpful πŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1

NixyMcβ€’ 190

@Nix7amcm

Posted

Thank you! @0xAbdulKhalid

0
Makoβ€’ 360

@MakoDoli

Posted

Great job! and I would suggest few details to make it even greater:

  1. You can freely remove <a> anchor tag from 'logo-container' and use just {cursor: pointer} property for images.
  2. There is that little stubborn horizontal scroll at the bottom. I suggest to remove {min-width: 100vw} from 'body' styling. It will make scroll disappear and body will still remain of full width. I hope you find this helpful^^ Good luck!

Marked as helpful

1

NixyMcβ€’ 190

@Nix7amcm

Posted

Thank you! @MakoDoli

1

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