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

Responsive page landing using css

Elvis 220

@Elvislex

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


Open to correction and ideas for a nicer coding experience.

Community feedback

P

@Jolijn0101

Posted

Hi Elvis, congratulations on finishing this coding challenge 🎉. Your NFT preview card looks amazing! If you really want to improve it more then…

  • You can if you want change the width of the card at a screen width of 1024px. It looks a bit small compared to the card at other screen widths.

  • At a screen width of 425px the eye icon that appears while hovering over the image will come out of the center.

  • At some screen width’s the light blue overlay is slightly bigger than the img and that will show thin blue lines around the img. Maybe you could try to set the img and overlay in the same div and give it an overflow:hidden in css so they couldn’t have different sizes?

But that are really small things. Overall the card looks really good and I hope this feedback was helpful and was the kind you were seeking for.

Marked as helpful

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