QR Code Component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="qr-code-component"> with the main tag, <div class="qr-title"> with <h1> and <div class="qr-details"> to make the content/ page accessible. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  Use the colors and font-family that were given in the styleguide.md found in the zip folder you downloaded.

  To center .qr-code-component on the page using flexbox, replace the height in the body with min-height: 100vh.

  For a responsive content,

  • Give .qr-code-component a fixed max-width value, a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em, a background-color of white and a border-radius value, the rest are not needed
  • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  8
• 

  arogersrenee•330

  @arogersreneePosted over 1 year ago

  It's at the bottom of the style-guide:

  • Family: Outfit
  • Weights: 400, 700

  2