QR-component

Hola 👋. ¡Buen trabajo al completar el desafío!

Tengo algunos comentarios para usted que podría considerar

HTML:

• Usa la etiqueta <main> para envolver todo el contenido principal de la página. de la etiqueta <div>. Con este elemento semántico puedes mejorar la accesibilidad de tu página.

• Utilice la etiqueta <footer> para ajustar el pie de página de la página en lugar del <div clase="atribución">. El elemento <footer> contiene información sobre el autor de la página, los derechos de autor y otra información legal.

• 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 de imagen de fondo solo para imágenes decorativas que no agregan ninguna información a la página.

CSS:

• En lugar de usar píxeles en tamaño de fuente, use unidades relativas como em o rem. El tamaño de fuente en unidades absolutas como píxeles no se escala con la configuración del navegador del usuario. Esto puede causar problemas de accesibilidad para los usuarios que han configurado su navegador para usar un tamaño de fuente más grande. Puedes leer más sobre esto aquí.

• Debe usar la propiedad border-box: box-sizing para hacer que las propiedades width y height incluyan el relleno y el borde del elemento. Esto facilitará el cálculo del tamaño de un elemento. Puedes leer más sobre esto aquí.

• Para centrar el componente en la página, debe usar Flexbox o Grid . Puede leer más sobre el centrado en CSS aquí.

body {
min-height: 100vh;
    display: grid;
    place-content: center;
}
#disenio-principal {
    /* margin: 60px auto; */
    . . .
}

¡Espero que le sea útil! 😄 Sobre todo, ¡la solución que envió es genial!