QR Card Component

Hi @viveknagesh21, Congratulations on submitting your QR Code solution! the design looks good.

I see you managed to centre the card nicely with FlexBox and having read your comment on how you got to that solution, I agree, FlexBox is great for achieving this goal.

I tried looking at the code repo but the link is broken so I used the browser to take a look at the code and have the following suggestion:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* margin: auto;  -- you don't need this if you set the width*/
   width: 100vw;
    border-radius: 10px;
}

An alternative solution is to use:

.container {
    height: 100vh;
    width: 100vw;
    border-radius: 10px;
    display: grid;
    place-content: center;
}

I hope you find this feedback helpful!

Keep up the great work! J

Hello ! First of all... congratulations on submitting your QR code solution!

Although I am a beginner, I have two suggestions that may be helpful:

• it's a good practice to use landmarks. You would probably like to wrap this card in a <main> landmark. Landmarks are structural elements that help assistive technologies and users navigate through a web page more efficiently by providing semantic meaning to different sections of the content.

• It is better for font sizes to use rem instead of px. Rem provides flexibility, accessibility and consistency in web design.

I hope this is useful ! keep going !