Skip to content
Submitted over 2 years ago

NFT Preview Card Component

JimiIT92•70
@JimiIT92
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

  • How did you managed the image overlay? Did you use some cool and/or advanced CSS tricks?

  • Did you use SASS as well?

  • How did you properly placed the image inside the card?

  • Is there a way to properly center and resize the card, no matter the screen size, without using the max-width css property?

Community feedback

  • Mohamed Khaled•160
    @mohamedkhaled4053Posted over 2 years ago

    for the overlay, you can just make the container element flex in your case make nft-image flex with display: flex

    for me, I used the ::before pseudoelement for the overlay

    Marked as helpful
    1

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