Welcome back.
Now it's time to work on the design of the number of items we have in the cart so I can see the design.
It doesn't look good.
We need to display the number right above the icon.
So to do this, we need to use this.
So remember in the header that we have the span and I'm going to give this Spanish class, I'm going
to take class.
Guard.
Quantity.
And then I'm going to keep this class in the course here.
I'm going to give you this.
I'm going to say here.
Car.
Wanted it.
So, first of all, I'm going to give it a background.
So I'm going to give you the background color of the orange color.
And I'm going to also give it a white color.
I'm going to give it a color white.
And I'm going to give it padding, padding to be top and bottom and five x right and left.
And I'm going to also see a border radius, 50%, because I want to use the circle.
I want to get the circle around this number.
And finally, I'm going to say margin.
Margin minus to be asked to display the number right above this icon.
Let me now click on file and save all.
And show you how awesome this is.
And if I refresh, boom, we have this icon, as you can see, it's being displayed here.
You can even fix this further by adding here, by changing this slightly.
For example, you can see margin minus three.
If you say minus three, it's going to be shifted to do the to the to the icon.
To the icon.
You can increase this even further.
And I'm going to also say font.
Size font size one rim.
I think this is going to fix it and make it even better.
So as you can see, it's even better.
Let me shift it again a little more to the left side.
So as you can see, it's amazing.
Now this will always be displayed.
Limitées now.
So if I go to the cart and if I remove everything from the cart, this will be will will not be displayed
anymore because there is nothing in the cart.
However, if I add something to the cart, this will be displayed back again into the cart.
So if I add this to the cart, this will be displayed back again.
So now it's.
It's perfect.