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!