Frontend Mentor - NFT preview card component solution

Hi there,

This is the solution for my first Frontend Mentor challenge: NFT preview card component challenge

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• 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

• Live Site URL on Netlify
• Sourcecode on Github
• Solution on Frontend Mentor

My process

Built with

• Semantic HTML5 markup
• BEM Methodology
• Flexbox
• CSS custom properties

What I learned

At first, I put the clock and Etherium icons in the markup, which created a mess of CSS classes. I even experimented with separating the meta-information bar into a separate component from a BEM standpoint. When working on the hover effect with the eye icon, I immediately decided to put it in a pseudo-element because it has no real semantic meaning. While taking a break, I realised that this might be the better approach for the other icons, too.

Author

• Frontend Mentor - @Jak-Ch-ll
• Github - @Jak-Ch-ll
• linkedin - Jakob Chill