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

• 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: GitHub Repository
• Live Site URL: URL Resultado Live

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Property layout - float
• Property layout - display

What I learned

In this project as a learning experience I learned to create an overlay over an image, using pure css

.conteiner-img{
    position: relative;
    overflow: auto;
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 3px;
    border-radius: 10px;
    width: 100%;
    height: 99%;
    background-color: hsla(178, 100%, 50%, 0.6);
    visibility: hidden;
    z-index: 1;
}

.overlay img{
    position: absolute;
    display: block;
    padding: 43%;
}

Useful resources

• style image - This helped me understand how to overlay an image.

Author

• Website - Samuel Amaro
• Frontend Mentor - @Samuel-Amaro