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 component using SASS

#sass/scss
Dodeun 250

@Dodeun

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


I think I should name my color variables based on their importance / purpose instead of giving them a name related to the color used.

Community feedback

Lucas 👾 104,560

@correlucas

Posted

👾 Hello Dodeun, congratulations for you solution!

I agree with you about the colors name variable, I don't use by force the names given in the styleguide.me I try to keep it as simple as possible.

Your solution seems great, but even if is responsive there's a little issue when you stretch the card container, the profile section starts to get inside the container and get hidden. This is due the overflow: hidden; you've applied to the .card.

A little tip about box-shadows, your box-shadow is too much strong and dark, try to use ever box-shadows smooth using blur and opacity values. This is the correct value to the box-shadow: box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

You can use this tools to generate your box-shadows without worries, then just drop the code: https://cssgenerator.org/box-shadow-css-generator.html

Hope it helps, happy coding!

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