Responsive QR Code Component using HTML, CSS, and Bootstrap

Community feedback

• 

  Pierce Issah•120

  @PJIceskullPosted over 1 year ago

  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.

  Marked as helpful

  1

  ---

  

  Hamza Ahmed•20

  @kojozcodesPosted over 1 year ago

  Thank you for this detailed feedback. I will look into it and work on those mistakes. @PJIceskull

  1
• 

  Hamza Ahmed•20

  @kojozcodesPosted over 1 year ago

  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.

  0