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

NFT Preview card component

opolis8 330

@opolis8

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


any suggestions and comments are much appreciated

Community feedback

Hariom 30

@DevHarry066

Posted

You can use the opacity: 0.2 to the original image when hover to it to show it along with hover image

0
Azzumar 340

@Azzumarithm

Posted

I've looked into your code, here are some suggestions that you can try out.

1.Clock image: Make width and height of clock image the same.

2.Make the image and text appear on the same line, centered vertically, and aligned beside each other.:

HTML:

<div class="icons">
        <div class="img-text ETH">
              <img class="etherium_img"src="images/icon-ethereum.svg"/>
              <p>0.041 ETH</p>
        </div>
        <div class ="img-text clock">
              <img class="clock_img" src="images/icon-clock.svg" alt="" />  
              <p>3 days left</p>
        </div>
</div>

CSS:

.img-text{
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}

0

hitmorecode 6,230

@hitmorecode

Posted

@Azzumarithm it's best not to tell/ask people to to mark your comments as helpful. Doing so can get you banned.

0
Azzumar 340

@Azzumarithm

Posted

@hitmorecode thanks for the information. I didn't know that.

0
hitmorecode 6,230

@hitmorecode

Posted

@Azzumarithm you can read it in the community guidelines in the section Please don't

1

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