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.

Table of contents

• Frontend Mentor - NFT preview card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

The challenge

Users should be able to:

Screenshot

Desktop

Mobile

Links

• Solution URL: GitHub repository
• Live Site URL: My Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Bootstrap

What I learned

I learned the opacity property and how we can give it that style of something sticking out when you move the mouse.

.view {
    margin-top: 125px;
    opacity: 0%;
}

.view:hover {
    opacity: 100%;
}

.hidden {
    text-align: center;
    position: absolute;
    background-color: hsla(178, 100%, 50%, 0);
    border-radius: 25px;
    width: 300px;
    height: 300PX;
    margin: 20px 15px 0;
    top: 0px;
    left: 10px;
}

.hidden:hover {
    background-color: hsla(178, 100%, 50%, 0.3);
}

Note: Delete this note and the content within this section and replace with your own learnings.

Continued development

Improve the design of cards and learn about Bootstrap classes

Author

• Frontend Mentor - @Juan13052001