Skip to content
Submitted over 3 years ago

NFT Card Component

angular
Athira•130
@athirasarman
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all, Here is my NFT Preview Card Component project done in angular. Waiting for your valuable feedback on this.

Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Praveen Perumal•740
    @solvedbiscuit71

    Hi Athira, Good work on your first angular project in frontendmentor!

    I have some tips to improve your code,

    • wrap everything inside the body with a <main> tag to avoid accessibility issue.
    • use <div> tag instead of <span> for element with class "detail","eth","time"
    • use display: flex with align-items: center in "eth","time" and footer to vertically center the image and text.
    • add the hover state for <span class="name"> element.
    • add min-height: 100vh; in <main> tag to vertically center the card.

    Addressing the use <div> instead of <span>, we generally use <span> as a "leaf node" means that it doesn't have other childNode except the textNode. it's a best practice

    Hopefully you find these suggestion helpful 😊

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