Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-code component by using HTML & CSS

@sadhap

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@sadhap

Posted

thank you so much !

0
Jesse Good 120

@jessegood

Posted

Here are a few points I saw. Hopefully this helps.

(1) Looks like you mispelled card-img-containere which is causing some of the styles not to work.

(2) I would recommend not wrapping everything in a div and it will cut down on how much styling you have to use.

(3) The other comment already addressed it, but using a main landmark for accessibility is also a plus.

0
romila 3,570

@romila2003

Posted

Hi @sadhap,

Welcome to the frontend mentor community and congratulations for 🎉 for completing your first challenge, the card looks great. There are some issues I want to address:

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. The img should have a border-radius.
  3. You can set the font-size for the h1 tag to be bigger
  4. Instead of using the margin property to center the card, you can use the flex property instead e.g.
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Overall, great attempt and wish you the best for your future projects so keep coding 👍.

0

@sadhap

Posted

@romila2003 thank you so much dear ! :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord