Qr Component using HTML and CSS

Great work on completing your first project. However, there's something I noticed, when specifying the custom variables at the root, you made a mistake. Each of the colors should have a unique name, and the variables should also have no spacing between them.

Something like this:

:root {
    --white-color: hsl(0, 0%, 100%);
    --lightgray-color: hsl(212, 45%, 89%);
    --blue-color: hsl(220, 15%, 55%);
    --darkblue-color: hsl(218, 44%, 22%);
}

And then when using the variable in the elements, you should implement it like this:

body {
    color: var(--white-color);
    background-color: var(--lightgray-color);
}

You also made a typo on fontface, that's why the fonts aren't showing up:

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

Generally good work. Best of luck in you other projects.

Hi @SharmarkeAhmed12. Nice work. Adding a border radius to your QR image will make it look as much closer to the original design.