Desktop QR code component using HTML and CSS

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

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 :)-)