QR code component

¡Hola! 👋. ¡Buen trabajo al completar el desafío! Tengo algunas sugerencias sobre su código que podrían interesarle.

HTML 📄:

• Siempre evita saltar niveles de encabezado; Siempre comienza con <h1>, seguido de <h2>, y así sucesivamente hasta <h6> ( <h1>,<h2>,...,<h6>).

• Debes usar un encabezado de nivel uno (h1) aunque este no sea un desafío completo de página. Tiene dos opciones:

1. Cambiar su elemento <h3> por un <h1>
2. Puede crear un elemento '<h1>' dentro de tu elemento 'main' que estará oculto visualmente pero visible y legible para lectores de pantalla. La clase "sr-only" oculta el contenido visualmente y aquí están los estilos para copiar. ej.: <h1 class="sr-only">QR Card Component</h1>

• Dado que este componente implica escanear el código QR, la imagen no es una decoración. No debe usar la propiedad background-image para agregar la imagen del código QR. En su lugar, use la etiqueta <img> para agregar la imagen. Use la propiedad background-image solo para imágenes decorativas que no añadan ninguna información a la página.

CSS 🎨:

• Para centrar un elemento verticalmente, debes usar una altura para su contenedor y utilize la propiedad align-items: center;. En este caso se recomienda usar "min-height: 100vh" para que ocupe el 100% del alto del viewport.

.container {
    min-height: 100vh;
    display: flex;
    /* flex-wrap: wrap; */
    /* column-gap: 30px; */ /* No existen otros elementos, esto es innecesario */
    /* row-gap: 40px; */ /* No existen otros elementos, esto es innecesario */
    justify-content: space-around; /* también se puede usar el valor "center" */
    /* height: auto; */ /*Utilize min-height en lugar de height*/
    /* margin: 40px 0; */
    /* padding: 50px; */
    align-items: center;   /* Agregue esto para centrarlo verticalmente */
    padding: 1rem;
}

¡Espero que te sea útil! 😄 Por encima de todo, ¡la solución que has presentado es genial!

Saludos!