Responsive Order Summary Card Using Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @bhornbhaya 👋🏻

  I have some tips to fix the accessibility issues and some other minor things.

  • In the markup, <div class="summary">...</div> should be <main class="summary">...</main>. These will fix most of your accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • Then I suggest changing <h4> of Annual Plan to <h2> or just a <p>, because in HTML headings have to decrease gradually.
  • Now let's fix the background-image: url(../images/pattern-background-desktop.svg); this is the correct path.
  • Hover states start and end abruptly, so I suggest adding this line to the button and the links, like this:

  .summary__btn {
      margin-right: 4rem;
      margin-left: 4rem;
      transition: all 0.2s;
  }
  
  .summary__plan__link__change {
      font-size: 1.4rem;
      font-weight: 700;
      transition: all 0.2s;
  }
  

  this will add smooth transition to the :hover states.

  I hope this was helpful 👨🏻‍💻 one last thing, when you update something there's no need to re-submit it, just push the changes to GitHub, and it'll update automatically. I'll not generate a new screenshot, but the code will be updated. Really great job for the first project. Cheers 👾

  Marked as helpful

  0