Skip to content
Submitted over 2 years ago

NFT Card Comp using HTML5 + CSS3

Nour Al-Osman•60
@nalosman
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

Got everything except for doing a colour overlay on hover; Any feedback is welcome 👋

Community feedback

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

    Hi, Nalosman! 👋

    Congratulations on completing this challenge! 🎉

    About the image overlay, here are some guidelines:

    • First, wrap the image with an interactive element, in this case, it could be a link that is going to navigate the user to the new page to preview the image.
    • Second, use pseudo-element to create the overlay.
    • Lastly, use background properties to display the eye and the background color.

    You could see my solution as your reference.

    It looks like you want to have a visually hidden h1 which means that it's is visible by assistive technology but hidden for visually. Setting it as display: none; is going to make the h1 hidden for both assistive technology and visually. I would recommend searching the sr-only styling.

    Some feedback:

    • Accessibility
      • All the page content should live inside landmark elements (header, main, and footer). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
    • Use the creator's name as the alternative text for the avatar.
    • Use interactive elements (a) for any elements that have :hover or :active states.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • The footer element should be the attribution (outside the main landmark). So, swap the footer in the card element with a div instead.
    • Use CSS border property to create the line. hr element has a role as a separator. In this case, the content below the line should not be separated.
    • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it.
    • Styling
      • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container. By doing that, you can remove the margin from the .card-container.
    /**
 * 1. Make the card vertically center and
 *    allow the body element to grow if needed
 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 1 */
}
    • I would recommend using em unit for border-radius on the .card-container to prevent unexpected behavior. Percentage unit is a relative unit and in this case, it is relative or depends on what?

    That's it! Hope you find this useful! 😁

    Marked as helpful
    2

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