Order summary Component using HTML and CSS

@Dainaa yeah thanks for your suggestion. I added the background. well, can you please tell me how can I make a wavy effect with two circles?

@Tiyana19 Sure! Here's an example, quickly put together and best viewed at widths 1000px or lower. https://codepen.io/dainaa-the-lessful/pen/dyRQQwG?editors=1100 ^ Go to the link and change the colors of all the elements to see where they are, and you'll get an idea of what's going on. It's a quick hacky sort of way to get a decent background if you've got fixed dimensions. Play around with some CSS and you can do a bunch of things this way.

Also, my bad about bezier-curves, I forgot that they're a timing thing and not a drawing thing, so you can't use those to draw on your webpage. Oopsie :)

If you need perhaps something more detailed, I'd recommend you read up on HTML Canvas on w3schools.com, or similar.

@Dainaa Thank you so much... I got to know this new way to set the wavy look. but I want to ask you one more question, in your pen you set position to absolute to both circles but then why didn't you set position to a relative in their parent element?

@Tiyana19 You could, technically we try to position absolute elements relative to their parents. If no parent with a position property is found, then the absolute positioning is applied relative to the viewport. I was able to set up the circles to convey the idea without it, but you're right it is probably good practice to do so :)

@Dainaa Thank you so much 😊 You solved my one of question actually few days ago I set a card element to center using bootstrap class it was also position to absolute but mine element was also not had any parent element so I also can't set the position relative but it still worked so I was really confused that how does it happen. Bot now I understand 😃

@Tiyana19 Anytime!

@nicm42 thank you so much... I also thought, why my screenshot is not showing but now it works. but I don't understand that thing in the square brackets can you please explain it to me...

@Tiyana19 It's how you do images in markdown. It's like having your image src in normal brackets and your image alt in square brackets with an exclamation mark in front.

In HTML you'd have

<img src="image.jpg" alt="This is an image">

In markdown you have

![This is an image](image.jpg)

@nicm42 ok I understand what you said but then why did you put [Desktop], I mean it does that images that are in a folder and that don't have any alt text, their alt text would be [Desktop]? By the way, Thank you so much I didn't know about this thing before.

@Tiyana19 Images don't have alt text intrinsically, you have to add it in HTML or markdown. I put [Desktop] because I copied one of mine and forgot to change it to something that made more sense on its own :) It means that the alt text will be Desktop.

@nicm42 ok I got it Thank you so much 😊

@YoussefMuhamedElgohre Thanks