Skip to content
Submitted almost 3 years ago

NFT preview card with HTML and CSS

Katja•270
@Katja721
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

Any feedback appreciated

Community feedback

  • Martin Eliáš•890
    @martinelias1312Posted almost 3 years ago

    Hello @Katja721, few suggestions from me:

    • <img> element should have alternate text. It´s a description of what is on image. This will fix accessibility. E.g. <img alt="User avatar">. Alternate text can be left blank while images are only for decorative usage. This can be used in this case for ethereum and time icons.
    • <body> should contain whole page, so it starts under </head> tag and ends before </html>
    • you should use <main> element instead of <div class="container">, which will fix another accessibility issue
    • <div class="attribution"> this whole code can be wrapped in <footer> element for more semantic HTML layout and accessibility
    • i will personally add media queries from 400px to 800px and style .container to be in center and be more wider

    Hope this will help you on your next challenges!

    Marked as helpful
    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