Order Summary Card using CSS Flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @codewithcindy 👋🏻

  I have some suggestions on how to fix the accessibility, HTML and some other issues

  • In the 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 the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • In this line <div class=item-left =``>`, perhaps you made a type, but the second attribute '='' causes some errors, so you should get rid of it. And this will fix the HTML issues.
  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.
  • Also, you can add min-height: 100vh; to body and it will bring the card to the center.
  • To answer your first question, in the screenshot it seems like you got the background perfectly, but in the website the pattern is missing. I'm not sure if you did something after submission, but there's only the color.
  • And to answer your second question, there's no right or perfect way to match box-shadow. It's the trickiest part to match, so here's a cool library of CSS box-shadows that I personally use. You can try to grab one that seems the closest and then tweak it a bit to make it look "perfect".

  I hope this was helpful 👨🏻‍💻 all in all, you did a great job for the second project, keep the pace. Cheers 👾

  0