NFT Card using HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag and <p class="title hover-effect"> with <h1> to fix the accessibility issues. To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body. instead giving .card a margin value.

  in the desktop design, give .card a fixed width eg. width: 300px; instead of a percentage width.

  you forgot to add a media query for the mobile design, in the media query, give .card a percentage width of 80% or 90%.

  Hope am helpful. HAPPY CODING

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To properly center your content to your page, you will want to add the following to your Body Element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  [Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]

  • Your **HTML should have ** a main element that will assist in identifying the main content of your site.

  More Info:📚

  MDN Main Element

  • The NFT alt tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an anchor tags. The anchor tag will allow users to click on content and have them directed to another part of your site.

  More Info:📚

  MDN The Anchor element

  • Your attribution should be wrapped in a footer element instead of a div.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  0