1
00:00:00,330 --> 00:00:05,790
We'll so now we type out the CSIS and we style our project, our components.

2
00:00:06,270 --> 00:00:11,250
So first of all, we have to look at the glasses, the class names of which we have given, according

3
00:00:11,250 --> 00:00:12,420
to that on Libyan style.

4
00:00:13,080 --> 00:00:16,110
So as I promised you, we will have the CSO.

5
00:00:16,110 --> 00:00:19,950
We will like not copy businesses and we will Typekit are from scratch.

6
00:00:20,280 --> 00:00:23,520
The first is this app inside which all of this is presented.

7
00:00:23,520 --> 00:00:24,330
So this is the app.

8
00:00:25,050 --> 00:00:28,080
Let us just, first of all, go ahead and file this.

9
00:00:28,680 --> 00:00:30,030
The Mona Lisa inside the app drawer.

10
00:00:30,870 --> 00:00:33,540
We just dial the app.

11
00:00:34,680 --> 00:00:35,130
Glass.

12
00:00:35,570 --> 00:00:42,510
Alright, so here, first of all, we'll do display flags so that it doesn't stretch, so it will be

13
00:00:42,510 --> 00:00:51,910
in order and it will be a little responsive, so it will be display flex if I just see it and just to

14
00:00:52,560 --> 00:01:00,720
go back to the browser so I can see that is a little bit like the gaming order, the big came and a

15
00:01:00,720 --> 00:01:01,800
little bit of order.

16
00:01:02,280 --> 00:01:06,810
So that said, and next us see?

17
00:01:07,710 --> 00:01:08,920
I mean, type of.

18
00:01:10,090 --> 00:01:16,890
You didn't justify the contents to Senator, like we want the content in the center for next week and

19
00:01:16,900 --> 00:01:22,240
do the flex like right now it's coming, not rule like it's coming in one line, as you can see, it's

20
00:01:22,240 --> 00:01:23,200
coming in one line.

21
00:01:23,440 --> 00:01:29,140
So no, but we want it to be in column column wise, so we'll be giving the flex.

22
00:01:31,290 --> 00:01:33,150
Direction that is column.

23
00:01:33,870 --> 00:01:37,530
Let me just see you and let me just take you to the browser.

24
00:01:37,710 --> 00:01:41,910
So right now it came in like in the column fashion.

25
00:01:42,300 --> 00:01:42,930
So.

26
00:01:44,540 --> 00:01:51,170
That school next will be giving the like they are not in the center right now and they are like stuck

27
00:01:51,170 --> 00:01:51,770
to the left.

28
00:01:52,380 --> 00:01:59,230
Will bring it in the center, so we'll use a line items and center.

29
00:01:59,630 --> 00:02:02,210
So I hope this brings in the center.

30
00:02:02,690 --> 00:02:05,060
Yeah, looks like similar to our app.

31
00:02:05,720 --> 00:02:13,030
So next hour, we'll be giving another style that will be because they are a little bit off.

32
00:02:13,400 --> 00:02:18,770
You can see they are like too close to each other, so we'll be giving a little bit of padding.

33
00:02:19,160 --> 00:02:25,310
So we'll be lot of padding will be a top and bottom.

34
00:02:25,310 --> 00:02:28,880
It will be 40 pixels and four left and right.

35
00:02:28,880 --> 00:02:30,740
It'll be twenty four pixels.

36
00:02:31,610 --> 00:02:34,850
So I hope this this makes.

37
00:02:36,830 --> 00:02:38,600
Things a little bit cold.

38
00:02:39,140 --> 00:02:39,960
Oh yeah.

39
00:02:40,730 --> 00:02:42,190
Maybe we see something.

40
00:02:42,830 --> 00:02:43,220
OK.

41
00:02:44,270 --> 00:02:54,710
And next, we'll be giving like the border at the top, so like beautiful border at the top.

42
00:02:57,920 --> 00:02:59,110
The talk would be.

43
00:03:00,190 --> 00:03:00,970
One pixel.

44
00:03:03,880 --> 00:03:06,190
Color and the color would be bank.

45
00:03:07,740 --> 00:03:08,280
I go.

46
00:03:09,520 --> 00:03:10,030
Go ahead.

47
00:03:11,140 --> 00:03:17,590
It is really, really hard for us to see that we have 15 Pixel.

48
00:03:18,630 --> 00:03:19,500
Oh, if I go.

49
00:03:21,490 --> 00:03:21,760
Yeah.

50
00:03:23,320 --> 00:03:23,880
It's there.

51
00:03:24,230 --> 00:03:26,770
So next, we'll be.

52
00:03:27,850 --> 00:03:31,400
Styling the search component for.

53
00:03:31,600 --> 00:03:35,080
So it's like really, really close to the setting.

54
00:03:35,630 --> 00:03:40,600
Most of all, let me just put it up that first of all, let's just type.

55
00:03:41,940 --> 00:03:44,460
We're done with the search name up search.

56
00:03:45,630 --> 00:03:47,910
Wal-Mart is just absurd.

57
00:03:50,010 --> 00:03:55,590
Those formal endoscopy, this to be more precise, you know, so that you don't do any typos because

58
00:03:55,590 --> 00:03:59,670
even if one or even one word is different.

59
00:03:59,820 --> 00:04:03,510
So you are like you see this as will not reflect that.

60
00:04:03,900 --> 00:04:04,220
OK, yes.

61
00:04:04,460 --> 00:04:11,250
So from here, we'll give a margin of four, 17 pixels, maybe.

62
00:04:12,590 --> 00:04:17,310
This is just this is just trying to do things if you like it.

63
00:04:18,080 --> 00:04:20,060
And if you don't just change it, all right.

64
00:04:20,060 --> 00:04:21,680
And now they are a little bit separate.

65
00:04:22,400 --> 00:04:31,850
OK, so now we'll give the styling to the input field, but it's not looking so beautiful right now.

66
00:04:32,300 --> 00:04:36,190
So app and then we'll get input.

67
00:04:36,410 --> 00:04:39,740
And for that, I'll be giving up.

68
00:04:40,780 --> 00:04:54,350
The batting will be six Pixel six pixel is for top and bottom and 16 or 15, maybe four left and right.

69
00:04:54,350 --> 00:04:58,130
So let's just go and see.

70
00:04:59,100 --> 00:05:00,690
If this works.

71
00:05:01,780 --> 00:05:06,130
As of now, I don't think I this to change, but.

72
00:05:07,310 --> 00:05:07,970
Let us see.

73
00:05:09,340 --> 00:05:12,180
And NPR, because I gave just one escort.

74
00:05:13,220 --> 00:05:16,730
See, I told you only one word can make a lot of difference.

75
00:05:19,700 --> 00:05:20,660
Still no change.

76
00:05:23,160 --> 00:05:24,180
And what is it?

77
00:05:28,150 --> 00:05:28,780
For.

78
00:05:35,920 --> 00:05:37,540
So this would be up and put.

79
00:05:38,820 --> 00:05:39,690
I guess.

80
00:05:43,280 --> 00:05:46,370
And if favorite and.

81
00:05:50,070 --> 00:05:50,770
Why am I?

82
00:05:50,880 --> 00:05:53,980
You see, is OK.

83
00:05:53,980 --> 00:06:02,490
OK, OK, OK, now I see I see a change here, but when I go back now, I go to abortions that will

84
00:06:02,490 --> 00:06:03,360
make other changes.

85
00:06:03,750 --> 00:06:14,100
Now we'll give you minimum bit of maybe 200 pixels so that it's like on any device.

86
00:06:14,250 --> 00:06:16,980
There will be a minimum width and we'll give them max width.

87
00:06:18,790 --> 00:06:21,720
Of 100.

88
00:06:23,860 --> 00:06:25,360
You like this?

89
00:06:25,960 --> 00:06:27,850
BW, I'll explain what it is.

90
00:06:28,750 --> 00:06:32,650
With this is change according to the width of the screen.

91
00:06:32,830 --> 00:06:36,250
You know, my own width will change according to the width of the screen.

92
00:06:36,670 --> 00:06:40,180
Like right now, my rate is like I'm using laptop.

93
00:06:40,180 --> 00:06:46,660
And when I turn, I open the application in mobile so that it will be different, so it will be adjusted

94
00:06:46,990 --> 00:06:47,980
according to that.

95
00:06:48,400 --> 00:06:53,200
So as simple as that, so you will see and see the reflected Tunisia.

96
00:06:54,780 --> 00:06:57,090
It does, I assumed it, no, I did not save it.

97
00:06:57,930 --> 00:06:59,910
Now I saved it and you can see it.

98
00:06:59,910 --> 00:07:00,990
There are some changes.

99
00:07:03,100 --> 00:07:07,390
There's not some major change, but still we are in the building process right now.

100
00:07:07,990 --> 00:07:09,730
So next we'll give a foreign size.

101
00:07:11,470 --> 00:07:16,380
Font size of 17 pixels would be good enough.

102
00:07:18,020 --> 00:07:20,870
And we'll give a broader radius.

103
00:07:22,370 --> 00:07:28,970
Mortality is to to make the search box a little cold because the square doesn't look so weird and because

104
00:07:28,970 --> 00:07:29,600
it is better.

105
00:07:31,500 --> 00:07:32,390
This bill beckons.

106
00:07:34,560 --> 00:07:40,290
Now you can see it's a little cold, like the square doesn't look somber, so I made it a little cold,

107
00:07:40,980 --> 00:07:46,170
so maybe we can make it more cold by giving 15 pixels.

108
00:07:46,710 --> 00:07:50,280
Where do you see the pixels would be good?

109
00:07:50,820 --> 00:07:52,830
Yeah, it looks even brighter now.

110
00:07:53,580 --> 00:07:57,570
Now we're going to the next component.

111
00:07:57,750 --> 00:07:59,910
It is, though it is a summit.

112
00:08:00,450 --> 00:08:01,470
This is the summer transfer.

113
00:08:02,660 --> 00:08:03,860
When are we going to stay that?

114
00:08:06,560 --> 00:08:08,000
So for the summit.

115
00:08:11,290 --> 00:08:16,470
Mean, to be giving the class of, first of all, let me see, what does the class mean?

116
00:08:17,310 --> 00:08:18,380
OK, this is absolute.

117
00:08:18,540 --> 00:08:22,040
It's better to copy other than like prevention is better than cure.

118
00:08:23,010 --> 00:08:32,160
Okay, then we'll go to this class right here and we'll style this for styling is just we'll give a

119
00:08:32,160 --> 00:08:33,150
little bit of padding.

120
00:08:33,150 --> 00:08:36,630
First of all, because it's like stuck to the another component.

121
00:08:36,630 --> 00:08:40,380
Padding will be open more than to be six pixels.

122
00:08:41,590 --> 00:08:48,370
Came and left and right, it will be 16 big pixels.

123
00:08:51,560 --> 00:08:52,430
I hope this.

124
00:08:54,020 --> 00:08:54,590
Looks good.

125
00:08:58,380 --> 00:08:59,640
But I'm getting this.

126
00:09:00,510 --> 00:09:04,620
Now you can see there's a little bit of engine component.

127
00:09:06,320 --> 00:09:06,860
All right.

128
00:09:09,820 --> 00:09:13,210
And come back and look at the and properties that is.

129
00:09:16,590 --> 00:09:17,430
One side's.

130
00:09:19,460 --> 00:09:20,840
One sides would be.

131
00:09:21,260 --> 00:09:23,670
Maybe we can give 15 pixels.

132
00:09:25,120 --> 00:09:30,490
But it's better to give like similar to this because they look different, so say 17 would be good.

133
00:09:31,190 --> 00:09:32,500
Seventeen percent would be good.

134
00:09:33,340 --> 00:09:34,180
So you can see.

135
00:09:35,630 --> 00:09:36,230
Our expert on.

136
00:09:38,270 --> 00:09:43,730
Now we'll give the because it's a little bit stuck in the.

137
00:09:45,120 --> 00:09:52,740
On the left, it's stuck like I can too close, who will give a margin all left, so marginal left.

138
00:09:53,970 --> 00:09:56,970
Give it six pixels would be good, I guess.

139
00:09:58,140 --> 00:09:59,150
And we save it.

140
00:10:00,770 --> 00:10:05,660
And you can see that there's a gap the gap between so like looks good.

141
00:10:06,800 --> 00:10:07,880
Next will be giving.

142
00:10:09,620 --> 00:10:12,260
But now we'll be calling it.

143
00:10:12,740 --> 00:10:19,700
So for that, we'll be giving background color would be I personally like green because you can provide

144
00:10:19,700 --> 00:10:23,540
any color here or like it, be green or to save it.

145
00:10:24,690 --> 00:10:27,420
Go back, you can see the button has become green.

146
00:10:27,810 --> 00:10:30,580
And Steve Campbell too, and

147
00:10:33,570 --> 00:10:36,090
we can also give a little bit of spoiler to it.

148
00:10:38,420 --> 00:10:41,870
And the border controls will be defined for.

149
00:10:43,650 --> 00:10:45,960
First of all, I look at the border and it will be.

150
00:10:47,160 --> 00:10:54,210
We can give it out to pixels, which was the dark pixels, and it's a solid border, not like the cartoon

151
00:10:54,210 --> 00:10:59,910
ones and different quarrelling ones, and then color will be green only.

152
00:11:00,690 --> 00:11:05,040
So I don't think that would make much of a difference.

153
00:11:05,880 --> 00:11:06,780
But it's all right.

154
00:11:07,350 --> 00:11:09,000
Next, we'll be having a border radius.

155
00:11:09,000 --> 00:11:12,120
Of course, we want to make it go so.

156
00:11:15,170 --> 00:11:21,610
Border radius would be 15 pixel C, as we have given before.

157
00:11:22,540 --> 00:11:24,410
So, yeah, you can see this.

158
00:11:24,440 --> 00:11:25,900
The button is called.

159
00:11:27,280 --> 00:11:31,150
I don't know why it's not cable, but will make it become a.

160
00:11:32,170 --> 00:11:33,170
So that sort.

161
00:11:36,570 --> 00:11:38,490
Next, we'll be providing the.

162
00:11:40,160 --> 00:11:45,290
Colour, their text, which is inside, so the black is not looking, so for me to provide white color

163
00:11:45,350 --> 00:11:45,800
would be good.

164
00:11:46,550 --> 00:11:48,800
And I'm glad to see.

165
00:11:49,910 --> 00:11:50,750
All those calls.

166
00:11:51,760 --> 00:11:52,450
Now it looks.

167
00:11:53,300 --> 00:11:54,410
Looks a little bit good.

168
00:11:56,380 --> 00:11:56,740
Yeah.

169
00:11:58,160 --> 00:12:05,270
Looks good, and it's not very clickable because we have given the border color also is green and the

170
00:12:05,270 --> 00:12:08,710
color of the component is also green, so that's why we can't see it.

171
00:12:09,230 --> 00:12:15,170
And one more thing this point that is not changing to the people thing like the cursor so that we can

172
00:12:15,170 --> 00:12:18,200
change by giving the property that is going to.

173
00:12:19,970 --> 00:12:21,890
Concern would be.

174
00:12:22,880 --> 00:12:23,210
Find.

175
00:12:25,790 --> 00:12:26,660
All then are gone.

176
00:12:27,260 --> 00:12:28,670
You can see it has changed.

177
00:12:30,970 --> 00:12:35,800
All right, so we have done with like the input component and the button.

178
00:12:36,830 --> 00:12:39,020
So next, we'll be styling this.