QR Code Component

Hello developer!

Congratulations on completing this challenge! I have seen your layout it seems to me that you have some details, but, I have brought you some modifications to improve your design!

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

Now, if you don't want to stylize the body (it can become a bad practice) I recommend you put all the content you have inside a div and apply the properties that I just gave you (you have to keep the padding: 0 for the body)

Hi Mohamed, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
• To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

Example:

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

The rest is great!

I hope it helps... 👍

Hello ..... you have done an amazing job.... but let me correct you ... your card is not in center of the screen as per as design requirements.... but you can fix it by taking one simple step: by setting the properties of body tag { display: flex ; justify-content: center ; align-items: center ; } ............... I hope this will fix your problem............ Thanks!

Hi Mohamed, Your Solution is looks Good!

Some of my suggestions are :

1.Change the background color of body to hsl(212, 45%, 89%) because this color is in the design

2.Wrap all your content in <main> tag, so you couldn't get any landmark errors

I hope this will helpful to you, Thanks!