Order summary card solution

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!

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

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;
}