Skip to content
Submitted over 2 years ago

nft preview card

Arjun J V•80
@Arjunjv
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

Challenges faced: *Aligning text with respect to the icons *Not able to figure out the solution for hover on eye image(so changed the opacity on hover in my solution). If someone can explain and give the solution for that will be helpful *vertical alignment of the card

Would be helpful if someone provides any resource from which i can learn about aligning elements in CSS.

Community feedback

  • Yash Kadam•280
    @yash-278Posted over 2 years ago

    Great work ARJUN 👏 The card design is perfect.

    Now on to the problems you faced:

    • For vertical alignment of icon you can refer to vertical-align CSS property. MDN Link
    • For centering the card, now this is a tricky one & more of a hack than a solution, but I personally use this.
    .centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

    This works almost everytime, mostly for single element stuff.

    • Lastly for icon overlay, it's complicated to explain it here, but here's a resource for solution W3Schools

    Overall nice solution and try searching wherever you're stuck, because searching is a also a important aspect of code.

    Happy Coding! Hope you found this useful 🎉

    Marked as helpful
    0
    Arjun J V•80
    @ArjunjvPosted over 2 years ago

    @yash-278 Thank you yash

    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