Qr Code Component 1.0

Some recommendations regarding your code could be of interest to you.

• In order to center the card easily and correctly, you can add flexbox and min-height: 100vh to the body
• If you want, you can use the recommended color for the background:

body{
  /* background-color: aquamarine; */
  /* padding: 50px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(212, 45%, 89%);
}

• If you use flexbox, you don't need to give margin to the main in order to center the card because flexbox in the body already provides it. Additionally, you don't need min-width. Max-width is usually used because it makes the card responsive.

main {
  /* margin: auto; */
  /* min-width: 450px; */
  max-width: 450px;
  /* padding: 25px 0px 10px 0px; */
  padding: 25px 20px 10px;
}

• If you give width: 100% and height: 100% to the image, the card will be responsive and the image will be positioned completely on the card

picture > img {
  /* margin: auto; */
  border-radius: 15px;
  display: block;
  /* margin-bottom: 20px; */
  /* max-width: 400px; */
  height: 100%;
  width: 100%;
}

• Finally, if you want to reduce the card size, you can adjust the max-width of the card and font-size of the texts.

Hope I am helpful. :)

Oi, vi que você é brasileiro, eu queria te ajudar com algumas dicas.

Tenta usar nome mais intuitivos para classes, vi que você utilizou os nomes alto e baixo nas suas tags h1 e p, você poderia utilizar algo como titulo ou title na tag h1 e descricao ou description na tag p.

Vi também que você utilizou a propriedade padding para dar espaçamentos externos entre os items, existe uma propriedade chamada margin que serve para isso.

Espero ter te ajudado!