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

Francescoโ€ข 270

@FraCav99

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

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Fracav, congratulations for your solution!

Your solutions seems really good, I've some tips for your to improve a bit its design:

1.Add the correct color for the background, note that you can have all this info checking the file styleguide.md or using a Google Chrome tool to eyedrop the design colors, a good one is called Colorzilla

body {
    background-color: hsl(212, 45%, 89%);
}

2.The border-radius for the container is too much rounded, try a value like border-radius: 12px; for the container and border-radius: 10px; for the img.

3.In order to have also the img responsive use display: blockand max-width to manage everything, see the code below:

img {
    display: block;
    max-width: 100%;
    border-radius: 20px;
}

Hope it helps and happy coding!

Marked as helpful

0

Francescoโ€ข 270

@FraCav99

Posted

@correlucas Hi Lucas! Thanks for your tips!

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