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
  • Links
• My process
  • Built with
  • Continued development
• Author

Links

• Solution URL: https://www.frontendmentor.io/solutions/using-react-with-pure-css-X7xehhdrni
• Live Site URL: https://akaigyouhou.github.io/frontend-mentor-nft-preview-card-component-main/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

Continued development

There are two problems I've met. 1, Is it right to first determine the "width" and "height" of the "card", then add the "padding" or "margin" to flow the inner content in the right position? 2, To make the eye icon in the middle of the Equilibrium picture and also the cyan color layer when hovering the picture. I use two layer. Because the first one should not be opacity while the second one should be half opacity. Maybe there are better solution.

Author

• Frontend Mentor - @akaigyouhou
• Twitter - @akaigyouhou