You did a good job despite the drawbacks you mention!
Some recommendations:
- It is good practice to start with mobile views first.
- With flexbox, put in the body tag, min-height: 100vh; to center the elements.
- To use Google fonts, go to the file link and first select the font and its weight, once selected (click on the "+" button to select) copy the generated code in the header of your html file, example:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
And below it generates the css code to use:
body{ font-family: 'Roboto', sans-serif; }
- Finally You can try flex-direction: column and row for mobile and desktop view