Order summary card solution

Community feedback

• 

  Omar Mohy•670

  @omarmohy98Posted almost 3 years ago

  Hi@kmeganiz, wonderfully done! The code is remarkably responsive. Below is my feedback on potential improvements!

  1.) let's put all elements in your solution into <main> element. Doing so will give your code more semantic meaning, will allow screen readers to know this is your main content and Fix the issues appear in Accessibility Report.

  2.) All of your images should have alt tags with content within the quotations, regardless if whether or not they are purely decorative or not. You can put the aria-hidden="true"property in the <img> element to denote that the image is purely decorative (as is the case with your icons). Your music icon would look like <img src="images/icon-music.svg" class="img-fluid" alt="Music" aria-hidden="true"> .

  3.) Careful with your headings. You should only use heading tags when the content is actually a heading. For example, I would replace your <h6> tags with <p> tags. <p> tags would make more sense here since that information is your content, not necessarily a heading and i would replace <h5 class="card-title text-center fw-bold pt-3 pb-2">Order Summary</h5> with <h1> tags that will help you to solve accessibility issues appear in your solution report.

  4.) <div class="change col-4 text-end fw-bold my-4 me-4" href="#">Change</div>,here i see that you use href attribute that is not acceptable, i would replace that by the following <div class="change col-4 text-end fw-bold my-4 me-4"><a href="#">Change</a></div> and the same in your "cancel order" <div> tag.

  If you found my feedback helpful, please mark this comment as helpful. Wonderfully done. Happy coding!

  Marked as helpful

  0

  ---

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @omarmohy22 Your feedbacks are definitely helpful... Thank you Omar, I will edit my solution into yours soon.

  0

  

  Omar Mohy•670

  @omarmohy98Posted almost 3 years ago

  @kmeganiz thanks, happy to help.

  Marked as helpful

  0

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @omarmohy98 only the <div> and <a href> I am using the one I already use in proceed to payment. Here is the reference:https://www.w3schools.com/tags/att_a_href.asp

  0
• 

  Solomon Johnson•60

  @Roxxy28Posted almost 3 years ago

  Awesome work Katherin!. I think you left out the shadow that with the proceed to payment button

  Marked as helpful

  0

  ---

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @Roxxy28 Hi Solomon, I have tried put shadow, but the shadow color became yellow, as I want the text change to yellow when it hover, is there any code for black shadow? Thank you

  0

  

  Solomon Johnson•60

  @Roxxy28Posted almost 3 years ago

  @kmeganiz You can type in you CSS:

  style.css .button { --shadow-light: #00000026; --shadow-med: #0000004d;

  }

  I hope am correct :)

  Marked as helpful

  0

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @Roxxy28 I can do already using:

  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);

  Thank you

  0

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @Roxxy28 Btw thank you for your compliment

  0
• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Katherin,

  looks like it's caused by border on card class. by removing it should be fine.

  add to your style.css:

  .card {
      ...
      border: none;
  }
  

  Marked as helpful

  0

  ---

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @al3xback Thank you Alex for the help

  0

  

  Katherin Meganis Phang•70

  @kmeganizPosted almost 3 years ago

  @al3xback Alex how to show code in the box like yours in the comment?

  0

  

  Alex•660

  @al3xbackPosted almost 3 years ago

  @kmeganiz simply wrapping code in 3 backticks :)

  0