1
00:00:08,720 --> 00:00:09,860
In this video.

2
00:00:09,860 --> 00:00:12,740
Let's work on the hair styling.

3
00:00:12,860 --> 00:00:17,960
So back to the component that is the inside the hair component.

4
00:00:17,990 --> 00:00:23,390
Let's click on the header dot case and here we go.

5
00:00:23,600 --> 00:00:29,430
Let's open the component also so that we can make reference to it as we move on.

6
00:00:29,450 --> 00:00:32,880
So now let's start with the header container.

7
00:00:32,900 --> 00:00:38,420
Remember, the header container wraps everything inside the header.

8
00:00:38,420 --> 00:00:44,900
So let's go ahead and then select that as header dash container.

9
00:00:46,530 --> 00:00:48,090
And here we go.

10
00:00:48,180 --> 00:00:51,090
Let's give it display of flex.

11
00:00:51,090 --> 00:00:54,570
And then they flex direction as column.

12
00:00:54,780 --> 00:01:03,270
The next step is let's go ahead and style the header content, which is this one and that is these ones

13
00:01:03,300 --> 00:01:05,040
over here, this content.

14
00:01:05,040 --> 00:01:06,660
So let's try that one.

15
00:01:06,660 --> 00:01:11,100
So let's go ahead and then select that one also header.

16
00:01:13,280 --> 00:01:17,840
Dash content and here we go.

17
00:01:17,870 --> 00:01:24,830
Also ask display flex and then flex direction to be column.

18
00:01:25,070 --> 00:01:29,390
Remember, we are designing for mobile first approach.

19
00:01:29,390 --> 00:01:36,620
So let's try to reduce the screen size so that we see the mobile first approach first.

20
00:01:37,040 --> 00:01:38,630
So here we go.

21
00:01:38,630 --> 00:01:42,650
So now we are targeting or working on this one.

22
00:01:42,650 --> 00:01:45,470
So let's get going after that.

23
00:01:45,470 --> 00:01:55,070
Let's give it a line items as flat start and then justify content also as flex stops.

24
00:01:56,300 --> 00:02:01,790
Now let's have a look and indeed something like this one.

25
00:02:01,790 --> 00:02:02,390
Good.

26
00:02:02,390 --> 00:02:06,110
But I think we need to have some margin and padding around it.

27
00:02:06,110 --> 00:02:15,560
So margin top to be ten parsecs and then margin left to be 30 parsecs.

28
00:02:15,560 --> 00:02:17,390
So let's see the difference now.

29
00:02:17,420 --> 00:02:20,300
Now everything looks nice.

30
00:02:20,300 --> 00:02:23,030
So what about the H one, which is this one?

31
00:02:23,030 --> 00:02:25,640
So let's go ahead and target that one.

32
00:02:25,640 --> 00:02:28,730
Also going to be as header contained.

33
00:02:28,730 --> 00:02:32,630
And then the H1, which is this one, right.

34
00:02:32,780 --> 00:02:42,800
Let's change the font size to four ram and then the font family is Sarah.

35
00:02:43,460 --> 00:02:49,250
And then if there is no Sarah being installed, then issue four to Sans Serif.

36
00:02:49,370 --> 00:02:55,010
Now let's see a something like this as compared to the final one.

37
00:02:55,010 --> 00:02:58,100
We are almost there, right?

38
00:02:58,100 --> 00:03:03,680
The next step is about this one, which is a paragraph as compared to this one.

39
00:03:03,680 --> 00:03:07,850
We have a colour as this, so here we go.

40
00:03:07,880 --> 00:03:12,470
We can select this one and change this one to P meaning.

41
00:03:12,470 --> 00:03:15,800
We are targeting the paragraph inside this.

42
00:03:15,800 --> 00:03:23,600
So the font size for this is going to be as one point to red and then the line height for this one,

43
00:03:23,810 --> 00:03:26,990
the line height is 1.9.

44
00:03:26,990 --> 00:03:31,040
So let's see a something like this.

45
00:03:31,070 --> 00:03:31,730
Great.

46
00:03:31,730 --> 00:03:32,750
It looks beautiful.

47
00:03:32,750 --> 00:03:37,760
All right, next step is about the colour on that hashtag.

48
00:03:37,760 --> 00:03:45,260
70667f Now let's see a it looks good, right?

49
00:03:45,260 --> 00:03:46,970
Something like this.

50
00:03:47,120 --> 00:03:51,680
So let's also style the full name, which is this one here.

51
00:03:51,890 --> 00:03:54,830
So here we go, the full name.

52
00:03:54,830 --> 00:03:58,070
If you look at the structure, you will see the tag for that.

53
00:03:58,070 --> 00:04:06,410
So for this, let's set the font size to three ram and then margin top to be ten pixels and then the

54
00:04:06,410 --> 00:04:11,600
colour hashtag e0880.

55
00:04:11,600 --> 00:04:20,779
For now, let's see a something like this as compared to the final one by the font family I use is called

56
00:04:20,779 --> 00:04:21,350
play.

57
00:04:21,350 --> 00:04:25,250
So here font family is equal to play.

58
00:04:25,250 --> 00:04:33,200
Make sure that you have this font being installed and we have done that one and we have it as this great.

59
00:04:33,200 --> 00:04:38,210
The next step is let's go ahead and style the payment icon for now.

60
00:04:38,210 --> 00:04:39,680
Don't worry about the image.

61
00:04:39,680 --> 00:04:41,030
We will come back to it.

62
00:04:41,030 --> 00:04:43,730
So let's style the payment icon.

63
00:04:43,730 --> 00:04:45,080
So here we go.

64
00:04:45,110 --> 00:04:48,110
Remember, this is a payment container.

65
00:04:48,140 --> 00:04:54,260
Inside the header container, we have this payment container, which is this one.

66
00:04:54,260 --> 00:04:58,550
So we are going to copy this class and back to the CSS.

67
00:04:58,580 --> 00:05:02,210
Let's go ahead and then style it as that.

68
00:05:02,210 --> 00:05:08,630
So it display as flex and next is flex direction is row.

69
00:05:08,660 --> 00:05:15,530
This by default you can choose not to bring it and also align items to the center and then just file

70
00:05:15,530 --> 00:05:21,920
contained to the center for this one we have covered in details under Flexbox.

71
00:05:21,920 --> 00:05:31,820
So here let's use space between and margin tab is going to be as 20 P6 and margin bottom is going to

72
00:05:31,820 --> 00:05:33,980
be 30 pages for this one.

73
00:05:33,980 --> 00:05:39,380
We can use shorthand syntax to write this one, but for the meantime, let's maintain this one.

74
00:05:39,380 --> 00:05:48,080
So padding left also 30 pixels and then the weight is going to be as 90% great.

75
00:05:48,080 --> 00:05:53,660
So now let's see what we have something like this on mobile.

76
00:05:54,020 --> 00:06:01,760
So next step is let's target the button, which is this one, and you are going to select this class

77
00:06:01,760 --> 00:06:05,030
and you select the button.

78
00:06:05,030 --> 00:06:17,030
And for this let's add a background color to hashtag FC B to one, two and the border to be none and

79
00:06:17,030 --> 00:06:25,280
also padding on both sizes to ten pixels and then font size to be 1.2 ram.

80
00:06:25,370 --> 00:06:34,820
And also the font family here, let's use the same as play and the four font going to be sans serif.

81
00:06:34,970 --> 00:06:42,530
And for this one, let's give it border radius to be $5 can have something like a curve at the edges

82
00:06:42,530 --> 00:06:53,300
and box shadow to be 060 pixels and zero pixels and ten pixels with our GB color.

83
00:06:53,300 --> 00:06:55,580
So for red to be zero.

84
00:06:55,930 --> 00:07:01,540
And Green zero and then blue zero and opacity are 0.2.

85
00:07:01,780 --> 00:07:03,700
So let's see what we have.

86
00:07:03,730 --> 00:07:05,460
A we are almost there, right?

87
00:07:05,470 --> 00:07:06,910
So let's continue.

88
00:07:07,150 --> 00:07:15,700
The next step is let's target the individual icons for the payment that is the paper FSC and the MasterCard

89
00:07:15,700 --> 00:07:16,480
and an Amex.

90
00:07:16,480 --> 00:07:17,660
So here we go.

91
00:07:17,680 --> 00:07:23,770
So here we can say the icons or payment icons or card icons.

92
00:07:23,770 --> 00:07:28,240
So let's make it as payment icons.

93
00:07:28,240 --> 00:07:34,770
So let's start with the F a PayPal does PayPal great.

94
00:07:34,780 --> 00:07:40,420
So for this one, we have a color as hashtag.

95
00:07:41,900 --> 00:07:52,610
003087 and the font size the font size of this one as to REM pay par.

96
00:07:53,500 --> 00:07:57,250
That is a class for eight people.

97
00:07:57,560 --> 00:07:57,890
Great.

98
00:07:57,910 --> 00:07:59,600
So let's see.

99
00:07:59,620 --> 00:08:02,230
And we have the color for that.

100
00:08:02,380 --> 00:08:04,360
So I'm going to copy this one.

101
00:08:04,360 --> 00:08:09,550
And down here, I'm going to pass it here and going to be the fake Visa card.

102
00:08:09,550 --> 00:08:11,680
So I'm going to be as f a.

103
00:08:12,870 --> 00:08:15,270
F a C dash visa.

104
00:08:16,170 --> 00:08:25,140
So for this one, we can make a shorthand as this one like that multiple selection and save us before.

105
00:08:27,110 --> 00:08:32,120
And then to bring a comma here and this is what we have.

106
00:08:32,270 --> 00:08:35,150
The next step is going to be the MasterCard.

107
00:08:35,240 --> 00:08:36,340
So here we go.

108
00:08:36,350 --> 00:08:38,750
Dot F a dash.

109
00:08:38,750 --> 00:08:40,909
CC dash MasterCard.

110
00:08:42,590 --> 00:08:51,080
And for this one too, the color hashtag de 724, three, two, four, three, two.

111
00:08:51,170 --> 00:08:59,480
And the font size also has to ram through all I'd say with the font size so we can make it as a global

112
00:08:59,480 --> 00:09:02,720
class, but it's okay for these small projects.

113
00:09:02,720 --> 00:09:13,010
And lastly, it's about the F a cc MZ card going to be as F a cc cc dash max.

114
00:09:13,010 --> 00:09:16,100
And then the same way we're going to be at before.

115
00:09:16,100 --> 00:09:24,140
So I can even select it here as a comma separated dot dot and comma separated.

116
00:09:24,140 --> 00:09:28,100
So only one dot and let me remove it from here.

117
00:09:28,100 --> 00:09:35,420
And something like this as compared to the final one, we are almost dead right.

118
00:09:35,420 --> 00:09:41,060
So I think I need to give it a color for this one on the button.

119
00:09:41,240 --> 00:09:51,140
So let's come here and add a color hashtag f, f, f here is going to be hashtag f, f, f, yes.

120
00:09:51,140 --> 00:09:52,220
So let's save it.

121
00:09:52,350 --> 00:09:54,440
Now, this is what we have.

122
00:09:54,440 --> 00:09:55,010
Great.

123
00:09:55,130 --> 00:09:59,000
So we are done with the actual content.

124
00:09:59,000 --> 00:10:05,480
So let's work on the file image, which is this one, and then the border around it.

125
00:10:05,690 --> 00:10:08,480
So remember, this is what we have done with it.

126
00:10:08,480 --> 00:10:14,270
So let me collapse this one and collapse this one also here, this one.

127
00:10:15,070 --> 00:10:19,210
So let me collapse this one and let's work on the image container.

128
00:10:19,210 --> 00:10:25,290
So you're going to select the profile image container and back to the CCS.

129
00:10:25,300 --> 00:10:32,860
Let's go ahead and have a beautiful comment as profile image or let me say image, image.

130
00:10:33,040 --> 00:10:35,620
So here dot the class.

131
00:10:36,430 --> 00:10:45,080
And for this, I'm going to give it a position as relative because I want to control this once.

132
00:10:45,160 --> 00:10:46,960
Have a look at the final one.

133
00:10:46,960 --> 00:10:55,720
You can see that we have this DCA and that because I want to give this def as position called absolute

134
00:10:55,720 --> 00:10:57,130
and for absolute.

135
00:10:57,130 --> 00:11:01,810
You want to look up to the nearest parent which has a position correlated.

136
00:11:01,840 --> 00:11:05,470
Then going to position is a relative to that parent.

137
00:11:05,470 --> 00:11:11,770
That is why I'm giving this one a position for relative and that is it.

138
00:11:11,980 --> 00:11:15,070
So let's go ahead and start the actual image.

139
00:11:15,070 --> 00:11:18,820
So profile image container and then the IMG.

140
00:11:18,820 --> 00:11:20,140
So here we go.

141
00:11:20,140 --> 00:11:24,640
Can I be asked that profile image container and then the IMG.

142
00:11:24,640 --> 00:11:34,660
And for this one I want to give it a weight of 100% and then the height also as 100%.

143
00:11:34,660 --> 00:11:40,090
So let's have a look what I'm referring to and here we have it.

144
00:11:40,090 --> 00:11:43,930
You can see that it fit perfectly into it container.

145
00:11:43,960 --> 00:11:51,180
So on the desktop you can see that it's too big, but don't worry, we'll fix it as we get to desktop

146
00:11:51,220 --> 00:11:52,540
responsive design.

147
00:11:52,540 --> 00:11:58,600
So next step is that let's give it a border with this kind of style and look at the final one.

148
00:11:58,600 --> 00:12:02,020
This time we have here at the border here.

149
00:12:02,050 --> 00:12:08,830
That is the case, I added, so we can add that one, this border here, you see we have this one and

150
00:12:08,830 --> 00:12:10,630
then the other one also.

151
00:12:10,630 --> 00:12:12,160
So these are borders.

152
00:12:12,160 --> 00:12:14,290
So let's get that one done.

153
00:12:14,290 --> 00:12:26,320
Going to be as border bottom ten parsecs solid and the color is hashtag f, c, b, two, one, two.

154
00:12:26,470 --> 00:12:30,850
And for the border left, border left.

155
00:12:31,760 --> 00:12:40,310
Also as the same ten page oxalate by the color changes some around it's kind of blue so something like

156
00:12:40,310 --> 00:12:41,060
this one.

157
00:12:41,060 --> 00:12:46,130
So let's see what we have achieved so far and this is what we have.

158
00:12:46,130 --> 00:12:49,640
But you can see that it is not like a circle.

159
00:12:49,670 --> 00:13:00,230
So to achieve that, we're going to add border radius as 50% border radius as 50% with this one going

160
00:13:00,230 --> 00:13:07,640
to have something like this as compared to the final one, we are almost there.

161
00:13:07,730 --> 00:13:14,380
So to make sure that the image fits into it container, we are going to use a specific property called

162
00:13:14,390 --> 00:13:17,600
Object Fit and space that cover.

163
00:13:17,690 --> 00:13:21,560
So for this one, when a fits into each container.

164
00:13:21,560 --> 00:13:23,720
So we are done with that one.

165
00:13:23,720 --> 00:13:28,160
So let's work on this device, this one we see here, right?

166
00:13:28,160 --> 00:13:33,530
So for that one, remember we gave it a circle one and circle two.

167
00:13:33,530 --> 00:13:36,080
So let's see how we are going to target that one.

168
00:13:36,080 --> 00:13:45,170
So let's start with this circle one, dash one, and we are going to give it a position called absolute.

169
00:13:45,200 --> 00:13:48,620
Remember we gave a parent as relative.

170
00:13:48,620 --> 00:13:51,580
So for this one, we know we're going to position itself too.

171
00:13:51,830 --> 00:13:59,870
So let's give it a weight of 150 pixels and then the height also adds 150 pixels.

172
00:13:59,990 --> 00:14:02,540
And then let's see what we have.

173
00:14:02,570 --> 00:14:03,080
All right.

174
00:14:03,080 --> 00:14:08,180
This is what we are developing and I think somewhere here.

175
00:14:08,180 --> 00:14:14,270
But let's give it a background color so that you will see it visually as red.

176
00:14:14,480 --> 00:14:17,480
Now we can see that it is down here.

177
00:14:17,480 --> 00:14:21,830
So now I can control this one and position itself to the parent.

178
00:14:21,830 --> 00:14:30,620
So are going to add bottom here to be zero and let's see what we have something like this one.

179
00:14:30,620 --> 00:14:38,390
So let's give it a margin of ten P6 and indeed it is down here.

180
00:14:38,390 --> 00:14:40,730
So let's remove the background color.

181
00:14:40,730 --> 00:14:43,520
And next is let's add a box shadow.

182
00:14:43,670 --> 00:14:44,750
So here we go.

183
00:14:44,760 --> 00:14:49,190
Going to be as box shadow when it be hours zero.

184
00:14:50,150 --> 00:14:56,870
For peasants and then the color is LGB A and the opacity is one.

185
00:14:58,650 --> 00:14:59,220
Great.

186
00:14:59,220 --> 00:15:02,130
So let's save it and let's have a look.

187
00:15:02,430 --> 00:15:05,880
Yeah, something like it down here.

188
00:15:05,880 --> 00:15:07,170
But it's not that visible.

189
00:15:07,170 --> 00:15:09,150
Right, but it's down here.

190
00:15:09,390 --> 00:15:10,230
They get it here.

191
00:15:10,680 --> 00:15:11,460
Yes.

192
00:15:11,580 --> 00:15:19,320
So what we are going to do is that I want to give this one a margin bottom, as we did for the image

193
00:15:19,410 --> 00:15:21,990
so I can copy this one.

194
00:15:21,990 --> 00:15:25,500
And down here, I'm going to paste it here.

195
00:15:25,500 --> 00:15:28,230
But I want this one to be more opaque.

196
00:15:28,230 --> 00:15:39,960
So I'm going to change the color from F to e08804 and let's see the magic and something like this.

197
00:15:39,960 --> 00:15:45,330
But for the final one, we can see that we have some curved edges, so it's border radius.

198
00:15:45,330 --> 00:15:53,640
So let's go ahead and add that one also as border radius to be $16.

199
00:15:53,640 --> 00:15:55,650
So let's have a look.

200
00:15:55,710 --> 00:16:02,340
And this is what we have as compared to the final one is almost the same.

201
00:16:02,340 --> 00:16:03,000
Right?

202
00:16:03,000 --> 00:16:06,270
So let's continue implementing this.

203
00:16:06,360 --> 00:16:10,680
So the next step is let's work on the circle two.

204
00:16:10,680 --> 00:16:16,740
So here I'm going to copy the entire circle one plus here and down here.

205
00:16:16,770 --> 00:16:20,400
The difference here is the color and then the position.

206
00:16:20,400 --> 00:16:23,880
So here I'm going to position to the right.

207
00:16:23,880 --> 00:16:32,280
So here right to be ten and then top also to be ten parsecs as that.

208
00:16:32,280 --> 00:16:35,520
So let's change this one to circle two.

209
00:16:35,550 --> 00:16:38,430
Let's save it and let's have a look at the effect.

210
00:16:38,430 --> 00:16:39,990
Let's is what we have.

211
00:16:40,140 --> 00:16:45,390
But it looks like we are making some small mistake here as compared to the final one.

212
00:16:45,390 --> 00:16:49,710
You can see that this de is like a transparent div.

213
00:16:49,890 --> 00:16:52,530
So let's see where we are making the mistake.

214
00:16:53,190 --> 00:16:53,790
One, two.

215
00:16:53,820 --> 00:16:56,670
Yeah, I think it is from the shadow.

216
00:16:56,700 --> 00:17:02,760
So going to be zero and then $4 and this one going to be as $30.

217
00:17:02,760 --> 00:17:03,480
Yes.

218
00:17:03,480 --> 00:17:06,420
So let's see, have a look.

219
00:17:07,020 --> 00:17:09,390
And indeed, this is what we have.

220
00:17:09,390 --> 00:17:18,720
So let's add the $30 to this one or so and let's see something like this.

221
00:17:18,720 --> 00:17:20,010
That is awesome.

222
00:17:20,190 --> 00:17:28,590
So we are done with the mobile first because on mobile it looks nice and this is what I want.

223
00:17:28,590 --> 00:17:35,970
So what has left is on desktop you can see that these icons are not way arranged and I want this image

224
00:17:35,970 --> 00:17:38,370
to be the left here.

225
00:17:38,370 --> 00:17:41,430
So let's get that one done in the next video.