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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Users should be able to:

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

• Solution URL: NFT preview card component solution using basic CSS and HTML
• Live Site URL: nft-preview-card-component

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

In this project, I learned about box-shadow and how to add shadow to different elements. moreover, I learned about hsl colors (hue, saturation and lightness)

To see how you can add code snippets, see below:

.proud-of-this-css {
  color: hsl(0, 0%, 100%);
  color: hsl(215, 51%, 70%);
  color: hsl(178, 100%, 50%);
  background-color: hsl(217, 54%, 11%);
}

• Selevting the right color from image - This helped me to choose the right color for my web page based on the provided image design, it also provides the ability to convert to different color formats like RGB, HSL and HSV.
• Create shadow-box - This helped me when creating shadow-box for different elements

• Git Hub - Amouri Amine Abdeldjalil
• Frontend Mentor - @DJALLIL05
• Twitter - @AmouriAbdeldj