Skip to content
Submitted over 2 years ago

QR code component challenge

Tobias•100
@ToHX
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

I'm not completely happy with my card-shadow. I did use a website (https://getcssscan.com/css-box-shadow-examples) for that but you can see that on the QR Code img it doesn't fit.

Apart from that, I was this time much faster in building my solution as this is my 2nd project. :)

Community feedback

  • Abhik•4,840
    @abhik-bPosted over 2 years ago

    👋 Hello Tobias , Your solution is nice & responsive , Well Done 🤩

    However if you try the below mentioned suggestions your great solution can look greater :

    • to place the card at the center of the screen use the below code on body :
    display: flex;
flex-direction: column;
 align-items: center;
 justify-content: center;
    • give max-width:330px (use px value according to your choice) so that card does not touch edges as mentioned by Jessica
    • I played with the box-shadow & increased the opacity & value of X, changed the value of Y & reduced the blur & I am happy with the final result rgb(17 12 46 / 25%) 12px 24px 48px 0px;

    Other than that nicely done & Please keep contributing amazing solutions like this 👍

    Marked as helpful
    0
  • Jessica•880
    @perezjprz19Posted over 2 years ago

    Hi ToHX!

    I think your shadow looks fine based on the challenge comparison. However, the card does touch the edges of my phone screen so I can't really see the shadow. Some margin could help with that.

    Marked as helpful
    0
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hay ! Good Job Tobias

    Keep up the good work!

    0
    Tobias•100
    @ToHXPosted over 2 years ago

    @Crazimonk Thanks!

    0

Please log in to post a comment

Log in with GitHub

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