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
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

Juan 480

@JEWebDev

Posted

Hello @sumit1125!

Good job! Here are some tips I think could help:

Your image is not showing on the site preview. To fix this update the image src attribute like this src="images/image-qr-code.png"

If you want to match the design a bit more you can make the h1 bold like this

h1{
    font-weight: 700;
}

To give it more space between the elements you can apply the following styles to your card:

.card{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

This will insert space between the image, the h1 and the paragraph element without having to give them a margin or padding individually.

If you have questions feel free to reply! I will answer them the best i can

If my answer was helpful please mark it as so.

0

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