Hi there,
Congratulations on completing this challenge. 👏
Regarding the Google fonts, to use them, first of all, you need to look up and select both from the Google Fonts site
There is an icon at the top right, indicating, how many fonts you have got, select all fonts you need before clicking the embed code button.
You will have something similar to
"@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');"
Copy it into your CSS file, at the start.
You will be able to use the fonts where needed.
Example:
body {
font-family: "Montserrat", sans-serif;
}
h2 {
font-family: "Fraunces", serif;
}
If I may suggest some improvements :
1. Semantic structure
Use the semantic HTML5 in your structure. To improve the document structure and in return improve its accessibility, consider using <header>, <main>, <article>, and <footer> elements where applicable.
Read more about semantics here
Read more about accessibility here
Read more about headings here
2. Centring elements using CSS grid or Flexbox
To centre the design both horizontally and vertically, you can use CSS flexbox as follows on the body.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
or grid
display: grid;
place-items: center;
min-height: 100vh;
3. Always do a reset for your CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
4. Using CSS variables
Try using CSS variables on your next challenge.
Read more about CSS custom properties here
For reference, you may check my submission here
Do not hesitate, if you have any questions.
I hope these will be helpful to you 😉
Good luck onwards and happy coding 🙂
