NFT Card solution with HTML, SVGs and CSS using Flexbox for alignment

The hardest part of the challenge was making the image container turn cyan and align the svg view icon right at the center when activated with the hover pseudo class, so i had to learn how to make an overlay class, be not visible and then turn visible only when hovered.

The shadows around the card were sorta tricky to think about so i had to learn more about the box-shadow property.

Used a lot of flexbox to align elements vertically and horizontally.

I could've used better css practices like using rem's and em's for padding margin or font instead of absolute units like pixels.

If anyone could help me with any suggestion i'd appreciate it 🤭