Frontend Mentor - NFT preview card component solution

Table of contents

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

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/nft-preview-card-component-XpK4mmXj7k
• Live Site URL: https://bhateshkhairnar.github.io/NFT-Preview-Card-Component/03-NFT.html

My process

Built with

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

What I learned

• How To add linear-gradient using hover effect on Image.
• checking out The Markdown Guide to learn more.

Useful resources

• Resource 1 - This website helped me for the understanding of image overlay. I really liked this pattern and will use it going forward.
• Resource 2 - This is an amazing article that helped me finally understand alignment. I'd recommend it to anyone still learning this concept.

Author

• Website - Bhatesh Khairnar
• Frontend Mentor - @BhateshKhairnar