Responsive QR code site with HTML AND Css (Updated)

Hi kounik,

congratulation on completing this challenge.I just saw your code and would like to suggest two videos for learning more about website responsiveness and box-model, 1.https://www.youtube.com/watch?v=srvUrASNj0s //for website responsiveness 2.https://www.youtube.com/watch?v=-8ORfgUa8ow //for CSS box modal

the 2nd video is pretty long if you don't want to watch the whole video, you can watch only the box-modal section.

hopefully this help, Thanks, and happy coding :)

Hello kounik,

Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

• You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

• Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users.

• The alternate text should not be hyphenated, it should be human readable. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image.

Overall, Excellent Work! Hopefully this feedback helps.

Hello kounik congrats on finishing the challenge!

Apart from what Phoenix said, you can also center your component a bit better with just a little snippet of code, instead of using margin on your container, remove it and center it using flexbox in the body, your body should look like this (try it on your own code!):

body {
    background-color: hsl(212, 45%, 89%);
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
margin: 0;
text-align: center;
display: flex;
// HERE WE ADD FLEX AND CENTER IT
flex-direction: column;
justify-content: center;
align-items: center;
// ALSO SETTING THE MINIMUM HEIGHT OF YOUR BODY TO THE WHOLE SCREEN!
min-height: 100vh;
gap: 1rem;
}

With this your component should be completely centered!

Hope my feedback helps you for future projects!