Simple code for "Order-summary-component"

Hi gucio586, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
• You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

The rest is great!

I hope it helps... 👍

👾Hello @gucio586, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%, Here’s the code with the modification and the image applied as background:

body {
    background-size: contain;
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(225, 100%, 94%);
}

✌️ I hope this helps you and happy coding!

Hey there! 👋 Here are some suggestions to help improve your code:

• The “Illustration” and Music Icon serves no other purpose than to be decorative; they add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hide it from assistive technology.

• The only heading in this challenge is the ”Order Summary". Every other text should wrapped in a Paragraph Element.

• The “Cancel Order” was created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.

• Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃