Skip to content
Submitted almost 2 years ago

NFT Card -> HTML, CSS with cool animations

David•8,000
@DavidMorgade
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

NFT Card challenge

  • This challenge was done just with basic HTML and CSS
  • Added some cool animations to the NFT (rotating on hover)
  • Added glowing effect on the NFT

This challenge was great to practice a lot with pseudoelements and position: absolute

As always any feedback is very welcome!

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlinePosted almost 2 years ago

    Wow this looks lit🤩

    1
  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The NFT alt tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The profile image Alt Tag needs to be improved. It should only state the following; “Headshot of -person’s full name-“
    • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an anchor tags. The anchor tag will allow users to click on content and have them directed to another part of your site.

    More Info:📚

    MDN The Anchor element

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🎄🎁

    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