CSS - HTML - QR

HI! Your solution looks nice though there are a couple of things you can improve which I hope will be helpful! 😊

If you want to improve your code, make sure to use <footer> tag instead of <div> tag, the one where the class is “attribution”. There are a lot of other important semantic HTML tags which you can read about here or anywhere else: https://www.w3schools.com/html/html5_semantic_elements.asp

Make sure to use rem (relative length value) or em units instead of pixels for the purpose of “respecting the user preferences”, to say so. It makes the “sizes” of the website fluid according to the zoom/sizes set by the user.

You can read more about it here: https://www.freecodecamp.org/news/what-is-rem-in-css/

Replace<article class="cuadro_body"> <p> with <h1> and wrap <div class="attribution"> in a footer tag to solve the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/ I will advise you wrap both the h1 and p in one article tag instead of giving them separate article tag to style them.

To center .cuadro_qr on the page using flexbox, add min-height:100vh to .contenido and remove the height value.

There is no need to style .cuadro_header. there is no need to give .contenido position: relative; Give the img a max-width of 100% or width of 100% instead of a fixed width and height values.

For a responsive content, replace the width in .contenido with max-width and change the height value to auto.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful.

Well done for completing this challenge. HAPPY CODING