Hello RosvaldasB,
Congrats on completing the QR- code challenge 👏
Here are some improvements that I would like to suggest :
1. Using Semantic HTML5
You may use semantic HTML, instead of <div>. some examples of semantic HTML : <main> , <section> , <header>,<nav>, <footer>
You have skipped a heading level by using the h2 tag, this will cause an accessibility issue. Your document should have an h1 heading.
You may read more about semantics here
You may read more about accessibility here
2. Using CSS variables For example, using the style guide provided, you may create your CSS colors variables as follow :
root {
--white: hsl(0, 0%, 100%);
--light-gray: hsl(212, 45%, 89%);
}
Read more about CSS custom properties here
3. Centering the card
I will suggest adding the following lines of CSS to the body, just below the justify-content: center;
body {
align-items: center;
min-height: 100vh;
}
This will center the card vertically on the page as needed. You may then remove the following lines of code from .wrapper
position: absolute;
top: 50%;
transform: translate(0, -50%);
I hope these will be helpful to you 😉
Good luck going forward. and happy coding 🙂
Marked as helpful
