1
00:00:00,510 --> 00:00:05,040
So now what I'm going to do is that I'm going to first work on the design further, and then I'm going

2
00:00:05,040 --> 00:00:07,350
to display the product information on the right side.

3
00:00:08,520 --> 00:00:14,280
First of all, in the single product, I'm going to give this section, I'm going to give this section.

4
00:00:14,910 --> 00:00:18,780
This section, I'm going to give it the bootstrap class, the container.

5
00:00:18,780 --> 00:00:20,190
I'm going to say each container.

6
00:00:20,550 --> 00:00:21,000
Why?

7
00:00:21,570 --> 00:00:27,570
Because if I give it the container, you'll find that if I refresh, you'll find that it will fit the

8
00:00:27,570 --> 00:00:28,500
screen perfectly.

9
00:00:28,500 --> 00:00:31,160
As you can see, there will be there will be even more space.

10
00:00:31,710 --> 00:00:35,880
And the the slider was removed.

11
00:00:36,720 --> 00:00:38,210
Now, let's work on this area.

12
00:00:38,220 --> 00:00:41,700
Let's say you display information about this product, such as the product.

13
00:00:41,700 --> 00:00:47,490
And for me, product, the details, the quantity, the add to cart button, all of these things.

14
00:00:48,330 --> 00:00:56,880
And to do this, remember below for this there an inside inside of the raw inside this raw which is

15
00:00:56,880 --> 00:00:57,120
this.

16
00:00:57,120 --> 00:01:00,480
Then we need to create another dev.

17
00:01:00,510 --> 00:01:10,440
We need to say there and this dev is going to have glass and that glass will have column large, six

18
00:01:11,520 --> 00:01:14,610
or four large screens or medium screens.

19
00:01:15,030 --> 00:01:20,610
I'm going to give it 12 columns for four small screens.

20
00:01:21,600 --> 00:01:23,540
You can give it 12.

21
00:01:23,550 --> 00:01:24,420
Let's give it 12.

22
00:01:24,870 --> 00:01:27,240
By the way, you can say here column called.

23
00:01:27,240 --> 00:01:35,970
Well, without saying esim, which means that by default it's going to be by default it's going to take

24
00:01:35,970 --> 00:01:44,610
12 columns in case in case the screen is doesn't fit, is not considered large and it is not considered

25
00:01:44,610 --> 00:01:45,390
medium either.

26
00:01:46,390 --> 00:01:47,860
It will take 12 cops.

27
00:01:50,560 --> 00:01:53,770
So here is this the first I'm going to display six.

28
00:01:54,250 --> 00:01:59,980
And then I'm going to say here, for example, or main, let's say man.

29
00:02:02,850 --> 00:02:08,550
Shoes and then I'm going to spray three.

30
00:02:08,970 --> 00:02:17,640
And in this thing, I'm going to display the some text, let's say the category, for example, men's

31
00:02:17,640 --> 00:02:18,210
fashion.

32
00:02:21,890 --> 00:02:23,300
And I'm going to give this a glass.

33
00:02:25,440 --> 00:02:30,330
Class B y for batting.

34
00:02:30,960 --> 00:02:38,930
Top and bottom for next I'm going to work on the price, so meet me lor this H3.

35
00:02:38,940 --> 00:02:40,220
We need to display the price.

36
00:02:40,230 --> 00:02:41,130
I'm going to say here.

37
00:02:42,160 --> 00:02:42,760
It's true.

38
00:02:42,760 --> 00:02:44,200
And then I'm going to display the price.

39
00:02:46,510 --> 00:02:49,810
I'm going to say a price, any price you want.

40
00:02:55,410 --> 00:02:58,230
And then let me be law this price.

41
00:02:58,680 --> 00:03:04,140
I'm going to display the input and that input will display the number of products.

42
00:03:04,150 --> 00:03:04,980
I'm going to say input.

43
00:03:08,350 --> 00:03:16,960
And and inside this input we need to give it first time that I will be in number because this is a number.

44
00:03:18,070 --> 00:03:19,630
And value.

45
00:03:21,600 --> 00:03:32,970
Their value is one because by default a user, we would expect the user to buy only one item and therefore

46
00:03:32,970 --> 00:03:34,140
we need to say here one.

47
00:03:35,690 --> 00:03:38,060
And below this, I'm going to speak about it.

48
00:03:39,100 --> 00:03:42,970
I'm going to say your button button.

49
00:03:42,970 --> 00:03:46,000
And then for this button, I'm going to say Add to cart.

50
00:03:46,090 --> 00:03:49,660
Add to cart.

51
00:03:50,440 --> 00:03:53,920
And I'm going to give it a class.

52
00:03:54,790 --> 00:03:55,420
Class.

53
00:03:56,830 --> 00:04:01,030
Math classes are going to be bye bye bye bye.

54
00:04:01,030 --> 00:04:02,830
In which every parent that we already have.

55
00:04:04,760 --> 00:04:05,240
And.

56
00:04:07,400 --> 00:04:12,830
And we can use another class if we want or we can edit this, this, this class.

57
00:04:12,830 --> 00:04:18,740
I'm going to show you the I'm going to show you another method of editing the redesign of this bottom.

58
00:04:18,740 --> 00:04:21,500
But first, let me show you how this looks like.

59
00:04:21,500 --> 00:04:28,040
Now, if I refresh, as you can see, we have here it says main section, main juice and then main function.

60
00:04:28,040 --> 00:04:32,930
And then in year 155, which is the price and then here the.

61
00:04:34,410 --> 00:04:40,520
One one, which is the quantity, and you can increase the quantity on the add to cart button.

62
00:04:41,040 --> 00:04:45,270
But of course, we need to work on the design and also we need to display the details.

63
00:04:45,750 --> 00:04:48,390
So first, let's display the details below of this button.

64
00:04:48,870 --> 00:04:50,450
Below this button I'm going to hear.

65
00:04:50,610 --> 00:04:52,440
See, it's for.

66
00:04:57,180 --> 00:04:58,050
Below the button.

67
00:05:01,050 --> 00:05:02,580
And they're going to say here, project

68
00:05:04,980 --> 00:05:05,880
details.

69
00:05:07,630 --> 00:05:11,620
Let's meet this itch for glass.

70
00:05:14,610 --> 00:05:15,720
Margin top five.

71
00:05:17,660 --> 00:05:22,700
And margin margin bottom line and below it, I'm going to display that next.

72
00:05:23,360 --> 00:05:27,710
So I'm going to sit here, span and be inside that span.

73
00:05:27,710 --> 00:05:29,420
I'm going to display the details.

74
00:05:29,420 --> 00:05:32,330
I'm going to say here, see the tables.

75
00:05:48,140 --> 00:05:51,650
So this is just that this mistakes are just for the sake of this thing.

76
00:05:51,650 --> 00:05:53,720
And later we can edit this text.

77
00:05:54,500 --> 00:05:59,210
Lainey here, click on file and Save All Illini show you how this would look like.

78
00:05:59,780 --> 00:06:02,360
So if I refresh, as you can see, this is how it's going to look like.

79
00:06:02,780 --> 00:06:05,270
However we to fix the design of this.

80
00:06:05,270 --> 00:06:07,220
Of course the design is not that good.

81
00:06:08,060 --> 00:06:09,110
Let's work on the design.

82
00:06:09,110 --> 00:06:11,360
So I'm going to hand it over to the style the team says.

83
00:06:11,990 --> 00:06:20,270
I think the style that says what we want to do is that we want to work on the button and we want also

84
00:06:20,270 --> 00:06:24,980
to work on the the input we need to fix the input.

85
00:06:25,580 --> 00:06:27,740
So I'm going to start by fixing the input.

86
00:06:28,250 --> 00:06:35,570
So the input here has a outline here are colored in blue and I want to remove this.

87
00:06:36,020 --> 00:06:37,430
To remove this I'm going to say here.

88
00:06:39,790 --> 00:06:40,690
Single project.

89
00:06:40,690 --> 00:06:41,740
Remember the the.

90
00:06:42,730 --> 00:06:48,200
The big section class is single product.

91
00:06:48,220 --> 00:06:51,190
So I'm going to say here that single.

92
00:06:53,580 --> 00:06:54,050
Project.

93
00:06:56,540 --> 00:06:58,340
I'm going I'm going to access the input.

94
00:06:58,490 --> 00:06:59,360
I'm going to say input.

95
00:07:01,510 --> 00:07:06,990
And then I'm going to say, you focus, focus, and then I'm going to remove the outline.

96
00:07:07,000 --> 00:07:09,940
I'm going to say outline, outline.

97
00:07:09,940 --> 00:07:10,360
None.

98
00:07:11,170 --> 00:07:12,190
Now, if I.

99
00:07:13,880 --> 00:07:23,720
If I refresh and here if I click, you're inside the borders or the the outline was removed.

100
00:07:24,650 --> 00:07:27,500
Let's work on the design of that input.

101
00:07:27,500 --> 00:07:30,470
So I'm going to say here that single.

102
00:07:31,530 --> 00:07:34,090
Product and then input the input itself.

103
00:07:34,090 --> 00:07:36,510
And now let's let's fix the width.

104
00:07:37,110 --> 00:07:39,150
So the width, as you can see, the width is too big.

105
00:07:39,150 --> 00:07:39,900
We don't want this.

106
00:07:39,900 --> 00:07:41,850
We want it to be much smaller.

107
00:07:42,630 --> 00:07:43,800
So I'm going to change the width.

108
00:07:43,800 --> 00:07:45,660
I'm going to say here width.

109
00:07:46,470 --> 00:07:52,550
So the width would be only, let's say 50 pixels.

110
00:07:53,910 --> 00:08:00,600
And then I'm going to change also the height to 40%, 40, and they're going to change.

111
00:08:00,930 --> 00:08:02,700
Also the padding and the font.

112
00:08:03,090 --> 00:08:12,360
So for the padding list, we want and we want to add padding left because because as you can see, the

113
00:08:12,360 --> 00:08:17,370
number is very close to the left side and we want to shift that number a little.

114
00:08:20,600 --> 00:08:27,380
Next, I'm going to change the font size so the font size would be 16 X.

115
00:08:28,430 --> 00:08:39,620
And finally, I'm going to add margin write margin right in the X because they want hear some space

116
00:08:39,860 --> 00:08:40,850
and want to hear some space.

117
00:08:41,390 --> 00:08:43,910
Let me refresh and show you how this is going to look like.

118
00:08:43,910 --> 00:08:47,530
And you can see now the this this input looks perfect.

119
00:08:47,540 --> 00:08:52,820
Now the number is very clear and big enough for the user to see.

120
00:08:53,360 --> 00:09:02,090
And the the the box itself is very, very good in terms of its dimensions.

121
00:09:04,050 --> 00:09:04,890
This is for the input.

122
00:09:04,920 --> 00:09:06,120
Let's work on the button.

123
00:09:06,600 --> 00:09:09,120
So for the button, remember this button.

124
00:09:10,130 --> 00:09:13,160
The man, and I'm going to change the color of this balance.

125
00:09:13,160 --> 00:09:15,080
And instead of his playing this button in black.

126
00:09:15,410 --> 00:09:16,760
I'm going to split an orange.

127
00:09:17,450 --> 00:09:27,800
So I'm going to say, yea, that single product and then that my button and then I'm going to work on

128
00:09:27,800 --> 00:09:27,980
this.

129
00:09:28,250 --> 00:09:30,950
Remember that we already have a class called the bio button.

130
00:09:31,460 --> 00:09:37,820
But if I, if I just access the buy button one more time without saying a single product, this is going

131
00:09:37,820 --> 00:09:42,320
to ruin the original design of the buying button.

132
00:09:42,800 --> 00:09:48,320
Therefore, we need to say a single product and then buy a button, or we can create a new class.

133
00:09:48,350 --> 00:09:49,460
So you have two options.

134
00:09:49,790 --> 00:09:56,840
You can create a new class called Add to Cart, for example, or you can use a single product and then

135
00:09:56,840 --> 00:10:01,460
by button so you can hear if you don't want to be confused.

136
00:10:02,910 --> 00:10:05,500
If you're going to if you don't want to get confused, you can't.

137
00:10:05,520 --> 00:10:08,340
You're saying add to cart button.

138
00:10:08,850 --> 00:10:13,680
But but add to cart button is going to be a very long award.

139
00:10:14,240 --> 00:10:16,020
Therefore, I'm just going to say my opponent.

140
00:10:17,040 --> 00:10:18,510
So I'm going to say here Bible.

141
00:10:19,080 --> 00:10:25,110
But what you need to know that this my button since I say a single product, it's inside the single

142
00:10:25,110 --> 00:10:25,800
product page.

143
00:10:26,490 --> 00:10:28,920
Let's change now the background color.

144
00:10:28,930 --> 00:10:30,060
I'm going to say background color.

145
00:10:30,060 --> 00:10:35,880
So the background color is going to be the orange color, the thing you have already used earlier.

146
00:10:36,540 --> 00:10:40,980
And again, I'm going to change the opacity to one, I want the opacity to be one.

147
00:10:41,610 --> 00:10:43,500
And they want transition.

148
00:10:44,280 --> 00:10:45,930
Transition of point.

149
00:10:45,930 --> 00:10:48,810
4 seconds all.

150
00:10:52,330 --> 00:10:53,470
Let's save and refresh.

151
00:10:55,220 --> 00:10:57,530
And as you can see, it's going to be orange.

152
00:10:58,280 --> 00:10:59,090
It's going to be orange.

153
00:10:59,690 --> 00:11:01,340
Let's also change the.

154
00:11:02,390 --> 00:11:05,510
The Hover said, I'm going to add a hover effect to it.

155
00:11:05,510 --> 00:11:10,970
I'm going to say single product that my button and then hover.

156
00:11:12,710 --> 00:11:16,970
And I'm going to change this to the background going as a background.

157
00:11:17,540 --> 00:11:23,270
So the background color, if I hover over it, let's use this color.

158
00:11:30,390 --> 00:11:32,960
So as you can see, if I hover over it, it's going to be like this.

159
00:11:35,160 --> 00:11:36,540
So this is how it's going to look like.

160
00:11:36,540 --> 00:11:37,680
I think it looks amazing.

161
00:11:38,070 --> 00:11:41,280
And that you might be you might think that this area is too big.

162
00:11:41,790 --> 00:11:46,710
It's not actually too big because we we don't have your text, but we we have a lot of text.

163
00:11:47,040 --> 00:11:48,510
It's not going to be that big.

164
00:11:50,100 --> 00:11:52,500
So here, let me show you what I mean.

165
00:11:52,950 --> 00:11:56,550
So here we need to add this text many times.

166
00:11:56,550 --> 00:11:59,730
So let me add this text four or five times.

167
00:11:59,730 --> 00:12:01,350
I'm going to say I'm going to put it here.

168
00:12:01,830 --> 00:12:03,270
One, two, three, four.

169
00:12:04,230 --> 00:12:10,140
So if we have a lot of text here and we will we should have a lot of text that describes this product.

170
00:12:10,560 --> 00:12:15,540
As you can see, the area is not it's not large because we now we have a lot of things.

171
00:12:16,560 --> 00:12:18,030
So this is how it's going to look like.

172
00:12:21,260 --> 00:12:28,990
Now what we want to do is that we we want to display the related products below this below this.

173
00:12:29,570 --> 00:12:36,650
So in order to do this, we need to get the products, the the the codes that we already have created.

174
00:12:37,220 --> 00:12:44,420
So if you if we go back, you will find that if you can go back to the you remember if you go back to

175
00:12:44,420 --> 00:12:46,100
the index, let go to the index.

176
00:12:49,170 --> 00:12:55,710
So if you go to the index, which is the homepage, you'll find that we already have this, this, this

177
00:12:55,890 --> 00:12:57,300
feature section.

178
00:12:57,540 --> 00:13:04,440
We can use this feature section in the single product to display the related products.

179
00:13:04,950 --> 00:13:08,340
So I'm going to head over to the index and the index.

180
00:13:08,820 --> 00:13:09,900
Remember, we have.

181
00:13:12,920 --> 00:13:15,180
We have here the feature.

182
00:13:15,200 --> 00:13:16,000
I'm going to copy this.

183
00:13:16,010 --> 00:13:22,010
I'm going to close it first and then I'm going to copy it and I'm going to paste it in this single project

184
00:13:22,010 --> 00:13:24,110
that will Belal.

185
00:13:25,290 --> 00:13:26,250
Below this section.

186
00:13:26,250 --> 00:13:28,980
Below the section, below this single.

187
00:13:28,980 --> 00:13:29,730
I'm going to sit here.

188
00:13:31,560 --> 00:13:32,310
Single.

189
00:13:34,290 --> 00:13:34,820
Product.

190
00:13:39,500 --> 00:13:41,180
So we launched a single project.

191
00:13:42,410 --> 00:13:45,650
I'm going to basically this feature.

192
00:13:45,710 --> 00:13:47,960
I'm saying I'm going to change first here.

193
00:13:47,960 --> 00:13:51,410
And so the feature and I'm going to say related products.

194
00:13:51,590 --> 00:13:55,670
Related products.

195
00:13:57,770 --> 00:13:59,180
And I'm going to hear you say it.

196
00:13:59,630 --> 00:14:00,680
Related.

197
00:14:03,300 --> 00:14:04,050
Products.

198
00:14:06,390 --> 00:14:07,620
Related products.

199
00:14:11,030 --> 00:14:12,380
And here I'm going to say.

200
00:14:14,750 --> 00:14:15,800
Related.

201
00:14:19,640 --> 00:14:20,390
Products.

202
00:14:22,660 --> 00:14:24,220
And I'm going to remove this paragraph.

203
00:14:24,230 --> 00:14:26,320
I don't need this paragraph here.

204
00:14:28,030 --> 00:14:33,430
And let me close this section and let's save the browser and refresh.

205
00:14:34,940 --> 00:14:40,570
And as you can see, we will have this related products displayed, which looks amazing by law.

206
00:14:40,590 --> 00:14:46,370
It's going to be below this, me and the single product area here.