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 HTML CSS

JuHnr• 150

@JuHnr

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


Hi ! Here's my first challenge. I try my best to get it looking as close as the original. I struggled a bit with the hover effect on the image. I'm not sure about the reusability of my classes and styles using the DRY principle (eg. colors). Also, I didn't find a way to choose the color of the <hr> line. Overall I spent around 4 hours and I'm pretty happy with the result for a first one. I'm looking forward to your feedback, thank you :)

Community feedback

P
Remus D. Buhaianu• 3,145

@Miculino

Posted

Hey @JuHnr

Congrats on completing this challenge! Your design looks quite nice and it's responsive as well!

Just a few suggestions based on your final solution and Github repo:

  • You have a vertical scrollbar that shouldn't be there. It's probably caused by the footer. Try using absolute positioning on the footer and or / reduce the space below the card

  • The hr line should be a different color and also more thin. Btw, you can achieve the same effect in a simpler way by just setting a border top on the .third element

  • It's a bad practice to use fixed px values for your width / height properties when building a responsive layout. Consider building your layout around the content available. You don't need height property at all in this project.

  • Look into relative units and try to implement those over px unit https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Hope this helps. Keep up the good work!

Marked as helpful

0

JuHnr• 150

@JuHnr

Posted

@Remus432 Thanks for your helpful feedback ! I'll try to apply your advices for the next project. Also I did try to set a border top on the .third element but it didn't work, so I came back to the hr line.. I would be grateful to have an example of correction for this part.

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