QR-code challenge

Greetings, your solution is really impressive, however, we can improve your solution, let's start by removing the following lines of code inside the index.html file, which are unnecessary:

<footer>
  <span>
    Challenge by
    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by
    <a href="#" target="_blank">Arcloan</a>.
  </span>
</footer>

the last: </html>

Let's continue, we are going to replace this <div id="container"></div> with a <main id="container"></main>, this way you are respecting the semantic html and finally I recommend removing these attributes from the img tag, width="310" height="290", these measurements must be written in the CSS style sheet:

img {
  width: 310px;
  height: 290px;
}

add these lines to the body, don't use height: 98vh; delete this line margin:200px auto 200px auto; from #container {} in style.css:

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

happy coding 😁

Hello there!

Congrats on completing the challenge! ✅

Your project is looking fantastic!

I'd like to suggest a way to make it even better:

• Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

I hope you find this helpful!

Keep up the excellent work!