Order Summary Component using Html, CSS

Depending on the image problem, you have some properties that can help you with this, in this case it would be: background-repeat: no-repeat; background-size: contain;

The first, as the name implies, is for non-repeat, and the second with background-size contain, the background image is sized to fit completely inside the parent element, so that the image is not cut off. There are other possibilities with these attributes too, but for this case these would be the ideas.

Another tip is to try to use shorthands, for example in the margin, in some places you have defined 3 properties for the margin when you could use the margin shorthand and define just one, for example, margin: 0px 30px 20px 30px, I'm saying that I want a margin-top of 0px, a margin-right of 30px, a margin-bottom of 20px and a margin-left of 30px, if you want to set it equal to the sides and equal vertically as well just use margin: 10px 20px; in that case you've set 10px for top-bottom and 20px for right-left.

There are several other abbreviations that made your code shorter and cleaner, it's worth researching. Good studies!!!

Hey there, congratulations on completing the challenge, here's what you can do with the background image:-

• first of all add the background-image property to body
• then use the following code

body{
      background-image: url(img-url);
      background-repeat: none;
      background-size: cover;
      background-position: center;
}

• to make it more like the challenge one you can add a linear gradient as well, here you go with the references:- background-image linear-gradient

Hope you find it useful

@Ashok-Kumar-dharanikota congratulations on completing this challenge, you've done a great job🎉 But there are some things you should consider changing🙂 :

• I don't know why you chose to give a background-color to your wave-container (background: rgba(55, 210, 237, 0.412); )🤔 Remove it, you don't need this.
• Then inside of your wave-container you've already set the background-image you just need to set the other background properties to make it work properly

.wave-container {
background-size: contain;
background-repeat: no-repeat; //it will stop the repeating issue with your background-image
background-color: hsl(225, 100%, 94%); //pale blue

The background image and color issue is solved🎉🎉

• And now to make the third div go right next to the music icon, You don't need the .third div inside of your div one you can have two children's a second div and a <a> tag. Inside of your second div you can put the music icon and a <p> with a <span> just like you set on your third div and then

.one {
display:flex;
justify-content: space-between:
}

There are two items in your one div a div with a class of second and a anchor tag so justify content of space between will separate both of them to the side of their parent element which one so the music icon and the p will go to one side as and the a tag will go to the other side as they are siblings and you can adjust the space of the music icon and p by giving the second a class of flex or maybe using padding or margin as you would like

I hope it was helpful for you👍👍

Happy coding brother🙂🙂

@Ashok-Kumar-dharanikota can you be more clear on your second query, like what exactly you want to ask and achieve........

To me the interface looks pretty fine!!!