DEV Community

Cover image for Challenge 4 - NFT preview card component - Frontend Mentor
Abhishek Baliyan
Abhishek Baliyan

Posted on

Challenge 4 - NFT preview card component - Frontend Mentor

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

NFT preview card component challenge by Frontend Mentor, Coded by Abhishek Baliyan.

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

Desktop View

Mobile View

Links

My process

Built with

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

What I learned

I learned how to Overlay icon on the image.

Useful resources

Author

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (1)

Collapse
 
muhamedkanapiya profile image
Muhamed-Kanapiya

Soon will start this challenge too, now I am working on 100 Days of UI and CSS battles, but u can see my last video (in russian) soon will be more, and frontend mentor`s too

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️