QR-code-component-main

Really great work on completing the challenge, Just few feedbacks :-

• Wrap your container under main tag, for example :

<main>
<div class="container"></div>
</main>

• To center your container in the middle of your website, Instead of using margin: 100px 0 0 550px ; , You could add in the body :-

display: flex ;
justify-content: center ;
align-items: center ;
min-height: 100vh ;

then your container will be centered.

• In the future, It's better to assign percentage values instead of definite values for making flexible & responsive design. For example, Instead of width: 240px : in your image ,you could assign width: 90% ;, so the width of image is 90% in relative to width of container in different viewport dimensions .

Hope you find this Helpful.

Other than that, Nice work & Keep going on....

Hello @Eyu32

Your project looks great!

I have one minor suggestion for you to improve it:

• If you add height: 100vh and align-items: center; to the body, your card will be placed in the middle of the page. You can do like this:

body {
    height: 100vh;  /* here */
    display:flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* and here */
    font-family: sans-serif ,"popins";
    background: rgb(204, 219, 231);
}

By doing that, you don't need margins or paddings to move the card from the borders.

I hope it helps!

Other than that, great job!