QR Code using HTML and CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0
• 

  Caio Moisés Souza Barbalho•20

  @cmoissPosted 2 months ago

  Hi, how are you?

  I think you can use variables in CSS to store your colors and make your code a bit more user-friendly. It also helps you avoid getting lost in hex or hcl codes.

  Instead:

  background-color: #fff;
  color: #7b879d;
  

  Try this:

  :root {
    --baby-blue: hsl(212, 45%, 89%);
    --blueish-gray: hsl(216, 15%, 48%);
    --navy-blue: hsl(218, 44%, 22%);
  }
  
  [...]
  
  background-color: var(--baby-blue);
  color: var(--navy-blue);
  

  Here is an article from W3Schools that teaches you how to use variables in CSS.

  I hope this helped, even if a little (I'm still starting here at FrontEnd Mentor).

  Happy studying! :)

  0
• 

  Danyal Sarwar•30

  @DanyalSarwar325Posted 2 months ago

  I have created the QR code using html and css

  0