NFT preview card component solution

Table of contents

• Overview
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Basic challenge to improve CSS and Bootstrap knowledge.

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/nft-card-component-GtBY4E3Ns
• Live Site URL: https://fdsantos300.github.io/NFT-Card/

Built with

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

What I learned

• Set optimal layout depending on device's screen size;
• Style hover states for interactive elements.

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

.img-container:hover .overlay-img {
  opacity: 1;
}

.card-title:hover{
  cursor: pointer;
  color: #00fff7;
}

Continued development

Still improving my CSS knowledge and already learning Java Script.

Useful resources

• Bootstrap - Bootstrap cards.
• w3schools - This is an amazing documentation source for HTML, CSS and Java Script.

Author

• Francisco Gonzalez
• Frontend Mentor - @fdsantos300

Acknowledgments

This work and content is for learning purpose.