QR code component using HTML and CSS

Hello @Simon-Muchemi

Good job on completing the challenge.

I'd also advise using CSS variables to avoid repetition and make editing your code easy. For example: :root{ --main-font: 'Outfit', sans-serif; }

Then because we only have one font to be used here, set the font in your body: body{ font-family: var(--main-font); }

You can now comfortably remove this: #message{ font-family: Outfit, sans-serif; }

and

#title{ font-family: Outfit, sans-serif; }

You'll have minimized repetition. I hope this helps.

Happy coding lad.

Congratulations well done. These are the CSS changes I would recommend.

• Place the font-family inside the body, this will apply to the entire page. No need to do it for each tag.

• Use fixed width and height for the card instead of using % and vw. In this case you should avoid % and vw, this will break your page.

• Stick to one colorization method, you are using named colors, hsl and hex. For best practice avoid named colors.

• Remove the margin on the #QR-code and add padding on the .container

• Because the width of the card is smaller than 375px and there is only one card, you don't need to use media queries. If you want to practice with media queries add more cards to the page and make it responsive.

• In this case the easiest way to center the card on the page is by using flexbox, but if you want to use grid to do it. You have to add grid divisions to your page to achieve this.

These are the few changes you can make to you CSS to make it a bit better :-)

body{
background-color: hsl(218, 8%, 72%);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
place-items: center;
font-family: Outfit, sans-serif;
}
#QR-code{
height: 288px;
width: 288px;
border-radius: 15px;
}
.container{
grid-column-start: 2; ### you can combine column-start and column-end by doing this: grid-column: 2 / 3. The first value is for the start and the second for the end.
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
height: 500px;
width: 320px;
background-color: aliceblue; ### change to hsl or hex
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 8px #8d9090;
padding: 20px;
}
#title{
font-weight: 700;
font-size: 18px;
color: #2b3e4c;
}
#message{
font-weight: 400;
font-size: 14px;
color: hsl(165, 7%, 55%);
padding-bottom: 20px;
}
#title, #message{
margin: 10px;
}

If you have any questions regarding this, feel free to ask

Lovely stuff Simon quick note you should have a fixed width for your desktop version and a breakpoint for your small devices. Good job none the less!