QR code challange using HTML and CSS

Community feedback

• 

  Lucas Richard Garcia Tinoco•50

  @lucasrgtPosted over 1 year ago

  Hello udaymishra04.

  There some improvements you can make in your code:

  1°: The container is not centralized in the screen. You can achieve this by using display flex with justify-content: center and align-items: center on the body element. Like so:

  body { background-color: hsl(212, 45%, 89%); font-family: 'Outfit', sans-serif; overflow: hidden; display: flex; justify-content: center; align-items: center; }

  Other important thing is that you put the weight wrong in your card's title:

  h3 { text-align: center; padding: 28px 8% 25px 8%; font-weight: 700px; ---> Remove the "px" or put something like "bold" or "medium" without the 700. font-size: 1.25rem; color: hsl(218, 44%, 22%); }

  Other good practice to know: You can use the outer card border radius the double of the inner, so it can improve the visual balance of your solution. Something like this:

  Card border radius: 16px QR Code Container radius: 8px

  Thanks for your time!

  Marked as helpful

  0

  ---

  

  udaymishra04•150

  @udaymishra04Posted over 1 year ago

  @lucasrgt Thank you for your feedback, will definitely work on the mentioned things.

  0