QR static card using HTML CSS

Hey there 👋,

Congratulations on completing the challenge 🎉! I really liked the way how you used width: min(30rem, 100%); to size the card's background 😀.

Also, here are some ways through which you can improve your code more:

Semantic HTML

Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:

<main>
     <div class="contenedor">  ... </div>
     <p class="attribution">  ... </p>
</main>

Centering Elements

For centring elements on the screen, there are 3 ways from which we can do so with ease, and for this one, I will go with flexbox. Now considering you have added the <main> tag into your code, we normally do this:

.main {
     min-height: 100vh; // Catches full screen-height and can expand when more content is added
     display: flex;     // Flexbox

     flex-direction: column;     // Aligns your elements vertically [ div and p tag ]
     align-items: center;        // Center Elements Horizontally
     justify-content: center;    // Center Elements Vertically
}

This way, you won't need to use margin: 12.5% auto; on the contenedor class, helping you to align other elements more properly. You can try adding each line at a time from the above CSS code to understand how the flexbox works.

Looking forward to seeing your amazing work in the future and hope this helps 😊