Frontend Mentor - NFT preview card component solution

This is a solution to the NFT preview card component challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

Font link: https://fonts.googleapis.com/css2?family=Outfit&display=swap Live site link: https://xtrum.github.io/NFT-preview-card-component-solution/

Tools

• HTML
• CSS (flex)

Font details

• Font-family: 'OutFit';
• Font- size: 18px;
• Font-weight: 300, 400, 600

Colors

Primary

• Soft blue: hsl(215, 51%, 70%)
• Cyan: hsl(178, 100%, 50%)

Neutral

• Very dark blue (main BG): hsl(217, 54%, 11%)
• Very dark blue (card BG): hsl(216, 50%, 16%)
• Very dark blue (line): hsl(215, 32%, 27%)
• White: hsl(0, 0%, 100%)

The Challenge

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

What i learnt

• I discover how to nest two "div" element with different background and make one appear only with it is hovered on
• I also get hold of a better use of flexbox(align-items especially), display & gap

Author

• Webstie - https://xtrum.github.io/NFT-preview-card-component-solution/
• Frontend Mentor - @Xtrum
• Twitter - @hoobhejay