£ column preview card using sass

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @jones9411 👋🏻

  I've got some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For the car icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here.
  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • The headings should all be uppercase, you can achieve it like so text-transform: uppercase, or you can manually write them with uppercase letters.
  • Instead of giving separate border-radiuses to each box, add these two lines to .container:

  overflow: hidden;
  border-radius: 7px;
  

  • I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
  • Lastly, let's bring the card to the center of the screen with flexbox, here's how:

  body {
      background-color: white;
      font-size: 16px;
      font-weight: 400;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  I hope this was helpful 👨🏻‍💻 other than that, you did a good job, keep it up. Cheers 👾

  Marked as helpful

  1

  ---

  

  Carl Jones•200

  @jones9411Posted about 3 years ago

  @kens-visuals thanks, this is really good advice

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @jones9411 you're welcome 😇

  0