QR Code page using CSS flexbox

Hi Asteriqq, welcome to the community!

Your struggle comes from the fact that you've tried to center your card using paddings and margins which is far from optimal and hard 😤. To center your card on the page you should find the parent of your card - in your current code, the parent is the body. Then in css, inside this parent you could write something like this:

display: flex; //Enables FlexBox

justify-content: center; //Justifies children to the center

align-items: center; //Aligns children to the center

You should also set the parent's height to 100vh - meaning it's height is equal to the screen's height, so that the card could be centered on the screen. Here is a decent video about using FlexBox - VIDEO

To give your text some new fonts you first need to import them from Google Fonts website. Here is a tutorial for that - VIDEO. After you've imported your fonts you can apply them in css by typing this code in a class that you wish to change the font of:

font-family: 'name of the font';

You can also use the background color provided in the style-guide.md file.

Other than that you did everything right in terms of positioning elements inside the card and setting the border radius, good job! Keep coding, everything will come with practice.