A simple HTML and CSS Structure

Community feedback

• 

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted over 1 year ago

  Hi Christina, great job!

  If you are wondering how to center text, you should just add text-align: center on your .inner-qr-conteiner class. For the rest it looks really nice.

  Regards!

  1
• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted over 1 year ago

  Good job!

  Here are some comments that may help you:

  • Use semantic tags such as main, footer, etc, this helps the accessibility and SEO of the site
  • The <div class="inner-qr-conteiner"> should be <main class="inner-qr-conteiner">
  • The <div class="attribution"> should be <footer class="attribution">.
  • With these changes, the current main is no longer necessary
  • To center the elements in the center of the screen you can make the following adjustments in the body:

  HTML

    <div class="inner-qr-conteiner">
        <img src="./images/image-qr-code.png" alt="qr code">
        <div class="text-qr-content">
          <h4>Improve your front-end skills by building projects</h4>
          <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>
    </div>
  
    <div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/Christinalulu">Christinalulu</a>.
    </div>
  
  </body>
  

  CSS

  body {
      background: hsl(212, 45%, 89%);
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
  }
  

  0