Simple HTML and CSS Landing Page for FrontEnd Mentor QR Code

I am proud of how I was able to keep the QR code and it's content in the middle of the webpage. This CSS code:

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);```

I hope to make use of bootstrap and design the webpage to be more interactive next time.

### What challenges did you encounter, and how did you overcome them?
I encountered challenges such as;
1. How to make the div and image stay in the middle.
2. How to curve around the edges of the scanner image.
3. The texts were warping and the image shrinking while I resized the window.

How I overcame the above challenges(respectively);
1. I checked different resources and was able to use the `top`, `bottom` and `transform:translate(-50%, -50)` to keep the div and the image at the center.
2. I simply used the CSS: `border-radius` on the `img` element.
3. I found out the warping texts and shrinking QR code image were simply because I used `max-width` for my contents, so any size of the page, it had to readjust. As soon as I changed it to `width`, everything was settled!

### What specific areas of your project would you like help with?
1. I wasn't able to use the specific sizes given in the `style-guide.md`. How was I supposed to use those sizes?