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

@SEIFSEIF4

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


Feedbacks is always appreciated. First time using box shadow any advice ?

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • Increase 📈 the width of the component to better match the FEM example.

  • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

  • The overlay hover effect is the incorrect color. You want check the file designs to get the correct color.

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Marked as helpful

1

@SEIFSEIF4

Posted

@vcarames Thanks for the feedback. I have a problem at choosing the (width, height) values, is there any software or extension with an Accuracy to match the design.

0

@VCarames

Posted

@SEIFSEIF4

The easiest way of course is to have FIGMA files, but that requires Pro membership.

What I do, since I do not have Pro membership, is that I open the design file and in the settings have "view" option set to "actual size". I then set it next to my design and compare as I go.

Marked as helpful

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