Skip to content
Submitted over 1 year ago

NFT preview card component - HTML and CSS

Clémence Tafforeau•110
@ClemenceTafforeau
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

  • I really struggled with combining overlaid elements and the active pseudo-class. I assume there is an easier way to get that result than what I did. Any tips ?

Community feedback

  • Luka Glonti•3,440
    @lack21Posted over 1 year ago

    Good job 👍, but I have a suggestion!

    • Replace following styles in the .child-1
    {
  left: 40%;
  top: 40%;
}

    to these

    {
  left: calc(50% - 24px);
  top: calc(50% - 24px);
}

    Like this eye icon will be centered!

    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