Qr Code card

👾Hello Saadi, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

Your first solution is just great and the component design is perfect! Two things you can improve in your solution. One is the shadow that is a bit dark and other is the alignment.

To create a smooth shadow you need to give it less opacity and more blur here’s a good value for this shadow box-shadow: 5px 7px 12px 5px rgb(0 0 0 / 7%);

To make the vertical alignment, first of all remove the margin and add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

Here's your code fixed and the container aligned:

main {
    min-height: 100vh;
    /* margin: auto; */
    /* width: 50%; */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

👋 I hope this helps you and happy coding!

Hello Saadi,

You can also use this code to center the elements:

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

The card also looks a bit small, you might want to make it bigger! It's a great idea to have added a bit of shadow, but you might want to make it a tiny bit less visible. Congrats on your first challenge!