1
00:00:00,610 --> 00:00:01,270
Welcome back.

2
00:00:02,380 --> 00:00:09,350
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.

3
00:00:09,370 --> 00:00:10,210
It doesn't look good.

4
00:00:10,240 --> 00:00:13,960
We need to display the number right above the icon.

5
00:00:14,380 --> 00:00:16,070
So to do this, we need to use this.

6
00:00:16,540 --> 00:00:22,720
So remember in the header that we have the span and I'm going to give this Spanish class, I'm going

7
00:00:22,720 --> 00:00:23,410
to take class.

8
00:00:25,450 --> 00:00:25,990
Guard.

9
00:00:27,760 --> 00:00:28,510
Quantity.

10
00:00:29,990 --> 00:00:33,050
And then I'm going to keep this class in the course here.

11
00:00:33,800 --> 00:00:34,820
I'm going to give you this.

12
00:00:34,840 --> 00:00:35,600
I'm going to say here.

13
00:00:37,740 --> 00:00:38,220
Car.

14
00:00:40,100 --> 00:00:40,800
Wanted it.

15
00:00:41,960 --> 00:00:44,000
So, first of all, I'm going to give it a background.

16
00:00:44,510 --> 00:00:47,420
So I'm going to give you the background color of the orange color.

17
00:00:48,050 --> 00:00:49,760
And I'm going to also give it a white color.

18
00:00:49,940 --> 00:00:51,410
I'm going to give it a color white.

19
00:00:52,100 --> 00:01:00,800
And I'm going to give it padding, padding to be top and bottom and five x right and left.

20
00:01:01,460 --> 00:01:07,990
And I'm going to also see a border radius, 50%, because I want to use the circle.

21
00:01:08,480 --> 00:01:10,550
I want to get the circle around this number.

22
00:01:12,030 --> 00:01:13,770
And finally, I'm going to say margin.

23
00:01:14,760 --> 00:01:21,210
Margin minus to be asked to display the number right above this icon.

24
00:01:22,160 --> 00:01:24,140
Let me now click on file and save all.

25
00:01:25,290 --> 00:01:26,880
And show you how awesome this is.

26
00:01:27,390 --> 00:01:32,520
And if I refresh, boom, we have this icon, as you can see, it's being displayed here.

27
00:01:32,820 --> 00:01:39,000
You can even fix this further by adding here, by changing this slightly.

28
00:01:39,000 --> 00:01:42,870
For example, you can see margin minus three.

29
00:01:44,660 --> 00:01:51,830
If you say minus three, it's going to be shifted to do the to the to the icon.

30
00:01:51,980 --> 00:01:53,390
To the icon.

31
00:01:53,720 --> 00:01:55,460
You can increase this even further.

32
00:01:56,270 --> 00:01:59,330
And I'm going to also say font.

33
00:02:00,920 --> 00:02:03,110
Size font size one rim.

34
00:02:03,590 --> 00:02:06,170
I think this is going to fix it and make it even better.

35
00:02:07,640 --> 00:02:08,960
So as you can see, it's even better.

36
00:02:09,770 --> 00:02:14,090
Let me shift it again a little more to the left side.

37
00:02:16,200 --> 00:02:18,320
So as you can see, it's amazing.

38
00:02:18,330 --> 00:02:20,610
Now this will always be displayed.

39
00:02:20,610 --> 00:02:21,450
Limitées now.

40
00:02:21,870 --> 00:02:27,750
So if I go to the cart and if I remove everything from the cart, this will be will will not be displayed

41
00:02:27,750 --> 00:02:29,430
anymore because there is nothing in the cart.

42
00:02:29,850 --> 00:02:34,480
However, if I add something to the cart, this will be displayed back again into the cart.

43
00:02:34,500 --> 00:02:39,390
So if I add this to the cart, this will be displayed back again.

44
00:02:39,660 --> 00:02:40,770
So now it's.

45
00:02:40,920 --> 00:02:41,610
It's perfect.