Responsive QR Code Component using HTML, CSS, and Bootstrap

Hi @kojozcodes, Overall your solution looks good but you missed a couple of things. These elements are the color of your heading text and your QR card lacking a box shadow.

• Heading font color is incorrect

One detail you missed in your solution is the color of your heading text, "Improve your front-end skills by building projects". In the design, the color of the heading is dark blue while yours is just black. I also took a look at your code using Chrome's developer tools saw a problem with your card-title class.

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: var(--bs-card-title-color); // This variable is undefined
}

This should be a simple thing to fix since you find the hsl color values in the style guide provided by Frontend Mentor and under the #Color section. I also notice that you're using an H6 tag for your heading. While this isn't really a problem, it would be a better idea if you just use an h1 tag if you're only using one heading tag.

• Box-Shadow

While it's a bit feint, if you look at the bottom of the QR code in the design, you see that it has a box shadow under it. Box shadows can be tricky but make sure the x and y values are small and the color of the shadow has a low-opacity.

I have made some updates to the QR card component. The card title and text color, the card text bottom margin and the card's box shadow.