Skip to content
Submitted almost 3 years ago

Nft preview card component using HTML/CSS

Elyas•300
@Elyasthr
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

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello Elyasthr,

    Your solution is really nice . I would suggest ,to tackle the accessibility issues:

    • All page content should be contained by landmarks. So wrap the <body >content in <main >to read more

    • Images must have alternate text.

    • For any decorative images, each imgtag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images, and avatar ‘s alt="” text shouldn’t be empty.

    • The eye image doesn't really need to be in the html, you could do it with css.

    • It's invalid html to wrap a heading element in an anchor tag. Swap those around so the anchor is inside the heading.

    • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs

    Hopefully this feedback helps. Keep coding!

    Marked as helpful
    1
    Elyas•300
    @ElyasthrPosted almost 3 years ago

    @PhoenixDev22 thanks for the advice

    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