1
00:00:00,480 --> 00:00:06,150
OK, so now what we'll do is we'll write some courses for styling our components right now and they

2
00:00:06,150 --> 00:00:10,080
are looking really, really basic, like they are so basic.

3
00:00:10,350 --> 00:00:12,120
So that's why I need to install them.

4
00:00:12,200 --> 00:00:13,530
I need to style them.

5
00:00:13,530 --> 00:00:14,700
So any sort install them.

6
00:00:15,360 --> 00:00:21,270
So for that, first of all, I need to give the class names for all of them.

7
00:00:21,810 --> 00:00:28,860
So first of all, I'll give the class name to this section, maybe, or this section I'll give a class

8
00:00:28,860 --> 00:00:29,700
name of.

9
00:00:31,700 --> 00:00:34,630
Class name of Dana.

10
00:00:37,550 --> 00:00:39,590
And not yes.

11
00:00:41,260 --> 00:00:46,840
Next, I'll give you a Glass Lewis input field right here so that we can style this input.

12
00:00:52,720 --> 00:00:57,520
Last name would be like its class name would be varying.

13
00:00:58,600 --> 00:01:05,440
What I'm thinking is that whenever a user type something, so then its borders should be different and

14
00:01:05,440 --> 00:01:13,240
when the user types are like wrong or invalid or he types anything which is not valid.

15
00:01:13,590 --> 00:01:20,350
But what I'm thinking to make the border read so that it indicates that there is an error and there

16
00:01:20,350 --> 00:01:23,050
is a wrong input, which is a given.

17
00:01:24,010 --> 00:01:28,330
And so for that, I will do it once I create a state for the error.

18
00:01:28,600 --> 00:01:37,990
Next, we'll give a glass to the button or for Barton, I'll give a class name of class me of the tea

19
00:01:37,990 --> 00:01:38,230
and.

20
00:01:39,640 --> 00:01:40,180
I see.

21
00:01:41,000 --> 00:01:45,650
Now I'll go to the index starts to assess how we mean I think the seats hit.

22
00:01:46,200 --> 00:01:48,850
So I'll go ahead and I'll say.

23
00:01:50,440 --> 00:01:55,450
With the last name of container for the container, what I need is that, first of all, the alignment

24
00:01:55,450 --> 00:02:00,550
of the text will be central, so I'll be adding text align center.

25
00:02:01,510 --> 00:02:06,640
Next, I'll be displaying it in a flex me of display flex.

26
00:02:07,550 --> 00:02:16,170
So next, I'll be extolling the stern and learn a difference between tax alone surrender and a line

27
00:02:16,170 --> 00:02:18,900
item center like a line item, senator.

28
00:02:18,900 --> 00:02:27,840
What it does is that when there are two items in in a in a room not in a row, then it aligns both of

29
00:02:27,840 --> 00:02:34,530
them in the center, irrespective of their hearts, irrespective of the sizes.

30
00:02:34,830 --> 00:02:37,710
It brings more than the center, so that is what it does.

31
00:02:37,710 --> 00:02:42,670
So that's why I'm using a line item center, a line, items and stuff.

32
00:02:43,710 --> 00:02:51,120
And next, we'll be giving a highlight of how much maybe 100 bucks an extra.

33
00:02:52,970 --> 00:02:54,320
Next, I'll be giving.

34
00:02:55,040 --> 00:02:59,480
Let me just see how this looks first eyebrows.

35
00:03:01,410 --> 00:03:02,280
Okay.

36
00:03:02,340 --> 00:03:04,860
There is some changes.

37
00:03:06,870 --> 00:03:10,080
Things have a line you can see this color generator was at the top.

38
00:03:10,410 --> 00:03:13,020
But now it is aligned with the other component.

39
00:03:13,530 --> 00:03:19,290
So now let me just go back here and there should be some padding on the left.

40
00:03:19,500 --> 00:03:25,770
So maybe padding left could be foolhardy and.

41
00:03:27,030 --> 00:03:27,300
Am.

42
00:03:28,260 --> 00:03:35,250
I remember one a.m. as equal to 16 pixels, hold on, I can see go back.

43
00:03:36,960 --> 00:03:38,490
And that is somebody.

44
00:03:40,380 --> 00:03:51,030
OK, now I'll give you the styling to the H one, which is but isn't that so container at three on each

45
00:03:51,210 --> 00:03:51,660
three?

46
00:03:52,810 --> 00:03:58,210
Only braces and side this will give modern talk should be zero.

47
00:03:59,140 --> 00:04:05,410
We modern thought it would be zero and next, I'll give it what I'm saying.

48
00:04:07,680 --> 00:04:15,010
There should be a margin, right, because it's like getting too close to the side of the box, but

49
00:04:15,030 --> 00:04:23,250
there should be a margin rate of five in five audience.

50
00:04:23,730 --> 00:04:25,260
Let me see if that.

51
00:04:26,100 --> 00:04:26,580
No, no, no.

52
00:04:26,580 --> 00:04:28,980
That is too much that Eskom, which I need to decrease.

53
00:04:30,960 --> 00:04:31,950
Maybe I can do it.

54
00:04:32,220 --> 00:04:32,820
Who are you?

55
00:04:33,510 --> 00:04:34,560
When I do it to?

56
00:04:35,870 --> 00:04:36,200
The.

57
00:04:38,950 --> 00:04:44,590
This is good, actually, because the size of the input also will be increasing once we style the input

58
00:04:44,590 --> 00:04:46,450
component or we can see later on.

59
00:04:46,850 --> 00:04:51,370
Let me just close this there are tools for now so we can like on the way we can change.

60
00:04:51,370 --> 00:04:53,020
That is no compulsion that we have to do.

61
00:04:53,020 --> 00:04:54,080
It finally hit on me.

62
00:04:54,460 --> 00:04:56,390
This is the best part about CSIS.

63
00:04:56,410 --> 00:04:58,360
You can see what you are creating.

64
00:04:58,750 --> 00:05:03,100
So now we'll style the input component, this input tank.

65
00:05:03,580 --> 00:05:04,620
So for that, we do.

66
00:05:04,930 --> 00:05:13,020
We don't need to give any class as off now, but we just like grab the input things.

67
00:05:14,080 --> 00:05:15,880
And now we'll start of this.

68
00:05:16,390 --> 00:05:22,600
So for that, we'll be giving, first of all, partner color should be transparent.

69
00:05:24,900 --> 00:05:30,480
And that shouldn't be happening because that things are too much closer to each other, so that should

70
00:05:30,480 --> 00:05:36,030
be a bad thing, not panning out, just the padding and top and bottom.

71
00:05:36,060 --> 00:05:37,500
There should be one.

72
00:05:37,780 --> 00:05:40,490
No, maybe 0.5 40 ms.

73
00:05:41,550 --> 00:05:45,000
This is for top and bottom and left and right.

74
00:05:45,000 --> 00:05:52,210
There should be one idea Oh, let me see and go back because I didn't want to do this.

75
00:05:53,640 --> 00:05:55,400
I didn't want to do this water.

76
00:05:55,470 --> 00:05:56,970
That one be transparent.

77
00:05:56,970 --> 00:05:59,310
So it looks a little cool.

78
00:06:01,530 --> 00:06:11,520
Now, what we'll do more is that there should be a radius like top border radius so that I'll do my

79
00:06:12,660 --> 00:06:13,410
border.

80
00:06:14,630 --> 00:06:24,230
Maybe top and left, top left radios, and it should be like the air and.

81
00:06:25,530 --> 00:06:30,060
When I this Australia's so let's see how this will look.

82
00:06:30,550 --> 00:06:32,490
I'm explaining what I've done, Barton.

83
00:06:33,520 --> 00:06:33,910
Yeah.

84
00:06:35,560 --> 00:06:38,320
So as of now, we have not got anything.

85
00:06:39,290 --> 00:06:40,850
OK, let's dive for that.

86
00:06:42,910 --> 00:06:47,620
Well, basically top and left like border, it is given.

87
00:06:47,680 --> 00:06:52,000
And now I'll give some bottom and left also.

88
00:06:53,000 --> 00:06:57,230
So after that, we'll be able to see the reflected changes.

89
00:06:57,260 --> 00:06:57,770
Bottom.

90
00:06:59,140 --> 00:07:00,100
No, no, no, no, no.

91
00:07:00,430 --> 00:07:01,390
Waterman left.

92
00:07:03,410 --> 00:07:04,070
Florida.

93
00:07:05,160 --> 00:07:13,090
And bottom and left radius will be giving a radius, yes, that will be vast, and that will be also

94
00:07:13,120 --> 00:07:15,900
like of of radius.

95
00:07:16,100 --> 00:07:18,810
And then I save it and then go back.

96
00:07:19,910 --> 00:07:20,570
That is.

97
00:07:23,180 --> 00:07:23,660
Fresh.

98
00:07:24,860 --> 00:07:25,640
As of now.

99
00:07:25,670 --> 00:07:26,020
Yeah.

100
00:07:27,960 --> 00:07:29,790
I just commend these two lines.

101
00:07:34,260 --> 00:07:36,770
Normally in work, maybe they will.

102
00:07:42,030 --> 00:07:45,360
OK, so next, we'll be styling Burton.

103
00:07:47,210 --> 00:07:49,620
But I am not giving foreign sides to the import.

104
00:07:49,700 --> 00:07:57,560
Let me just give a foreign sized performed size should be maybe one point five odium would go one,

105
00:07:57,560 --> 00:07:57,950
four and five.

106
00:07:57,980 --> 00:07:59,330
Let me just check.

107
00:08:00,610 --> 00:08:04,060
Not on one point five is a little bit bigger.

108
00:08:04,520 --> 00:08:05,920
So I can just.

109
00:08:07,510 --> 00:08:16,870
I can just give it one point two, maybe then I'll save it, and then I go, Yeah, looks good.

110
00:08:17,840 --> 00:08:19,340
This much is like, okay.

111
00:08:21,710 --> 00:08:27,800
OK, we have given everything to the input field and all we'll style apartment components, so for styling,

112
00:08:27,800 --> 00:08:30,020
the bathroom will be the end.

113
00:08:31,030 --> 00:08:40,030
And inside this will have some background should be like clearly and so we'll use this.

114
00:08:41,490 --> 00:08:44,100
Styling, so not background color, basically.

115
00:08:45,620 --> 00:08:50,170
It will be background and will be varying from this.

116
00:08:51,620 --> 00:09:00,230
To the color primary, and because this will give the color.

117
00:09:01,230 --> 00:09:03,210
Who are Barton or?

118
00:09:05,130 --> 00:09:08,550
And you can see that is some happening.

119
00:09:09,720 --> 00:09:10,110
OK.

120
00:09:12,120 --> 00:09:20,490
Next, we'll add some padding to it, so adding, maybe I can give our top and bottom same as this,

121
00:09:20,490 --> 00:09:23,370
same as this, I'll copy this thing and.

122
00:09:24,980 --> 00:09:30,530
And Mr to Famous Next, I'll be giving a fawn size to the bottom.

123
00:09:30,680 --> 00:09:37,220
So fine, guys, I will give of one point to what Im seen as that.

124
00:09:39,610 --> 00:09:48,160
I save it, and I when I go back to that is I'm doing this, you can see and I'll go back and.

125
00:09:50,290 --> 00:09:55,230
Now, I will add some more like color should be transparent, as we did in this.

126
00:09:56,450 --> 00:10:00,700
And input for universal coverage is this line I just to two.

127
00:10:01,480 --> 00:10:08,920
And the next will add these the same two things for distorting the button as well.

128
00:10:09,580 --> 00:10:15,190
So then we'll see what magic they do and we'll.

129
00:10:16,650 --> 00:10:18,150
We won that concert.

130
00:10:18,180 --> 00:10:25,590
Let me just say it and take you to the air so you can see that is no nothing right now, but when you

131
00:10:25,590 --> 00:10:28,560
click, it will add another stage to it.

132
00:10:30,380 --> 00:10:39,530
Now I want to give like right now when we go to the button, it means to the point that is not changing,

133
00:10:39,530 --> 00:10:40,730
so I will change that.

134
00:10:41,390 --> 00:10:46,280
So we will do that by providing this first.

135
00:10:47,650 --> 00:10:54,910
Two pointer and I save it and then go back and you can see no appointment is changing.

136
00:10:55,640 --> 00:11:01,010
So now we started it for the so we can also give a color.

137
00:11:01,240 --> 00:11:01,810
Thank you.

138
00:11:02,860 --> 00:11:06,310
So first of all, let me try to transform the text.

139
00:11:07,460 --> 00:11:10,010
Like when I exit.

140
00:11:10,940 --> 00:11:18,830
Songs form should be capitalized just to make sure it's like in capital, so now I give up colored who?

141
00:11:20,890 --> 00:11:26,950
Color would be variable and shouldn't be like clear white.

142
00:11:30,020 --> 00:11:30,400
Right.

143
00:11:33,720 --> 00:11:40,290
It doesn't do anything because, I mean, we need to install something or something like that, Marco,

144
00:11:40,770 --> 00:11:41,400
we'll do it.

145
00:11:44,270 --> 00:11:49,250
But to get that food, to get those calls, I will need to paste.

146
00:11:49,960 --> 00:11:54,900
Unlike Vietnam, which I recorded song from Song, so this is the values of the caller.

147
00:11:55,650 --> 00:11:58,100
That is what we are utilizing below.

148
00:11:58,130 --> 00:11:58,940
So let me just say.

149
00:12:00,110 --> 00:12:07,340
That's why I forgot to import it, and I know we can see and the colors are perfectly designed.

150
00:12:07,400 --> 00:12:09,200
So that is what we were missing out.

151
00:12:09,800 --> 00:12:18,710
So next, we'll be sailing, or we'll be adding like some functionality, which is just and ethanol.

152
00:12:19,010 --> 00:12:20,170
We'll do that in the next week.