@Islandstone89
Posted
HTML:
-
You need a
<main>, this is important for accessibility. Change<articleto a<main>. -
The alt text also needs to say where it leads (frontendmentor.io).
-
I would change the structure a little. Change
<section class="qr-background">to<div class="qr-box">. That's the only wrapping element you need. You don't need one div for the card background, and another div for the card content.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>of the HTML then using@import. -
It's good practice to include a CSS Reset at the top. You especially need to add
box-sizing: border-boxto* -
Font-size must never be in px. Use rem instead..
-
Remove
height: 100%on the image. Changewidth: 100%intomax-width: 100%, and adddisplay: block. This is included in the CSS Reset. -
Remove
display: blockon the card - it already a block element by default
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh
font-family: var(--outfit);
text-align: center;
should all be moved to the body.
-
max-widthon the card should be in rem. Around20remwill work fine. -
Remove
widthon the image, changemax-widthto100%, and adddisplay: block. -
Remove
max-widthon.titleand.description. Instead, usepadding-inline.
