QR Code Component Main

Hi! This is really good, you just need to fix the accessibility issues using landmarks like <main>, <footer>, etc.

This would be the main content:

<main>
<div class="square">
    <div class="qr">
      <img src="./images/image-qr-code.png" alt="qrcode" width="375px">
    </div>
    <div class="title">Improve your front-end skills by building projects</div>
    <div class="sub-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</div>
  </div>
</main>

This would be your attribution:

<footer>
<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/Melchor16/IntroQr">Erick Villarreal</a>.
  </div>
</footer>

As for the vertical alignment, you need to use flexbox

main {
       min-height: 90vh;
       display: flex;
       justify-content: center;
       align-items: center;
   }

hey Melchor16 i just starting the web development this is challenge is my first.Please can you just help me by breaking down how should i start ?