CSS Flex, SCSS.

Hi Tux3er-Isma, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

Avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

The rest is great!

I hope it helps... 👍

Hello Ismail, You have done a good work! 😁

Some little tips to improve your code:

• use main tag to wrap the card and improve the Accessibility but not as a container of that one element
• also you can use article tag instead of a simple div to the container card for improve the Accessibility
• you can use picture tag to change image by resolution -> read here
• centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
• use flexbox to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Thanks for all your comments. I really apreciate them. I will use your tips in the Next challenge. 😁