Order Summary - Flex Component

some suggestions:

• Study a little about semantics with html, I see you use many divs, many of them could be replaced by <section> <main> <footer> tags. For example, all card content should be inside a main tag and your FEM information inside the footer tag.

• On body you could have used the following code to center the card

    place-items: center;
    display: grid;
    min-height: 100vh;

• to put the right background image could have done like this

    background-size: contain;
background-color: #e0e8ff;

• It was not necessary to border the card

• In the footer I would put this code to always leave your information right at the bottom and still without interfering with the grid positioning

    position: absolute;
    bottom: 15px;

• In the plan add a margin and a curve at the edge

border-radius: 20px;
    margin: 0 30px;

• On the image instead of writing border-top-right-radius: 25px; border-top-left-radius: 25px; type border-radius 25px 25px 0 0 . Much easier to understand and shorter

• add a curve on the edge at the bottom of the card

-Add a hove effect to the "share" and cancel button

• Only with these suggestions I gave, look how the design would look, https://prnt.sc/1vm3zra

• I would recommend you take a look at other people's solutions to see how others have done so you can learn a lot

Hey Marlon, thanks for the feedback I am aware of the semantic tags and probably agree about using semantics like section etc in hindsight.

I did rush this task a little just to finish I think I will probably revisit later and take your points on board