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-react

#react#vite

@kodaicoder

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


-Got some time to figure it out how to resizing a avatar image (may be have better solution) -Got some time to figure it out how to create overlay image on NFT image (may be have better solution)

Community feedback

P

@tarasis

Posted

Hi Nutchapon, congratulations on completing the challenge 🎊 Looks good, and works for both desktop and mobile. As I don't really know react I can't comment on the build of your solution.

Be careful with the CSS, for instance the root doesn't need the max-width: 1440. The only thing that needs a max-width would be the card itself.

Also for your link hover's you used color: hsl(178, 100%, 50%) !important;. Don't use !important if at all possible. Its a last resort. As it is, your hover solution for a tags works without it.

The text-rendering: optimizeLegibility; is new to me, so cheers for that. However as far as I'm aware font-weight: 300, 400, 600; doesn't mean anything. The weights are imported when you import the font. You then just use the font-weight you need for a particular block of text (like the heading being 600) https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Marked as helpful

0

@kodaicoder

Posted

@tarasis , about !important I forgot to removing it out , so shame on me :( and text-rendering: optimizeLegibility; it is coming on I create a project via Vite ,I didn't removing it so far.

but thanks a lot on max-width and font-weight I will keep that comment and improving it in next project :)

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