Skip to content
Submitted almost 2 years ago

NFT preview card component

Valentina López•190
@valentinalopezh98
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 enjoyed doing this challenge, I am happy to take any corrections or suggestions.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Valentina López! 👋

    Here are some suggestions for improvements.

    • All elements that have interactivity should be wrapped by interactive elements.
    • Alternative text for the avatar should be the name of the creator.
    • Alternative text for images should not include any words that are related to the word "image". The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
    • Set the font-family on the <body> element instead of on the <html> element.
    • Create the overlay of the Equilibrium with CSS. You can create a pseudo-element from the anchor tag. Then, use background properties to create the overlay.

    I hope this helps. 🙂

    Marked as helpful
    0
    Valentina López•190
    @valentinalopezh98Posted almost 2 years ago

    @vanzasetia Thank you for your feedback, it was really helpful! 🙂

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @valentinalopezh98

    Happy to hear that was helpful! 😊

    0
  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

    To center .card on the page using flexbox, replace the height in .contenedor with min-height: 100vh.

    There is no need to give .card a height value.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    0
    Valentina López•190
    @valentinalopezh98Posted almost 2 years ago

    @Hassiai your feedback is very helpful, thank you!

    0

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