Order Summary Card with CSS FLexbox

Others have commented about the CSS, so I'll focus on the HTML.

You have used a lot of divs. Instead of those you should try to use semantic elements. For instance instead of <div class="container"> <main> would be more appropriate. And <h1> should be the tag for the Order Summary title.

You've wrapped your <a> tags in a <div>. Because you've done that, you can only click on the text, not the surrounding blue background. Instead of doing that, set display: block on the <a> element and just style that, remove the div.

Using position: absolute; on every element is not a good idea. You will see this is a problem when you try it with larger projects which need to be responsive.

Almost all positioning can be done with a combination of grid, flex, padding and margin.

Your design looks perfect. But did you manually calculate those bottom, left, right, top? If yes then stop doing that. Try to use flex or grid as much as possible. So that other developers can read and modify your code easily. And use href="#" if you don't know the link.

wow! it looks so close to the original. how did you choose the color for the box-shadows? I thought it would be one of the custom colors from the design file, but I couldn't ever get mine to look quite right.