Skip to content
Submitted almost 2 years ago

NFT preview card component

Obada Jlelati•110
@Obada-JL
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

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <div class="contain"> with the main tag and <h3> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

    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.

    add a language attribute to the html tag <html> <html lang="en"> to fix the error issues.

    To center .container on the page using flexbox, add min-height: 100vh to the body. there is no need to give .container

    Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding:16px

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    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