QR Code

Here are a few suggestions for improvement:

1. Use display: flex on the body to center your container both horizontally and vertically. Also, setting min-height: 100vh ensures that the body takes up at least the full height of the viewport, making sure your content is always centered regardless of the viewport height.

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

1. In general, it’s better to use class names rather than tags as selectors.
2. It’s also a good practice to style everything for mobile view first, use media queries with min-width, and then adjust the styles for larger screens.

I encourage you to use this technique to make the card responsive with ease:

.card {
width: 90%;
max-width: 37.5rem;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉