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

Nothing special Used

sidr467 400

@sidr467

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


What are you most proud of, and what would you do differently next time?

Made it responsive

What challenges did you encounter, and how did you overcome them?

I didnt know how and what size would be perfect for container but somehow tried different width and managed it.

What specific areas of your project would you like help with?

Maybe CSS because it is still not perfect i think.

Community feedback

@marcuscs00

Posted

You did a great job matching your website to the original design. Your text matches the design's font family and color. Good job centering the QR code component with flexbox as well.

I would add a box-shadow property to your container element. box-shadow adds a shadow to an element, which would make your solution closer to the original design.

Here's how I would use box-shadow for this solution:

box-shadow: [horizontal offset] [vertical offset] [blur-radius] [color];

A positive horizonal offset moves the shadow to the right of the element, a negative value moves the shadow to the left of the element.

A positive vertical offset moves the shadow downwards from the element, a negative value moves the shadow upwards from the element.

The blur-radius value is how blurry the shadow is. A higher value makes the shadow more blurry and spread out, a lower value results in a less blurry and spread out shadow.

The color is the color of the shadow. You can use color keywords, rgb, hex codes, or whatever you want for this.

Keep up the good work!

1

sidr467 400

@sidr467

Posted

@marcuscs00 thanks i didn't know i was missing that

0
P

@tatasadi

Posted

Good job on completing your first challenge! Here are a couple of suggestions to improve your code:

  • Use one h1 on the page.

  • Instead of setting height: 100vh on the body, use min-height: 100vh.

Keep up the great work!

1

sidr467 400

@sidr467

Posted

@tatasadi Thanks for the heads up

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