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 challenge

Tobias 100

@ToHX

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

👋 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
P
Jessica 880

@perezjprz19

Posted

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

@NaveenGumaste

Posted

Hay ! Good Job Tobias

Keep up the good work!

0

Tobias 100

@ToHX

Posted

@Crazimonk Thanks!

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