Desktop QR code component using HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="card">with the main tag,<h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card on the page using grid, add min-height:100vh; and place -items: center to the body and remove grid-template-rows and grid-template-columns, these are not needed.

  For a responsive content, replace the height of .card with a padding value for all the the sides. give the img a max-width of 100% instead of a width value and border-radius value. Give p and h1 the same padding left and right values and the same margin-top value. Give p a margin-bottom value.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Erik Aakre•230

  @eaakrePosted almost 2 years ago

  @Hassiai Thanks for the input! Made some changes on my repository because of your comments!

  1
• 

  Vitor Aragone•160

  @vitoraragonePosted almost 2 years ago

  Hello @eaakre!

  Here are some suggestions I can make to you:

  • Try using div to sepparate the content:

    <div class="card main">
      <div class="i-added-this-div card-image">
          <img src="./images/image-qr-code.png" alt="">
      </div>
      <div class="i-added-this-div card-content">
          <h2>Improve your front-end skills by building projects</h2>
          <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
          </p>
      </div
    </div>
  

  This will make things easier to separate and identify, as well as to modify in css.

  • Read the style-guide included inside the main folder:

  There you can access informations like base colors, font families, font-sizes and more.

  (I'm new at this thing. Feel free to correct me :)-)

  Marked as helpful

  0