Submitted over 1 year ago

NFT preview card component

Valentina López• 190

@valentinalopezh98

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

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,795

@vanzasetia

Posted over 1 year 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

Valentina López• 190

@valentinalopezh98

Posted over 1 year ago

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

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

@valentinalopezh98

Happy to hear that was helpful! 😊

Hassia Issah• 50,670

@Hassiai

Posted over 1 year 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

Valentina López• 190

@valentinalopezh98

Posted over 1 year ago

@Hassiai your feedback is very helpful, thank you!

Please log in to post a comment

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