QR Code Component Solution using HTML and plain CSS

Hi MarShal you have done a great job! Let me give you some advices.

• There are many ways to center a element. One of them (easy way) is in your body element:

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

And Remove this code of your .main-cnt

position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
     height: 475px

• You don't need add height in your card (main-cnt class). This element grow up when you put content inside.

You can learn more about flex Box here : Concepts of flexbox And if you want, you can learn about flexbox playing a game: Flexboxgame