Skip to content
Submitted almost 3 years ago

NFT preview HTML CSS

JuHnr•150
@JuHnr
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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

  • Remus D. Buhaianu•3,125
    @MiculinoPosted almost 3 years ago

    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
    @JuHnrPosted almost 3 years ago

    @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

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