Order Summary Component Solution

What are you most proud of, and what would you do differently next time?

I'm most proud of successfully integrating SVG backgrounds into the design, learning how to manage their positioning while keeping the card and other elements layered correctly. Additionally, I’m happy with how the responsive layout turned out, ensuring the design works well across different screen sizes.

What challenges did you encounter, and how did you overcome them?

Initially, I had challenges with the SVG background and not having it affect the card div storing the rest of the content. To fix this problem, I utilized position:absolute and made the z-index 0 so it doesn't impact the normal flow of the document.

What specific areas of your project would you like help with?

If you notice the svg element inside of the card container, the image is not in the correct position where its supposed to be and i didnt know how to fix this and tried various things that correspond with its size and position in the container.

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* card would be on top as the svg is in the background */

}

.hero {
    position: relative;
    z-index: 1;
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 220px;
    object-position: center;
    object-fit: contain;
}

As you can see this is a small error that needs to be fixed and would love all feedback for this design!