Skip to content

README.md

Latest commit

 

History

History
88 lines (61 loc) · 2.57 KB

README.md

File metadata and controls

88 lines (61 loc) · 2.57 KB

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

Users should be able to:

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

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Google fonts
  • Font awesome icons

What I learned

I had a slightly difficult time creating the overlay hover effect. I initially used the ::after pseudo element; however, I couldn't get it to only appear once hovered. I played with the display and nested propertie, but it still didn't work. I really didn't want to create another div just for the overlay, but I ended up doing that. The opacity and alpha channel was a nice final touch. I probably could've made the hover effect work if I had applied opacity and alpha channel with the ::after pseud oelement.

see below for code snippets:

.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    background: hsla(178, 100%, 50%, 0.5);
    padding: 110px;
    opacity: 0;
    transition: all 0.25s ease;
}

.overlay:hover {
    opacity: 1;
    cursor: pointer;
}

Continued development

I am currently learning javascript. For now, I will continue my classes on Javasript, while perfecting my html and css skills. I'll move up from building components to building full static sites.

Useful resources

  • [Stack Overflow]
  • [MDN]

Author

Acknowledgments

Colt Steel's web developer bootcamp on Udemy. This is where I took my classes.