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
  • 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: Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS
• Bootstrap
• CSS Grid
• Mobile-first workflow
• Sass

What I learned

For this project, I wanted to rely more on Bootstrap's spacing utilities, which helped remove the uncertainty of which properties to use.

<h2 class="mx-3 pb-auto"><span class="heading">Equilibrium #3429</span></h2>

I also used the mix-blend-mode to bring out the view icon on the hover state.

.overlay:hover {
  opacity: 70%;
  mix-blend-mode: screen;
}

Continued development

One area I had trouble with was applying a hover effect to the image. I looked up many different ways to apply an overlapping color to an image, but none of them achieved the effect that I was looking for. So I ended up just using the mix-blend-mode CSS property to create a similar effect.

Useful resources

• Bootstrap Spacing - I relied more on using Bootstrap's spacing utilities to apply proper spacing to each element.

Author

• Frontend Mentor - @blordeus
• Twitter - @blordeus