@Hassiai
Posted
Replace <div class="qr-code"> with the main tag, <div class="first-paragraph"><p> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/ There is no need for <div class="blue-background"> in the html file , give its styling to the body, meaning only the background color value. There is no need for <div class="contaner"> and <div class="contain"> in the html file and style sheet.
To center .qr-code page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
Give .qr-code a padding value for all the sides instead of a height value. there is no need for display:block in .qr-code that is default display for the div element. There is no need to give .image a width and height value of 90%. there is no need for a height value in the img.
In the media query , you only have to change the width of .qr-code , everything else remains the same.
Hope am helpful. Happy Coding
Marked as helpful
