QR Code Component - HTML and CSS

Give the img a max-width of 100% for a responsive image instead of a width and height values.

There is no need to give .main a min-height value.

To center the mail on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Give .info a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

There is no need to style .hero and give the img a margin-bottom value.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there,

congrats on completing the challenge! Looks like there are some empty space below the text, due to min-height: 80vh; which is not needed at all, so u can safely remove that and solve that issue of empty space.

Hope you find this feedback helpful!

Hi 3AGLE-git, congrats🎉 on completing the challenge.

• It is better to use the following simple code block for centering a card(container) vertically and horizontally.

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• Write more in your GitHub project's README file. Like, write about your working flow, findings, new learned things, useful resources, etc.

Hope you will find this Feedback Helpful.