semantic HTML, CSS

Community feedback

• 

  Antonio Novak•480

  @Nova988Posted about 3 years ago

  Hello,

  For the background color on hover: did you try opacity? And you need to reduce the width of the image in the middle text box. It is set to 100%

  Hope it helps

  Marked as helpful

  0

  ---

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @Nova988 Sorted! Thanks a lot!

  0
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @KristaCalleja 👋🏻

  I have some quick tips on how to fix the accessibility issues and some minor design ones as well.

  • In your markup <div class="card">...</div> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix most of your accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For Annual Plan you used <h3> tag, however in HTML heading tags must decrease gradually, like <h1>, <h2>, <h3>, and so on. So in order to fix that issue you can swap <h3> with <h2>.
  • What comes to design, I have a couple of suggestions. First, you should add these two lines of styles to the button,

  .primary-btn {
     width: 80%;
     padding: 1em 0;
  }
  

  • And then you should also change the width of .options to width: 70%;, so it matches the width of the button.

  I hope this was helpful 👨🏻‍💻 you did a superb job. Cheers 👾

  2

  ---

  

  Krista Calleja•300

  @KristaCallejaPosted about 3 years ago

  @kens-visuals Precious advice! Really appreciate it thank you!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @KristaCalleja always happy to help!

  0