I used font converter to convert the font ttf to woff2 .

Hi.. 👋, Congratulations on completing the challenge 🎉 .

I have some interest and feedback with your code

That i like:

1. I appreciate the similarity of your results with the design, a bit different in font scale but still good
2. html is pretty good, not too nested and with combination semantic HTML👍
3. Responsive until galaxy fold screen size 👌

My Feedback:

• Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )
• Give html class naming is recomended, this can prevent style conflict in future, but in this case it is not necessary, so it's ok 🙌
• You can seperate file by folder to be more structured, for example:

public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

overall is good, nice solution, hope it useful 🙌

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful