1
00:00:01,300 --> 00:00:04,960
Now what I'm going to do is that I'm going to work on the cart page.

2
00:00:05,710 --> 00:00:11,080
So in order to work on the cart page, we need to create a new page called CART.

3
00:00:11,620 --> 00:00:20,680
So I'm going to here in my project, I'm going to create a new file here called Cart that Female.

4
00:00:21,430 --> 00:00:28,420
And then since this cart will have the we'll have also the navigation bar as well as the footer.

5
00:00:28,420 --> 00:00:31,960
We need to get to the navigation bar and the footer from one of these pages.

6
00:00:31,970 --> 00:00:36,670
So I'm going to open up the index and then from the top I'm going to copy the body.

7
00:00:37,150 --> 00:00:38,470
First, I'm going to copy the body.

8
00:00:39,220 --> 00:00:45,430
I'm going to copy from starting from the first line of the page all the way to the body.

9
00:00:45,910 --> 00:00:51,820
And then I'm going to base it in the car strategy HTML and then in the index, I'm going to go back

10
00:00:51,820 --> 00:00:58,180
to the index and then I'm going to copy also the last three lines, the script, the closing tank of

11
00:00:58,180 --> 00:01:00,760
the body and the closing tag of the HTML.

12
00:01:01,270 --> 00:01:05,470
And then I'm going to place it in the again in the cart that is female.

13
00:01:06,040 --> 00:01:08,800
But you need to leave here a big space.

14
00:01:10,000 --> 00:01:12,560
Now, we need to give you a navigation bar as well as before.

15
00:01:13,150 --> 00:01:15,710
So from the index, I'm going to get the navigation bar.

16
00:01:16,570 --> 00:01:17,770
We have this nav bar.

17
00:01:17,770 --> 00:01:24,370
I'm going to copy it and then I'm going to put it here in the cart and then I'm going to close it first.

18
00:01:26,150 --> 00:01:31,370
So this is the navigation bar, and then I'm going to go back to the index and get the footer.

19
00:01:31,820 --> 00:01:32,810
So we have this splitter.

20
00:01:32,810 --> 00:01:38,330
I'm going to copy the footer and then I'm going to base it in the car so that it should email again

21
00:01:38,330 --> 00:01:38,720
here.

22
00:01:39,410 --> 00:01:43,420
And then you need to close it in order to see where it is.

23
00:01:43,430 --> 00:01:49,610
So here we as you can see, we have the navigation bar and then we have space and then we have the footer.

24
00:01:50,210 --> 00:01:52,880
So now let me check that in the browser.

25
00:01:53,540 --> 00:01:59,960
So I'm going to go back to the browser and then I'm going to go to the cart that it's G-mail.

26
00:02:00,680 --> 00:02:03,830
And as you can see, we have a navigation bar and we have the footer.

27
00:02:04,310 --> 00:02:08,090
Now we need to work on the content of the navigation of the cart.

28
00:02:08,810 --> 00:02:16,550
So the cart will contain obviously the products that the user added to the cart and also their information

29
00:02:16,550 --> 00:02:25,220
such as the price, the name of their product, the quantity, the the total price, all these things.

30
00:02:26,450 --> 00:02:31,970
So in order to work on the cart, I'm going to this time, I'm going to be using a table.

31
00:02:32,240 --> 00:02:42,230
At table is the easiest and best way to to use in order to create a well-designed cart.

32
00:02:43,070 --> 00:02:47,900
So here I'm going to add a comment and then I'm going to say cart.

33
00:02:48,860 --> 00:02:53,930
And as usual, I'm going to start with the session with the section.

34
00:02:58,980 --> 00:03:03,690
And then in this section, I'm going to give it as usual class.

35
00:03:04,810 --> 00:03:06,100
And then I'm going to say carte.

36
00:03:08,060 --> 00:03:09,410
The collapsing is going to be hard.

37
00:03:09,410 --> 00:03:11,540
And also I'm going to give it as usual, a container.

38
00:03:12,410 --> 00:03:16,460
Container and margin.

39
00:03:16,790 --> 00:03:19,610
Top and bottom five and padding.

40
00:03:19,610 --> 00:03:20,810
Top and bottom five.

41
00:03:22,060 --> 00:03:29,530
And then inside that section, I'm going to give it a name first and I'm going to give it a glass.

42
00:03:29,530 --> 00:03:32,740
I'm going to say glass and the class is going to be again, container.

43
00:03:32,740 --> 00:03:40,360
I'm going to give it a container to add some margin margins from the right and left.

44
00:03:40,360 --> 00:03:43,740
And also, I'm going to give it margin top five inside the there.

45
00:03:43,870 --> 00:03:50,860
I'm going to display a a text that says your cart.

46
00:03:52,150 --> 00:03:55,720
And I'm going to give this this H2 also a class.

47
00:03:57,040 --> 00:03:58,180
I'm going to say font.

48
00:04:00,210 --> 00:04:00,750
Wait.

49
00:04:02,870 --> 00:04:03,290
Well.

50
00:04:06,250 --> 00:04:09,310
And you can also add H.R. below this.

51
00:04:12,100 --> 00:04:15,400
And finally, I'm going to save this.

52
00:04:16,210 --> 00:04:19,450
So I'm going to able and then I'm going to head on over back to the browser and refresh.

53
00:04:20,260 --> 00:04:22,270
And as you can see, we have this your card.

54
00:04:22,780 --> 00:04:25,210
So this is the title of your card page.

55
00:04:25,600 --> 00:04:27,430
Let's now work on the card itself.

56
00:04:28,730 --> 00:04:30,210
So be lobbyists there.

57
00:04:30,830 --> 00:04:33,200
What I'm going to do is that I'm going to create a table.

58
00:04:33,210 --> 00:04:39,050
I'm going to say here table, and then I'm going to give this table first.

59
00:04:39,050 --> 00:04:40,910
I'm going to give it class.

60
00:04:41,450 --> 00:04:48,020
And the class that I'm going to give this table is the margin top five and also padding top five.

61
00:04:49,220 --> 00:04:52,960
Then inside that table, I'm going to add the here.

62
00:04:52,970 --> 00:04:55,940
TR And for this.

63
00:04:55,940 --> 00:04:58,700
TR We want.

64
00:05:00,340 --> 00:05:03,130
To display three columns.

65
00:05:03,700 --> 00:05:05,160
So I'm going to say, here's the edge.

66
00:05:06,010 --> 00:05:08,680
And the first first one is going to say product.

67
00:05:09,880 --> 00:05:12,270
And the second the edge.

68
00:05:12,280 --> 00:05:16,600
The second column will display the quantity.

69
00:05:17,440 --> 00:05:25,380
Quantity, and then the last column will display the subtotal.

70
00:05:29,090 --> 00:05:34,620
Let me save a lady here, then over to the browser and show you how this is going to look like.

71
00:05:34,650 --> 00:05:39,650
So as you can see, we have here product, quantity and subtotal, but we need to stretch of this so

72
00:05:39,650 --> 00:05:45,020
that the table takes we complete complete screen width.

73
00:05:45,770 --> 00:05:47,060
So we need to work on this.

74
00:05:47,060 --> 00:05:51,320
But before I do so, let's continue with this table.

75
00:05:51,320 --> 00:05:56,660
So be like this hand or below these columns.

76
00:05:56,660 --> 00:05:59,090
We need to display the first product.

77
00:05:59,480 --> 00:06:08,690
So I'm going to say t r and it's not that the R now I'm going to display T d, d d and the first d d

78
00:06:09,080 --> 00:06:15,860
I'm going to display a there that contains information about the product.

79
00:06:15,860 --> 00:06:20,630
So I'm going to take your class, I'm going to give it the class, and then I'm going to see product

80
00:06:21,500 --> 00:06:22,070
info.

81
00:06:24,230 --> 00:06:29,180
And inside that product info, I'm going to first display an image, the image of the product.

82
00:06:29,900 --> 00:06:35,210
Let's use the one of the images that we already have in here.

83
00:06:35,210 --> 00:06:42,950
I'm going to say assets, images and let's let's use the first image featured one and then I'm going

84
00:06:42,950 --> 00:06:44,540
to display below this image.

85
00:06:45,230 --> 00:06:51,790
I'm going to create another div that displays the product mean here.

86
00:06:51,800 --> 00:06:57,560
I'm going to say B and then I'm going to say white shoes.

87
00:06:59,330 --> 00:07:01,610
And below this I'm going to display the price.

88
00:07:02,180 --> 00:07:03,380
I'm going to say here small.

89
00:07:05,270 --> 00:07:06,280
And it's kind that small.

90
00:07:06,290 --> 00:07:12,620
I'm going to first add a span and that span will contain the dollar sign.

91
00:07:13,280 --> 00:07:19,040
And besides the dollar sign, I'm going to display the product price.

92
00:07:20,780 --> 00:07:22,920
And then below this, I'm going to break.

93
00:07:24,050 --> 00:07:31,340
Here I'm going to say B, R, and then I'm going to display the A button that will allow the user to

94
00:07:31,340 --> 00:07:34,210
remove the product from the car.

95
00:07:34,220 --> 00:07:38,360
So I'm going to say here are a tank and then I'm going to give it a class.

96
00:07:38,360 --> 00:07:41,390
I'm going to say class, remove button.

97
00:07:43,460 --> 00:07:44,680
And I'm going to say remove.

98
00:07:48,190 --> 00:07:48,480
Here.

99
00:07:48,610 --> 00:07:50,560
I'm going to say rebels.

100
00:07:54,320 --> 00:07:56,220
So this is for this part.

101
00:07:56,240 --> 00:07:59,780
Let me say first and then let me hit an over the back of the browser and refresh.

102
00:08:00,500 --> 00:08:06,860
And as you can see, we have here the product image and then we have here the name of the product and

103
00:08:07,220 --> 00:08:08,450
the price and removal.

104
00:08:09,050 --> 00:08:14,450
But before we continue working on on other things, let's fix this table.

105
00:08:14,870 --> 00:08:17,270
So to fix this table, I'm going to open up the access.

106
00:08:18,570 --> 00:08:20,700
Here in the assets, he says.

107
00:08:21,360 --> 00:08:22,050
The style.

108
00:08:22,050 --> 00:08:23,730
I'm going to work on the card.

109
00:08:24,780 --> 00:08:27,180
So here I'm going to add a comment.

110
00:08:28,940 --> 00:08:30,080
And then I'm going to say our.

111
00:08:36,070 --> 00:08:41,160
So first of all, we need to work on the table itself.

112
00:08:41,170 --> 00:08:44,380
So I'm going to say that correct table.

113
00:08:45,490 --> 00:08:47,230
So far the table itself.

114
00:08:48,570 --> 00:08:49,740
First the car.

115
00:08:49,830 --> 00:08:50,760
Remember the car?

116
00:08:50,850 --> 00:08:52,740
Is this the car?

117
00:08:52,770 --> 00:08:53,670
Is this glass?

118
00:08:53,670 --> 00:08:54,150
His car?

119
00:08:54,270 --> 00:08:55,740
And inside it, we have the table.

120
00:08:56,670 --> 00:08:58,950
Therefore, I say the car to the table.

121
00:08:59,580 --> 00:09:06,000
So for the car table, I'm going to first give it a width of 100% in order for it to take the complete

122
00:09:06,000 --> 00:09:06,570
screen width.

123
00:09:07,200 --> 00:09:09,870
And then I'm going to say border collapse.

124
00:09:10,710 --> 00:09:11,340
Collapse.

125
00:09:13,110 --> 00:09:14,430
Border collapse.

126
00:09:16,080 --> 00:09:16,680
Collapse.

127
00:09:18,510 --> 00:09:22,170
And then I'm going to say cards, products, product info.

128
00:09:24,000 --> 00:09:26,640
Protect and fall.

129
00:09:28,490 --> 00:09:37,790
And for the product and for first, I'm going to change the display to be flex, display, flex and

130
00:09:37,790 --> 00:09:46,130
the flex is going to be flex wrap is going to be wrap legs wrap, wrap.

131
00:09:50,490 --> 00:09:56,870
And for the heavy columns of the table, I'm going to you about the cart and then teach.

132
00:09:57,810 --> 00:10:07,140
And for these columns, we're going to change the text to align, to be on the left side and the padding.

133
00:10:07,140 --> 00:10:08,400
I'm going to give it a padding.

134
00:10:08,820 --> 00:10:18,510
The padding is going to be five x top and bottom and then the left and right for the color.

135
00:10:19,290 --> 00:10:23,310
The color is going to be white.

136
00:10:24,210 --> 00:10:27,870
The color of the text and the background color.

137
00:10:28,830 --> 00:10:30,240
Background color.

138
00:10:31,710 --> 00:10:35,700
Background color would be the orange color.

139
00:10:36,450 --> 00:10:39,060
Let me save now and let me check this in the browser.

140
00:10:39,060 --> 00:10:45,750
So as you can see, this is the head of the table here, product and then quantity and then subtotal.

141
00:10:46,470 --> 00:10:47,460
So this is the head.

142
00:10:48,450 --> 00:10:58,830
So we also need to work on the T, remember in the table we have t d the t d represents this TV represents

143
00:10:58,830 --> 00:11:03,750
the the image and the name of the product and the price and also the button.

144
00:11:05,140 --> 00:11:06,600
So we need to fix that.

145
00:11:06,610 --> 00:11:09,160
We need to fix the image and the product information.

146
00:11:09,760 --> 00:11:11,500
So I'm going to say that car.

147
00:11:13,450 --> 00:11:22,600
Teeny and then I'm going to give it first about I'm going to say batting and then batting from top and

148
00:11:22,600 --> 00:11:33,010
bottom would be to and from right and left would be 20 beatniks and the the.

149
00:11:33,280 --> 00:11:37,840
We also have the the the the.

150
00:11:38,970 --> 00:11:39,480
Dee Dee.

151
00:11:40,800 --> 00:11:42,150
Here we have.

152
00:11:44,360 --> 00:11:48,380
The image to this image of this image doesn't have a class.

153
00:11:48,380 --> 00:11:52,880
So we can access this image by saying that the cards.

154
00:11:54,630 --> 00:11:56,510
Car t.

155
00:11:57,960 --> 00:11:58,710
Image.

156
00:12:00,770 --> 00:12:07,130
And we can change the image width to be only a step because the image must be small.

157
00:12:07,820 --> 00:12:10,940
And the height also must be small.

158
00:12:11,090 --> 00:12:15,230
Must be something around 80 or 90 or maximum 100.

159
00:12:16,400 --> 00:12:17,630
I'm going to also give it a margin.

160
00:12:17,630 --> 00:12:17,960
Right.

161
00:12:19,070 --> 00:12:19,550
Margin.

162
00:12:19,550 --> 00:12:20,090
Right.

163
00:12:20,900 --> 00:12:22,190
Ten b x.

164
00:12:24,080 --> 00:12:26,330
Let me sleep and let me address this in the browser.

165
00:12:26,330 --> 00:12:33,800
So as you can see, the image now is much smaller and we have these we have the wrong information on

166
00:12:33,800 --> 00:12:34,310
the right side.

167
00:12:34,820 --> 00:12:36,890
Let's continue working on the design.

168
00:12:36,890 --> 00:12:37,280
So.

169
00:12:39,090 --> 00:12:48,960
What else we want to work on is the is that we need to we are done actually we are done with this part.

170
00:12:49,940 --> 00:12:53,870
We are done with this park, but here we are, the quantity as well as the subtotal.

171
00:12:54,620 --> 00:12:58,760
So in order to do this, I'm going to hand over my credit card.

172
00:12:59,360 --> 00:13:04,430
So in the cart, we need to work on the quantity.

173
00:13:04,430 --> 00:13:07,280
We need to display an input that displays the quantity.

174
00:13:07,940 --> 00:13:09,080
So below.

175
00:13:10,130 --> 00:13:11,600
Below this remove button.

176
00:13:12,200 --> 00:13:13,550
Below this remove button.

177
00:13:14,090 --> 00:13:16,520
What I'm going to do is that I'm going to create another TDI.

178
00:13:17,000 --> 00:13:26,270
So below this TDI, but inside this TR because we are still inside the same, the same row, we need

179
00:13:26,270 --> 00:13:27,290
to create another TDI.

180
00:13:27,290 --> 00:13:28,310
I'm going to say TDI.

181
00:13:28,910 --> 00:13:31,840
And for this TV, I'm going to first get an input.

182
00:13:31,850 --> 00:13:32,660
I'm going to say input.

183
00:13:33,710 --> 00:13:36,410
And this input I'm going to say type.

184
00:13:38,740 --> 00:13:39,490
Number.

185
00:13:42,370 --> 00:13:45,640
And then I'm going to say value want.

186
00:13:47,940 --> 00:13:50,160
The default value is going to be one.

187
00:13:51,740 --> 00:13:57,410
And then I'm going to add here a tag and this tag lasts.

188
00:13:57,410 --> 00:14:01,790
I'm going to give it a class called edit edit button and it.

189
00:14:03,270 --> 00:14:04,740
A red button.

190
00:14:07,890 --> 00:14:09,090
And here I'm going to say edit.

191
00:14:12,350 --> 00:14:16,850
And then below this edit I'm going to display the price.

192
00:14:17,570 --> 00:14:23,320
So below this TV, below this CD, I'm going to display the price.

193
00:14:23,330 --> 00:14:24,900
It's not going to be below it.

194
00:14:24,920 --> 00:14:26,270
It's going to be on the right side.

195
00:14:26,810 --> 00:14:34,640
So this CD will be displayed underneath the quantity, whereas the price is going to be displayed underneath

196
00:14:34,640 --> 00:14:35,510
the subtotal.

197
00:14:35,870 --> 00:14:41,390
So below this TV, we need to get another TV to this to display the price.

198
00:14:42,020 --> 00:14:44,360
So for this CD, I'm going to say TV and then Spain.

199
00:14:45,110 --> 00:14:47,020
And Spain.

200
00:14:47,630 --> 00:14:50,330
This pan will contain the dollar sign.

201
00:14:50,330 --> 00:14:50,810
And then.

202
00:14:51,800 --> 00:14:52,400
And then.

203
00:14:54,450 --> 00:14:54,930
Here.

204
00:14:54,930 --> 00:15:02,370
I'm going to create another paragraph that will display the actually I'm going to create another span

205
00:15:03,350 --> 00:15:07,950
span that will display the price.

206
00:15:10,390 --> 00:15:12,400
And then I'm going to give it to a class.

207
00:15:14,740 --> 00:15:16,820
Class is.

208
00:15:19,670 --> 00:15:22,490
And then I'm going to say price.

209
00:15:25,980 --> 00:15:26,820
Product.

210
00:15:29,160 --> 00:15:31,080
Rice, Laney.

211
00:15:31,080 --> 00:15:31,740
Slaven, Laney.

212
00:15:32,990 --> 00:15:33,920
Here refresh.

213
00:15:35,120 --> 00:15:40,610
And as you can see, we will have here the the quantity here, the input and the edit.

214
00:15:40,940 --> 00:15:42,470
And we have that price on the right side.

215
00:15:43,070 --> 00:15:47,810
But we need we still need to work on the design.

216
00:15:47,810 --> 00:15:49,310
So I'm going to hit the number to see if this.

217
00:15:50,970 --> 00:15:55,190
And then in thesis, I'm going to add the following design.

218
00:15:55,500 --> 00:15:59,070
First, what we need to do is that we need to fix the inputs.