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 Card with Vanila JS

P
rogozinds 180

@rogozinds

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@robcrock

Posted

Looks great. The only feedback I have on this one is to work on improving the alignment between the design spec of the text and your solution.

Marked as helpful

0

P
rogozinds 180

@rogozinds

Posted

@robcrock Thank you! I made some adjustments about the font. With these challenges I always struggle with pixel perfect sizes and position. I use flexbox to set the card element in the center of the screen, but apparently the reference screenshot has a bit different size a maybe small margin on the body or html? I set width and height of the card from Figma, but it's still different. I'm curios about your experience, how do you figure out exact values for size and width/height?

0
P

@robcrock

Posted

@rogozinds I inspect Figma as well. In Figma you'll see the height and width on the right hand side of the screen. All of the properties should be listed there for you.

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