qr-code

Greetings Bayonle! There are some details that I would like to tell you:

• Using position to order elements, in this case, would not be the most advisable. Instead you can use flex
• It is recommended to use min-height and max-width instead of height and width
• I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
• I leave you the task of researching the reset CSS and the box-sizing: border-box
• I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. More info
• To center the content in the center of the screen, you can apply the following properties to your body (remove all position you no longer need):

body {
     font-family: "Outfit";
     background-color: lightgray;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 20px;
     margin: 0;
}

• To improve the semantics of your HTML, you can change your <div class="test"> to a <main class="test"> and the <div class="attribution"> to a <footer class="attribution">
• You can remove your box class, with that, the image will occupy the corresponding width
• Add a padding to give interior spacing to your card:

.test {
     min-height: 450px;
     width: 300px;
     border-radius: 15px;
     background-color: white;
     padding: 16px;
}