QR Code using HTML and CSS

If you want to make your card responsive with ease you can use this technique:

.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 😁😊😉

Hi, how are you?

I think you can use variables in CSS to store your colors and make your code a bit more user-friendly. It also helps you avoid getting lost in hex or hcl codes.

Instead:

background-color: #fff;
color: #7b879d;

Try this:

:root {
  --baby-blue: hsl(212, 45%, 89%);
  --blueish-gray: hsl(216, 15%, 48%);
  --navy-blue: hsl(218, 44%, 22%);
}

[...]

background-color: var(--baby-blue);
color: var(--navy-blue);

Here is an article from W3Schools that teaches you how to use variables in CSS.

I hope this helped, even if a little (I'm still starting here at FrontEnd Mentor).

Happy studying! :)

I have created the QR code using html and css