i used relative position and z-index

Hi, Sahulhameedu! 👋

I recommend replacing <section class="section1"> with <main> element. <section> is not a landmark element so you will still get a warning—"All page content should be contained by landmarks".

You should replace the <h4> with <h1>. You should always use heading tags in logical order. That's why heading tags have numbers.

The QR code is the main content of the page. It is not a decorative image. So, it should have alternative text.

You don't need to have another <div> to wrap the card content. You can make the <main> element as the card.

Then, you don't need to use z-index and position properties.

I suggest using a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

I hope this helps. Happy coding! 😄

Hello @Sahulhameedu nice work, but there's a room for improvement, I will advise you stick to style guide that was made available. You didn't use the font-family, I will advise you replace the div tag with main tag for easy accessibility, <h4> with <h2> Img{ max-width: 100%; Border-radius: 15px; Padding:5px; } Work on the body instead of the main tag Body{ min-height:100vh; Display:grid; Place-items:center; } You didn't add color to you p tag, do that as instructed and I hope this is helpful, Happy coding.