@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
HTML
In order to fix the accessibility issue:
- You need to replace
<div class="qr-card">
with the<main class="qr-card">
tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
CSS
- If you want to center it correctly and easily, you can use flexbox in the
html
in CSS:
html {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit';
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Hope I am helpful. :)