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
  • 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: (https://megathilmi.github.io/nft-preview-card-component-main/)
• Live Site URL:(https://megathilmi.github.io/nft-preview-card-component-main/)

My process

Built with

• HTML
• CSS

What I learned

Throughout this challenge, I have learned about pseudoelements, which are new to me. I have been using pseudoelements in previous projects but still failed. However, I am successfully implementing a pseudoelement in this challenge.

Useful resources

• resource 1 - CSS background property
• resource 2 - How to make a icon and text inline
• resource 3 - Help me to resize the image
• resource 4 - Really help me on how to center the image
• resource 5 - How to force the text to be in one line
• resource 6 - Help me on how to make a horizontal line
• resource 7 - Tutorial on how to make a border to the image
• resource 8 - really help me on putting a url in CSS
• resource 9 - Help to adjust the size of background.
• resource 10 - tutorial on pseudoelement
• resource 11 - how to display an element on hover

Author

• Frontend Mentor - @MegatHilmi