QR code Component beginner HTML & CSS

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  The code seems to be correct other than a commented section. The letter-spacing property for .content-p is set to 0.06rem but it is commented out. To fix this, the comment should be removed or the property should be uncommented.

  Here's the corrected code:

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
  
  html {
    box-sizing: border-box;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }
  
  body {
    background-color: #D5E1EF;
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
  }
  
  .card {
    background-color: #FFF;
    border-radius: 1.25rem;
    font: .9375rem Outfit, sans-serif;
    text-align: center;
    max-width: 320px;
    padding: 1rem;
    box-shadow: 0 1.56rem 1.56rem rgba(0,0,0,.1);
  }
  
  .qr-code {
    border-radius: .63rem;
    width: 100%;
  }
  
  .content {
    margin: 1.5rem auto 2.5rem;
  }
  
  .content-header {
    color: #1F314F;
    font-size: 1.375rem;
    font-weight: bold;
    letter-spacing: .07rem;
  }
  
  .content-p {
    color: #7D889E;
    margin-top: 1rem;
    letter-spacing: .06rem;
    padding: 0 1rem;
  }
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Danny McCollins•50

  @dmccollinsPosted over 1 year ago

  @Trueboss Silly me, I meant to remove that comment before posting my solution. Thanks for the feedback!

  0
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    display: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  0