Order summary component main

Hi there. Good job on finishing the challenge!

For the SVGs, I would suggest you to use the img tag for better code readability but it is depends on the context of the project.

For this particular challenge, using the inline SVG seems to be no issue. But for the background, I would suggest to use background-image: url(YOUR_SVG_PATH) in CSS since we can style the background using other background related properties such as background-size, background-repeat and more.

And other things to improve your solution is by

Reducing unnecessary HTML elements

div > button > a > span

While this structure is valid and can work, you might consider simplifying it to div > span. This could lead to a more straightforward and efficient structure, making your code easier to read and maintain.

Using semantic HTML elements and CSS class names

• The pricing element's class can be changed from btn to pricing-plan or any related name
• Element for 'Change' can be a link (<a>) tag and the span element that wraps it seem unnecessary, maybe removing it is a good idea
• btn2 class can be named as payment-btn and it can be in the button element and you can just write the text instead of having h2 inside the button element
• footer class can be changed to cancel-btn and change it to button element instead of general div, you also do not need to wrap the text with h4

Read more about semantic HTML here and semantic CSS class names here

Removing the absolute position property in CSS

Remove the position: absolute and instead use the display: flex on the parent elements to lay out the child elements. You can learn more about absolute positioning and when should you use it here.

Keep up the great work 💪