NFT card with hover effect

Hello Tinker :)

Nice job completing the challenge successfully! Suggestions:

• It looks like the span texts are broken into two lines, but in the design they are all in the same line. A quick fix would be using this: white-space: nowrap; for .num-class .eth, .days (i showed this example to make you aware of this property)

but there is even a better way, just use align-items: center;

• .num-class .eth, .days { display: flex; align-items: center; }

Why better than white-space in this case? Cuz if you notice, while it solves line break, the icons seem to be stretched in height a bit, this is because flexbox by default stretches it. align-items: center; not only fixes the line break but also fixes the stretching of the icons.

And no, adding gap: 5px as suggested, won't fix it because that is not the issue.

• Bonus TIP: You can add a transition like transition: all .4s ease; to .equil-img make the overlay appear smoothly.

Hope you find this feedback helpful!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component needs a bit of padding so add some padding to the main element.

• And, the items inside .eth & .days are need to placed side by side but here they are stacked upon each other. We can fix it by following snippet.

.eth, .days {
    display: flex;
    gap: 5px;
}

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!