Skip to content
Submitted over 2 years ago

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

Abodunde OluwaTobiloba•90
@OhTobiloba
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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

  • Suraj Raju Hadage•670
    @SurajHadagePosted over 2 years ago
    • 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
    Abodunde OluwaTobiloba•90
    @OhTobilobaPosted over 2 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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