Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive NFT-card design using HTML5 and CSS3(SCSS)

@OhTobiloba

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello! its me again. I just completed the NFT-card project and I had tough time figuring out how to set the two main images such that on hover, the other image beneath pops up. I got something though,. but any better approach to it? Thanks for always.

Community feedback

@SurajHadage

Posted

  • Always use <main> tag for single component design.
  • Always use <h1> tag in every webpage, you can change font-size to adjust.
  • Use Paint app to know accurate dimensions of design.

You can take <figure> tag for image. Inside the <figure> tag take two <img> tag. First would be hero image and second will be icon that need to be set display: none.

On hover icon has display: block;

0

@OhTobiloba

Posted

Hello! @SurajHadage. Thanks so much for the eye opening

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord