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 card component using flexbox and pseudo classes

@moheb2000

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


I reduced opacity for cyan active state of image. I want to set full opacity for eye viewer in center of image but I can't. Any advice?

Community feedback

Mubeen Shaikhβ€’ 160

@MubeenAhmadShaikh

Posted

Good work MOHAMMAD EBRAHIMI,

You can add your svg icon z-index of 2 it will be then displayed on top

Hope this helps you :)

Marked as helpful

0

@moheb2000

Posted

@MubeenAhmadShaikh Wow I didn't notice that when I was coding! Thank you

1

Account Deleted

Hi there πŸ‘‹

Congratulate on finishing your project πŸŽ‰. You did a great job πŸ’‘

I give some suggestions to help you take your project design to the next level πŸ“ˆπŸ˜‰

  • I think you should center the card so to do this add code below to body in CSS
min-height: 100vh;
display: grid;
place-items: center;
  • About your question: remove the opecity from .card__cover__hover, instead, change its background to background: hsl(178deg 100% 50% / 50%);

Happy coding β˜•

Maqsud

Marked as helpful

0

@moheb2000

Posted

@maqsudtolipov Really thanks!

1
Hexerβ€’ 3,660

@Phalcin

Posted

Great work overall man. Keep it up

Marked as helpful

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