QR Code with HTML and CSS

I noticed you're using absolute positioning to center items while also having a display of flex and using justify-content. It's a bit redundant, and you should just use one or the other (I'd recommend flex). Or remove all of that and just use margin: auto.

This part of your code caught my attention:

.attribution {
  font-size: 11px;
  text-align: center;
  position: absolute;
  bottom: 0;
  font-size: 1em;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
}

You set a font-size of 11px and then overwrote it with 1em. I'm not sure if this was intentional. Also again, you could center this with margin: 0 auto 15px or margin: 15px auto instead of absolute positions.

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which causes lacking of landmark for a webpage

• So fix it by replacing the <div class="container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

• What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

• For example:
  • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
  • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!