Responsive Order Summary Component Code (HTML + CSS)

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

I am proud that I was able to build the highly closest design in comparison to the required design. From next time, I would try to complete the project in a significant lesser amount of time without compromising on the quality of the project.

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

Essentially, I encountered following challenges:-

1.Responsive paragraph.

2.Designing the plan portion.

3.Box-Shadow for the payment button.

4.Designing the background of the card.

I tackled these problems calmly by researching out various possible solutions, choosing the better solution, applying the solution, modifying it and then finalizing it. I used following approaches for respective problems:-

1.Padding helped out in the problem of making the paragraph responsive as per the given design across different devices.

2.Flexbox and `` element were highly useful, in designing the plan portion.

3.Setting up the box-shadow CSS property with proper values, helped in giving the payment button a bottom box-shadow.

4.Pseudo element ::before and position: fixed; were significantly helpful in designing the background.

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

Would love to know following:-

1.What better approach could be used for designing the background?

2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.

Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀