NFT Card Component Solution Using Flexbox

Hey @anoshaahmed,

Great job on your first design!

I checked your other solution too and I saw that you improved tremendously from one design to another so really good job on that!

I would encourage you to use not just colors in your :root selector but also font size, font family, font weights etc. The idea of having CSS custom properties or variables is to keep everything in one place for cleaner code and easy changes. This might not make so much sense as of now on such small projects, but when you work in big projects this is a must.

I would also encourage you to take a step away from using pixels for margins, font sizes etc. Pixels don't allow for smooth responsiveness and will lock stuff in place.

Here are some great tutorials on the different types of units:

• Are you using the right CSS units?
• CSS em and rem explained

FYI I took inspiration from your design for the image overlay so good job on that!

Hope this helps! Great start and just keep on coding! :)

Acho que o html poderia ficar melhor, mas resultado esta ótimo, fiz o meu com preguiça.

Nice work!

Thanks for participating Anosha! I am new on my coding journey so I'm only able to speak from my extremely limited experience. Once I had a majority of my solution coded, I found yours on the slack channel. As a newbie, I felt I understood your code fairly easily.

It helped me figure out how to do the hover states. I have been using The Odin Project but have not been exposed to use of the hover property. So that was extremely helpful. Thanks for posting! Happy coding!

I think this is very nice for your first project and you did it well ! be happy:)