html and css

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  To make the image visible remove "images/". <img id="ivaad" src=" image-qr-code.png" alt="iamge">

  The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  To center .container on the page using flexbox or grid instead of a margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  For a responsive content, give .container a fixed max-with value and a padding value for all the sides and a border-radius. Give the img a max-width of 100% for a responsive image.

  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

  Reduce the border-radius values.

  Give h1 and p the same font-size of 15px, text-align: center,the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  christopher•190

  @umahichristopherPosted over 1 year ago

  @Hassiai thanks

  0
• 

  Elona•60

  @devel0naPosted almost 2 years ago

  You could use the font suggested on the style-guide.md by importing it from Google Fonts!

  • Go to the font page from Google Fonts.
  • In the 'Styles' section, there are different types of weights. Select the ones that the style-guide.md suggests. When selecting a weight, a drawer will show on the right side of the page.
  • Go to the 'Use on the web' section in the drawer. Then, copy the @import inside of the style tag. Copy this code on the top of your styles.css file.
  • Now you have imported the font. To include it in the project (and for practical usage) this font could be applied to the body tag.
  • To set the font, go to the 'CSS rules to specify families' section in the drawer, copy the rule, and then paste it into the selector that you use for styling the body tag.

  Hope this works for you! :)

  Marked as helpful

  0

  ---

  

  christopher•190

  @umahichristopherPosted over 1 year ago

  @devel0na Thanks

  0