Plain old css, with alot of margins and padding

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @EDLLT 👋🏻

  I have some suggestions to help to fix the accessibility issues and some other things.

  • In your HTML, <div id="payment-div">...</div> should be <main class="payment-div">...</main>. Notice I changed id to class, that's another thing I want to point out, try using classes instead of IDs, because classes are more reusable.
  • Next, instead of <h4> for Annual Plan I suggest using <h2> or <p> tag, that's because in HTML heading have to increase gradually, such as h1, h2, h3.... These will fix the accessibility and HTML issues. Just, don't forget to generate a new repot once you fix the issues.
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • Hero image should have a display: block;, it removes the line underneath the image. If you want to know what's causing it, check out the 3rd section of this video
  • Now, let's fix the background, and here are the changes I've made in your code:

  body {
      background-image: url("../images/pattern-background-desktop.svg");
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #e0e8ff;
      text-align: center;
      font-family: 'Red Hat Display';
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  the top four lines will fix the background and the bottom four lines will make sure that the card is in the center.

  I hope this was helpful 👨🏻‍💻 for the first project, you did an excellent job, just keep practicing, you got this. Cheers 👾

  Marked as helpful

  1