Frontend Mentor - NFT preview card component challenge

This is a solution to the NFT preview card component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • 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

links

• Solution URL
• Live Site URL

My process

At first I started this challenge feeling confident, following the success of my previous challenge, but I later hit a roadblock when I got to centering the icons to text next to it. The Icons were slightly offset for reasons I didn’t understand and I tried every way to centre an element that I knew of. I later searched on youtube for help and found that simply displaying as flex solves the problem simply! When I was done with that part, the rest was pretty fun.

Built with

• HTML (semantic)
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I learn the importance of using the right styling on the right parent element in order to achieve a certain goal. For example, using position absolute on the element and using position relative on the parent element.

Useful resources

• tsbsankara

Author

• GitHub

Thank you for viewing 😄