Order Summary Card challenge Solution

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

What I'm Most Proud Of Responsive Design: I’m proud of how the card looks great on both mobile and desktop using Bootstrap and media queries.

Clean Code: I kept the HTML and CSS organized, making it easy to maintain.

Customization: I personalized the design while staying true to the original challenge.

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

Image Border Radius Issue: I had trouble applying a border-radius to the image to make it rounded. The issue was due to the image not inheriting the parent container's properties. I solved this by ensuring the image was inside a container with overflow: hidden and applying the border radius directly to the image itself.

Flexbox Justify-content-between: The justify-content-between in Flexbox didn’t distribute the items evenly at first. I realized that the container was not properly set up, so I fixed it by ensuring all child elements were correctly aligned and adjusted the container’s properties to make sure the elements spaced out as intended.

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

Background Adjustments: I would appreciate some guidance on fine-tuning the background images for different screen sizes. While I’ve set different images for mobile and desktop, I’d like to improve the alignment and ensure they cover the screen correctly without distortion.