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 with Vanilla HTML & CSS

BarteQ 160

@BarteQS

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 present my NFT card component. I'm open to any suggestions and Happy Coding!

Community feedback

Siva 210

@sivakumars

Posted

Hi, @BarteQS.

Good job on the challenge.

First part of your question: how do you align the items - the text with image?.

Try using align-items: center on the .cost and .time-left css class. It should align the text with the images.

Second part of your question: How do you place the eye icon on the image when you hover.

Just like you've used ::before pseudoelement for the overlay, use ::after pseudoelement and place the 'eye' icon as part of the ::after pseudoelement.

I hope this should solve your issues with this challenge. Let me know how it goes!

Marked as helpful

1

BarteQ 160

@BarteQS

Posted

@sivakumars Hey, thank you very much for the advice, I managed to fix everything. It was actually pretty simple, and I suppose I should've come up with it myself. Anyways, thank you again and Happy Coding!

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