Order Summary Component Using CSS Flex 💪

👾Hello Fahim Hossain, congratulations for your new solution!

🎨 Here’s some tips to improve your component design:

To make your solution even better and more responsive, you can create a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

@media (max-width: 350px) {
.plan-div {
    margin: 15px 0;
    background-color: var(--Very-pale-blue);
    display: flex;
    flex-direction: column;
}
}

The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

✌️ I hope this helps you and happy coding!

Hi Fahim Hossain, how are you?

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

I noticed that the background image is breaking at higher resolutions, to fix this I did the following:

body { background-repeat: repeat-x; }

This way the image will repeat only on the x axis.

The rest is great! Hope it helps... 👍

HI,

Congrats on completing the challenge. Use the link below for box shadows just click on the one you want and paste it in you CSS file.

https://getcssscan.com/css-box-shadow-examples