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

• The challenge
• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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://github.com/CodinBabe/NFT-Recreate
• Live Site URL: https://codinbabe.github.io/NFT-Recreate/

My process

Nothing much here, trust me. I put all my text and img in a container, then style my container to be at the center of the page. Added a main before the container with a margin-top to push the container down a bit. Then styling other things come easily. Major thing here, was displaying flex the (eth icon and text) with the (clock icon and text).

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Mobile-first workflow

What I learned

Really struggled with the equilibrium hover effect that display the view icon😥, glad i could see the end of it.

Continued development

I will continue to learn, unlearn and relearn till web design become a natural thing.

Useful resources

• Example resource 1 - This helped me with the hover effect of the Equilibrum. I really liked this pattern and will use it going forward.

Author

• Website - Add your name here
• Frontend Mentor - @teboola
• Twitter - @tozim_bakes