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

Mert 110

@geenarr

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

@DigitaleWeltLibrary

Posted

Hey, good solution.

Small improvement:

  • Give the time specification a smaller width to avoid overflow
  • With transition you can give the hovered elements an effect

improved CSS:

.container{
    display: grid;
    place-items: center;
    min-height: 100dvh;
}

.card-time{
    width: max-content;
}

h3, .card-creation div > span{
   transition: all .75s;
}

You forgot the hover effect on the image. A little tip: use background-image for it

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