1
00:00:00,430 --> 00:00:01,120
Welcome back.

2
00:00:01,570 --> 00:00:05,860
Now, what I'm going to do is that I'm going to work on the login page, so I'm going to create a new

3
00:00:05,860 --> 00:00:07,690
here page called Log In.

4
00:00:08,910 --> 00:00:09,720
Attached email.

5
00:00:11,320 --> 00:00:19,540
And then in this log, in that email first I'm going to copy the the header and the body from the index.

6
00:00:19,540 --> 00:00:20,290
From the index here.

7
00:00:20,290 --> 00:00:22,030
I'm going to first copy this part.

8
00:00:23,730 --> 00:00:25,770
And then I'm going to place it in the log in.

9
00:00:26,760 --> 00:00:32,160
And then I'm going to again copy the footer part, which is this part, the three lines.

10
00:00:32,820 --> 00:00:39,480
And then I'm going to basically place them in the log in and then in between we need to display the

11
00:00:39,480 --> 00:00:41,340
navigation as well as the footer.

12
00:00:41,790 --> 00:00:45,540
So I'm going to get I'm going to get the navigation from the index here.

13
00:00:45,540 --> 00:00:49,020
I'm going to get this navigation and then I'm going to be sitting in the log in.

14
00:00:51,360 --> 00:00:54,270
And then I'm going to close it because we don't want to work on it.

15
00:00:55,110 --> 00:00:56,770
And I'm going to get also the footer.

16
00:00:56,790 --> 00:00:57,480
So I'm going to.

17
00:00:58,600 --> 00:01:03,010
Copy the filter and paste it in the index as well.

18
00:01:04,290 --> 00:01:06,820
And then I'm going to close it because I'm not going to work on it.

19
00:01:07,300 --> 00:01:09,580
Now we need to work on the log in form.

20
00:01:10,090 --> 00:01:15,120
So in order to to work on the logging forum, I'm going to create a logging section.

21
00:01:15,160 --> 00:01:16,240
I'm going to say here, log in.

22
00:01:19,960 --> 00:01:20,710
And then.

23
00:01:21,910 --> 00:01:23,020
I'm going to give the section.

24
00:01:23,020 --> 00:01:28,110
I'm going to say in your section and for the section, first of all, I'm going to give it a class.

25
00:01:29,130 --> 00:01:36,550
I'm going to say your class and I'm going to give it the margin Y margin top and bottom five and padding

26
00:01:36,550 --> 00:01:39,850
Y padding top and bottom, bottom five.

27
00:01:40,420 --> 00:01:43,060
Then inside that, I'm going to get a Dave.

28
00:01:43,630 --> 00:01:46,330
And for this Dave, I'm going to also give it a class.

29
00:01:46,630 --> 00:01:50,020
And then the class is going to be the container container.

30
00:01:50,980 --> 00:01:58,510
And I'm going to also give it a text center because I want the text to be centered and I also need margin

31
00:01:58,840 --> 00:02:00,520
top and more and padding.

32
00:02:01,090 --> 00:02:03,310
I'm going to name my top three.

33
00:02:04,850 --> 00:02:07,850
And barring top five.

34
00:02:08,970 --> 00:02:16,020
Now inside this cave I'm going to display here, I'm going to use H2 to display it text and I'm going

35
00:02:16,020 --> 00:02:20,370
to give this H2 class and that class is going to be the form weight.

36
00:02:23,200 --> 00:02:23,710
Both.

37
00:02:25,420 --> 00:02:27,220
And I'm going to say here looking.

38
00:02:29,310 --> 00:02:32,550
Before this log in, I'm going to display h r.

39
00:02:33,650 --> 00:02:35,390
And I'm going to give it to class again.

40
00:02:36,530 --> 00:02:40,370
And that class is going to be an X or a margin.

41
00:02:41,900 --> 00:02:43,130
Right and left auto.

42
00:02:45,150 --> 00:02:46,920
And then I'm going to keep it below this.

43
00:02:46,920 --> 00:02:48,620
I'm going to create a there.

44
00:02:48,630 --> 00:02:53,700
But before I do so let's this first I'm going to save all Laney here there over to the browser and let

45
00:02:53,700 --> 00:02:54,810
me go to the log in.

46
00:02:55,740 --> 00:02:58,590
So if I go to the log in, you'll find that we have you log in.

47
00:02:59,220 --> 00:03:00,930
Let's now work on the form itself.

48
00:03:01,380 --> 00:03:03,540
So below this, Dave, I'm going to need another day.

49
00:03:04,560 --> 00:03:12,060
So for this Dave, I'm going to say here class and then I'm going to say a mixed auto because I want

50
00:03:12,310 --> 00:03:20,190
to center the this form and I'm going to add a container class to it because they want to add margins

51
00:03:21,090 --> 00:03:21,870
like and right to it.

52
00:03:22,860 --> 00:03:23,910
Now it's own this.

53
00:03:23,910 --> 00:03:25,470
I'm going to have the form itself.

54
00:03:25,470 --> 00:03:26,370
I'm going to say here form.

55
00:03:27,600 --> 00:03:33,510
And then I'm going to give this forum and it really would be a plug in for.

56
00:03:35,120 --> 00:03:37,900
And so therefore, we need a --.

57
00:03:39,520 --> 00:03:46,690
And this aid is going to be for the first time, but I'm going to say class form group.

58
00:03:47,860 --> 00:03:56,560
And then inside this for I say this, I'm going to use the enable to display the first info about the

59
00:03:56,560 --> 00:03:58,960
first label about the first input.

60
00:03:59,260 --> 00:04:00,760
So the first input is going to be email.

61
00:04:00,770 --> 00:04:05,710
Therefore, I'm going to say your email and the input itself that's going to allow the user to type

62
00:04:05,710 --> 00:04:07,960
their email is going to be the input.

63
00:04:07,960 --> 00:04:11,260
I'm going to be using the input itself and I'm going to give it a type.

64
00:04:11,260 --> 00:04:14,770
And the type is text or email, let's say text.

65
00:04:18,580 --> 00:04:22,210
And I'm going to give it also a class, a bootstrap class called Form Control.

66
00:04:26,460 --> 00:04:27,170
And I'm going to give it.

67
00:04:30,090 --> 00:04:32,030
The I.D. is important, is very important.

68
00:04:32,040 --> 00:04:34,620
I'm going to give you an idea on log in email.

69
00:04:37,530 --> 00:04:38,400
And also the name.

70
00:04:38,550 --> 00:04:42,110
The name is going to be name is going to be email.

71
00:04:45,270 --> 00:04:46,880
And also, let's say placeholder.

72
00:04:46,890 --> 00:04:48,060
I'm going to say placeholder.

73
00:04:49,110 --> 00:04:49,680
Email.

74
00:04:50,790 --> 00:04:51,480
Email.

75
00:04:52,140 --> 00:04:54,060
And finally, I'm going to say required.

76
00:04:55,950 --> 00:04:56,970
So this is for the email.

77
00:04:56,970 --> 00:05:00,020
Lainey safe and Lainey heading over to the browser and test.

78
00:05:00,570 --> 00:05:03,450
So the email here as you can see, this is the input for email.

79
00:05:03,840 --> 00:05:05,130
Let's see it another one.

80
00:05:05,130 --> 00:05:09,390
So to get another one, I'm just going to copy this, Dave, and then I'm going to be me a lot.

81
00:05:10,020 --> 00:05:12,180
And we just need to change a few things.

82
00:05:12,750 --> 00:05:16,380
So for instead of saying email, we need password.

83
00:05:16,380 --> 00:05:21,780
So the user would be able to log in using the email or the password, the type is going to be password.

84
00:05:23,100 --> 00:05:26,010
The class form control.

85
00:05:26,370 --> 00:05:29,910
The ID is login pass or.

86
00:05:32,480 --> 00:05:34,070
And we need also an aide.

87
00:05:34,100 --> 00:05:37,070
So the name is passports.

88
00:05:38,540 --> 00:05:39,860
And the leaseholder.

89
00:05:39,860 --> 00:05:42,260
All there is is for.

90
00:05:44,060 --> 00:05:47,570
Lastly, we need to display laissez faire, save and show you this.

91
00:05:49,780 --> 00:05:53,530
So here, as you can see, we have email and password.

92
00:05:53,950 --> 00:05:55,510
Lastly, we need to add a button.

93
00:05:55,960 --> 00:06:00,880
So to add a button, I'm going to copy again this then and then I'm going to be said by law, by the

94
00:06:00,880 --> 00:06:06,250
button is going to be different than the button does not doesn't need to have a label.

95
00:06:06,250 --> 00:06:10,840
I'm going to remove the label and the.

96
00:06:12,640 --> 00:06:20,740
The button type is going to be submit through, it should be submit and the request for the input is

97
00:06:20,740 --> 00:06:23,500
just going to be and we don't need the form control.

98
00:06:23,500 --> 00:06:28,330
We need to say APTN and it is going to be in log in.

99
00:06:28,870 --> 00:06:31,030
Beattie and loving Beattie in.

100
00:06:32,810 --> 00:06:33,350
The class.

101
00:06:34,010 --> 00:06:38,000
We already said that the class is median.

102
00:06:38,240 --> 00:06:40,550
Finally, with the valley, we don't need any of this.

103
00:06:40,880 --> 00:06:42,060
And we remove all of these.

104
00:06:42,740 --> 00:06:44,230
Instead, we just need here.

105
00:06:45,350 --> 00:06:46,520
We just need value.

106
00:06:46,520 --> 00:06:48,350
So the value is looking.

107
00:06:51,450 --> 00:06:52,350
Let me save a lady.

108
00:06:52,350 --> 00:06:53,760
Hit it over to the browser and test.

109
00:06:54,450 --> 00:06:56,330
So we should have hit a button here, it says.

110
00:06:56,700 --> 00:06:58,050
But we need to work on the design.

111
00:06:58,530 --> 00:07:02,850
But before I work on it or on the design, let's continue on the finish of this form.

112
00:07:03,180 --> 00:07:08,300
So the last thing that we need on the form is the registration.

113
00:07:08,760 --> 00:07:13,320
We need a link that takes the user to the to the registration page.

114
00:07:13,830 --> 00:07:15,530
Therefore, I'm going to get another.

115
00:07:17,020 --> 00:07:18,390
There've been a lot of this one.

116
00:07:19,860 --> 00:07:22,400
And this one is going to be a tag.

117
00:07:22,400 --> 00:07:25,890
So I'm going to remove this input completely and then I'm going to attack.

118
00:07:26,850 --> 00:07:28,820
And for this attack, I'm going to give this an ID.

119
00:07:28,950 --> 00:07:29,610
I'm going to say ID.

120
00:07:31,190 --> 00:07:33,310
Regis, sir.

121
00:07:34,210 --> 00:07:35,170
You are ill.

122
00:07:37,230 --> 00:07:37,860
And the class.

123
00:07:37,860 --> 00:07:39,750
I'm going to give it as a class thing, as a class.

124
00:07:40,950 --> 00:07:43,740
And lastly, I'm going to display here.

125
00:07:45,550 --> 00:07:46,120
Don't.

126
00:07:48,610 --> 00:07:49,050
Have.

127
00:07:50,470 --> 00:07:51,040
Count.

128
00:07:57,890 --> 00:07:59,690
And then in your predecessor.

129
00:08:02,790 --> 00:08:06,210
Let me let me now say but let me hit that over to the browser and refresh.

130
00:08:07,050 --> 00:08:09,870
And as you can see, we have now this button.

131
00:08:09,870 --> 00:08:13,590
It says, don't have an account register.

132
00:08:13,890 --> 00:08:15,900
Let's now start working on that.

133
00:08:16,740 --> 00:08:21,960
So I'm going to open up the is the assets we have.

134
00:08:21,960 --> 00:08:25,580
This says in the style that says, let's start working on the log in.

135
00:08:25,590 --> 00:08:27,060
So I'm going to add here a comment first.

136
00:08:27,930 --> 00:08:28,800
I'm going to say here.

137
00:08:30,970 --> 00:08:33,960
Log in, log in.

138
00:08:33,970 --> 00:08:42,640
And first we need to work on remember we have in the log in we we have the log in.

139
00:08:42,640 --> 00:08:46,630
I believe we have the log in the log in form.

140
00:08:47,230 --> 00:08:49,870
So I'm going to start with the log in for I'm going to say here.

141
00:08:52,040 --> 00:08:54,710
Hash tag log in form.

142
00:08:55,550 --> 00:08:57,020
So far, they're looking for itself.

143
00:08:57,530 --> 00:09:02,420
The first thing that I'm going to do is that I'm going to change the width.

144
00:09:03,080 --> 00:09:04,070
I'm going to say width.

145
00:09:04,960 --> 00:09:11,140
50%, because I want I want the reform to take only this area.

146
00:09:11,140 --> 00:09:14,200
I want it to be centered, and I want the longing for it to be small.

147
00:09:14,500 --> 00:09:16,750
And I don't want it to take the complete screen width.

148
00:09:17,380 --> 00:09:19,900
Therefore, I'm going to stay here with 50%.

149
00:09:20,350 --> 00:09:29,560
Next, I'm going to say margin margin five X or this is going to center the key for our next I'm going

150
00:09:29,560 --> 00:09:30,910
to say tax alliance inter.

151
00:09:31,950 --> 00:09:33,000
Takes the land center.

152
00:09:34,630 --> 00:09:41,610
But I think we already I think we already have given the entire we didn't.

153
00:09:41,620 --> 00:09:43,690
So this explainer was for the looking.

154
00:09:43,690 --> 00:09:44,260
So it's not.

155
00:09:44,830 --> 00:09:51,930
So this we need to address takes alliance into our next we need to separate we need to add padding padding

156
00:09:51,970 --> 00:09:57,620
is going to give it a in good spaces from the from all sides.

157
00:09:57,640 --> 00:09:58,310
I'm going to say 20.

158
00:09:59,890 --> 00:10:01,360
Lastly, I'm going to say in border.

159
00:10:02,310 --> 00:10:05,050
I'm going to add border top to it of one.

160
00:10:05,050 --> 00:10:09,940
Be X solid want the solid orange.

161
00:10:10,390 --> 00:10:17,440
So the orange color that they have been using was this one link I save and let's see how this looks

162
00:10:17,440 --> 00:10:17,770
like.

163
00:10:18,160 --> 00:10:23,800
So as you can see now, it's much smaller and it's being displayed in the middle.

164
00:10:24,880 --> 00:10:28,330
Now let's work on the rest of the form.

165
00:10:29,200 --> 00:10:31,960
So in the in the form itself, we have the inputs.

166
00:10:32,260 --> 00:10:40,240
So for the inputs I'm going to see here, I'm going to say log in, log in form, and then I'm going

167
00:10:40,240 --> 00:10:44,110
to access the inputs for the inputs for the inputs.

168
00:10:44,440 --> 00:10:46,930
I want also the size to be 50%.

169
00:10:47,950 --> 00:10:58,900
I'm going to say 50% because as you can see, the the the inputs are extraordinary, but they are extraordinary.

170
00:10:59,110 --> 00:10:59,840
And we don't want that.

171
00:10:59,860 --> 00:11:02,970
I just want them to be extremely small.

172
00:11:02,980 --> 00:11:09,580
There is no need to display an email or password field with this huge width.

173
00:11:09,610 --> 00:11:10,720
It must be small.

174
00:11:11,590 --> 00:11:14,170
So this is for for the input.

175
00:11:15,100 --> 00:11:16,960
And also we need to add some margins.

176
00:11:17,440 --> 00:11:23,470
So I'm going to add to your margin five X top and bottom and order left and right.

177
00:11:25,540 --> 00:11:29,700
The next thing that I'm going to do is that I'm going to work on the log in button.

178
00:11:30,130 --> 00:11:36,110
I'm going to say log in form and then log in button, log in between.

179
00:11:36,910 --> 00:11:41,580
So for the long button, I want the log in to have the orange color.

180
00:11:41,590 --> 00:11:44,980
I'm going to say background color, background color.

181
00:11:45,730 --> 00:11:50,530
Background color is going to be the orange color and the color itself is going to be white.

182
00:11:50,920 --> 00:11:52,710
The color of the text is going to be white.

183
00:11:52,720 --> 00:11:53,500
I'm going to say color.

184
00:11:53,920 --> 00:11:55,300
And then this color.

185
00:11:55,810 --> 00:11:58,030
Similarly for the register.

186
00:11:58,660 --> 00:12:01,090
For the register, we want the reverse.

187
00:12:01,540 --> 00:12:02,470
For the register.

188
00:12:02,470 --> 00:12:09,250
I'm going to say here, log in form and then I want the register.

189
00:12:09,850 --> 00:12:16,300
Register toward L for the for the register u r l I just want it to be orange.

190
00:12:16,780 --> 00:12:23,320
So I'm going to need color or color, this color which is the orange color.

191
00:12:24,250 --> 00:12:27,700
Let's now save and let me show you how this would look like.

192
00:12:28,670 --> 00:12:31,130
So as you can see now, it looks outstanding.

193
00:12:31,430 --> 00:12:34,900
Now, reform is not extraordinary, Mick.

194
00:12:35,660 --> 00:12:36,800
It's much smaller.

195
00:12:36,800 --> 00:12:38,590
And it it looks amazing.

196
00:12:38,600 --> 00:12:42,710
They use it doesn't have to feel a huge input.

197
00:12:42,710 --> 00:12:45,800
It's just enough for the email or the password.

198
00:12:46,040 --> 00:12:52,790
Also, the button fits perfectly with the with the with the width of the inputs.

199
00:12:53,060 --> 00:12:58,790
Also, we have we don't have a current button which is which looks amazing.

200
00:12:58,790 --> 00:13:00,620
It shouldn't be displayed as abhorrent.

201
00:13:00,620 --> 00:13:05,000
It should be a link like this where the colour is different, what the background is nothing.

202
00:13:05,720 --> 00:13:10,910
The background is just white, like white like the background color of the website itself.

203
00:13:11,480 --> 00:13:17,630
And we also have a log in which is being displayed at the top, which is also important to let the user

204
00:13:17,630 --> 00:13:19,490
know that this is the log in page.

205
00:13:19,850 --> 00:13:22,190
So now we have the login page complete.