QR code component

Hello Kla Marius, there are reports right below of the design comparison that you can check and see if you have anything to work on. In this case, there are unnecessary things in HTML, check on it and after you fix it, you can always generate a new report.

The output of the design comparison seems that you need to center your container in the body. You can test this:

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

And put more spacing or padding specially in the texts part and lastly make the container a little bit bigger if you can see the difference in the comparison.

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 📄:

• It's not necessary to add the role attribute with the value "main", as the main tag already has this semantic meaning.

CSS 🎨:

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

• To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  body {
      font-family: 'outfit', sans-serif;
      text-align: center;
      background-color: hsl(212, 45%, 89%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

• You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

  Popular CSS resets:

  • Normalize.css
  • Reset CSS
  • "My Custom CSS Reset" by JoshWComeau

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!