htchristie / nft-preview-card

Solution to the NFT preview card component challenge on Frontend Mentor.

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
  • Continued development
• 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-using-flexbox-dpVLNo2BV
• Live Site URL: https://nft-preview-card-71z.pages.dev/

My process

Built with

• CSS custom properties
• Flexbox

What I learned

Through this challenge I learned how to use a ::before pseudo-element to create a custom hover state, which was something entirely new for me.

.card-img::before {
  cursor: pointer;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/images/icon-view.svg) no-repeat center;
  background-color: hsla(178, 100%, 50%, 0.5);
  border-radius: 5px;
  opacity: 0;
}

.card-img:hover::before {
  opacity: 1;
  transition: opacity .15s ease-in-out;
}

Continued development

I had some trouble with the responsive design - I didn't quite know what I was doing, even though I had done some research beforehand. I still have a long way to go and a lot to study.

Author

• LinkedIn: Cristyane Tamioso
• Frontend Mentor: @htchristie