1
00:00:02,150 --> 00:00:03,300
So for the moment,

2
00:00:03,300 --> 00:00:06,470
we'll still stick to the front-end part of the site here

3
00:00:06,470 --> 00:00:07,460
to the styling,

4
00:00:07,460 --> 00:00:09,860
but we'll switch to a different style file

5
00:00:09,860 --> 00:00:13,180
to the forms CSS file to be precise.

6
00:00:13,180 --> 00:00:16,070
Here I now want to set up some general form styles

7
00:00:16,070 --> 00:00:18,860
that will be applied throughout this entire project.

8
00:00:18,860 --> 00:00:20,750
So not just to the sign up page,

9
00:00:20,750 --> 00:00:23,546
but also to forms on other pages.

10
00:00:23,546 --> 00:00:27,720
However, we'll not just work on the general form styles,

11
00:00:27,720 --> 00:00:30,550
but also on the auth forms specific styles.

12
00:00:30,550 --> 00:00:33,856
And those styles will go into the auth.css file

13
00:00:33,856 --> 00:00:37,840
as they should only affect the signup and login pages.

14
00:00:37,840 --> 00:00:39,245
And I am including auth there

15
00:00:39,245 --> 00:00:41,333
this auth.css file,

16
00:00:41,333 --> 00:00:44,900
but I won't include it in other pages.

17
00:00:44,900 --> 00:00:48,140
And actually I'll start in the auth.css file here

18
00:00:48,140 --> 00:00:51,510
to set up the auth pages specific styles.

19
00:00:51,510 --> 00:00:54,600
For example, there, I want to ensure that at this h1 tag,

20
00:00:54,600 --> 00:00:59,010
that I have there has its text aligned to the center.

21
00:00:59,010 --> 00:00:59,843
And

22
00:00:59,843 --> 00:01:01,730
there, I also want to ensure

23
00:01:01,730 --> 00:01:05,300
that I changed the color of this h1 element

24
00:01:05,300 --> 00:01:08,143
to color gray-300.

25
00:01:09,670 --> 00:01:13,933
And with those changes made, this looks like this now.

26
00:01:15,757 --> 00:01:17,450
I also want to center this overall form

27
00:01:17,450 --> 00:01:18,750
and the form elements

28
00:01:18,750 --> 00:01:20,550
and for this all target the form

29
00:01:20,550 --> 00:01:23,420
still here in the auth.css file,

30
00:01:23,420 --> 00:01:26,760
because I don't want to center all forms on all pages.

31
00:01:26,760 --> 00:01:30,180
I just want to center the auth forms specifically,

32
00:01:30,180 --> 00:01:32,910
and there, I will actually

33
00:01:32,910 --> 00:01:36,390
restrict the max-width to 25 rem,

34
00:01:36,390 --> 00:01:38,600
so that it's a bit narrower.

35
00:01:38,600 --> 00:01:40,200
I'll add a margin

36
00:01:40,200 --> 00:01:42,930
where I will use space-eight.

37
00:01:42,930 --> 00:01:46,200
So this biggest space I defined to top and bottom,

38
00:01:46,200 --> 00:01:49,163
but auto to left and right to center to form.

39
00:01:50,370 --> 00:01:52,170
I'll add a padding

40
00:01:52,170 --> 00:01:55,200
of space-four,

41
00:01:55,200 --> 00:01:58,130
so this will be one Ram of padding

42
00:01:58,130 --> 00:02:00,410
and I'll give it a background color

43
00:02:02,190 --> 00:02:06,420
of var color, gray 600.

44
00:02:06,420 --> 00:02:10,513
So I'll use a dark gray background color for this form here.

45
00:02:12,900 --> 00:02:15,650
I also will add a border radius, not a border,

46
00:02:15,650 --> 00:02:17,060
but still a radius,

47
00:02:17,060 --> 00:02:19,750
which we will see because we have a background color

48
00:02:19,750 --> 00:02:23,220
that differs from the background color of the overall page.

49
00:02:23,220 --> 00:02:25,080
So we will see the border

50
00:02:25,080 --> 00:02:28,050
even without giving it an explicit color.

51
00:02:28,050 --> 00:02:32,820
And the border radius here will be that border radius,

52
00:02:32,820 --> 00:02:36,350
medium VLU,

53
00:02:36,350 --> 00:02:37,440
and last but not least,

54
00:02:37,440 --> 00:02:41,160
I'll also add text align center to center all the

55
00:02:41,160 --> 00:02:43,580
inline elements in that form.

56
00:02:43,580 --> 00:02:44,910
And as it turns out,

57
00:02:44,910 --> 00:02:49,580
labels and these input elements, all our inline elements,

58
00:02:49,580 --> 00:02:51,900
as you can clearly tell by the fact

59
00:02:51,900 --> 00:02:54,710
that they sit next to each other.

60
00:02:54,710 --> 00:02:56,510
And actually also the button link,

61
00:02:56,510 --> 00:02:57,700
our inline elements,

62
00:02:57,700 --> 00:02:59,499
they just are in new lines here

63
00:02:59,499 --> 00:03:03,190
because just like the label input combinations,

64
00:03:03,190 --> 00:03:05,231
they are wrapped by paragraphs

65
00:03:05,231 --> 00:03:07,520
or the button is not wrapped,

66
00:03:07,520 --> 00:03:09,740
but the elements in front and after it

67
00:03:09,740 --> 00:03:12,210
are wrapped by paragraphs.

68
00:03:12,210 --> 00:03:15,778
And paragraphs are block elements and force line breaks.

69
00:03:15,778 --> 00:03:18,260
That's why we have these line breaks in there,

70
00:03:18,260 --> 00:03:20,700
but why the elements in the block elements

71
00:03:20,700 --> 00:03:23,560
like the inputs, labels, buttons and anchor elements

72
00:03:23,560 --> 00:03:25,830
are all inline elements.

73
00:03:25,830 --> 00:03:28,838
And therefore they will be affected by text align center,

74
00:03:28,838 --> 00:03:32,340
we can define it on the form because it's inheritable.

75
00:03:32,340 --> 00:03:35,290
So all the elements in the form will inherit it.

76
00:03:35,290 --> 00:03:37,810
And hence, if we save that

77
00:03:37,810 --> 00:03:41,133
and we reload this form now looks like that.

78
00:03:43,030 --> 00:03:45,570
Now I would still argue that we can

79
00:03:45,570 --> 00:03:48,310
improve the overall look here.

80
00:03:48,310 --> 00:03:51,720
For example, by changing this anchor element

81
00:03:51,720 --> 00:03:52,860
down there a little bit,

82
00:03:52,860 --> 00:03:55,050
to be less prominent,

83
00:03:55,050 --> 00:03:57,880
to instead stand back a little bit more.

84
00:03:57,880 --> 00:04:01,540
And I also want to enforce these labels and inputs

85
00:04:01,540 --> 00:04:03,963
to have their own new lines each.

86
00:04:04,800 --> 00:04:07,590
Now the ladder will be general form styles,

87
00:04:07,590 --> 00:04:09,790
which will add to the form CSS file.

88
00:04:09,790 --> 00:04:12,730
The only auth specific styles left here

89
00:04:12,730 --> 00:04:15,420
are the styles affecting the anchor element

90
00:04:15,420 --> 00:04:16,959
at the bottom of the form.

91
00:04:16,959 --> 00:04:18,500
And therefore I'll start with that

92
00:04:18,500 --> 00:04:21,410
to finish working in this auth-CSS file.

93
00:04:21,410 --> 00:04:23,890
And I'll give this anchor element in this form

94
00:04:23,890 --> 00:04:26,960
on the auth pages color,

95
00:04:26,960 --> 00:04:30,517
which is color primary 200,

96
00:04:31,491 --> 00:04:35,030
which is a quite whitish color

97
00:04:35,030 --> 00:04:37,193
and upon hovering on it,

98
00:04:38,120 --> 00:04:40,340
which I can define like this.

99
00:04:40,340 --> 00:04:42,613
And also the active styles for it.

100
00:04:43,570 --> 00:04:46,800
There I actually want to switch the color

101
00:04:46,800 --> 00:04:48,300
to color primary

102
00:04:50,301 --> 00:04:51,293
400.

103
00:04:53,180 --> 00:04:56,000
So again, here, I'm combining multiple selectors,

104
00:04:56,000 --> 00:04:59,730
the selector that selects anchor elements inside of a form

105
00:04:59,730 --> 00:05:02,330
when hovering on it or clicking it

106
00:05:02,330 --> 00:05:04,770
to then set a different color.

107
00:05:04,770 --> 00:05:06,720
Here, I'm also already

108
00:05:06,720 --> 00:05:09,170
using such a combinator where I look for

109
00:05:09,170 --> 00:05:12,250
descendant anchor elements inside of form elements,

110
00:05:12,250 --> 00:05:15,490
and then apply this color to such elements.

111
00:05:15,490 --> 00:05:18,050
And you'll learn about all these different selectors

112
00:05:18,050 --> 00:05:19,805
selector combinators

113
00:05:19,805 --> 00:05:21,800
and selector combinations,

114
00:05:21,800 --> 00:05:23,080
early in the course.

115
00:05:23,080 --> 00:05:25,520
So definitely revisit those sections,

116
00:05:25,520 --> 00:05:30,040
if these CSS selectors are brand new to you.

117
00:05:30,040 --> 00:05:31,400
With that though,

118
00:05:31,400 --> 00:05:33,753
this link now stands back a little bit more.

119
00:05:34,960 --> 00:05:38,250
Now let's work on the general form styles.

120
00:05:38,250 --> 00:05:40,340
And here I

121
00:05:40,340 --> 00:05:44,050
want to start with the hr element in there,

122
00:05:44,050 --> 00:05:46,770
this horizontal line, which I have in there.

123
00:05:46,770 --> 00:05:48,820
I just want to ensure that I

124
00:05:49,710 --> 00:05:54,320
give it a border color that is using the primary color,

125
00:05:54,320 --> 00:05:56,640
so that if it would be using this in other forms

126
00:05:56,640 --> 00:05:57,773
on the page as well,

127
00:05:58,720 --> 00:06:01,350
I also would have a slightly different look for it.

128
00:06:01,350 --> 00:06:04,510
I'm not using the dark orange primary color,

129
00:06:04,510 --> 00:06:06,763
but one of the lighter ones,

130
00:06:07,630 --> 00:06:09,230
and I'll set a margin here.

131
00:06:09,230 --> 00:06:11,739
So as I'm spacing to top and bottom and left and right

132
00:06:11,739 --> 00:06:14,320
of space-4.

133
00:06:14,320 --> 00:06:16,730
Explicitly all the to left and right,

134
00:06:16,730 --> 00:06:18,530
and not just top and bottom,

135
00:06:18,530 --> 00:06:21,830
so that this horizontal line doesn't spend the entire width

136
00:06:21,830 --> 00:06:24,960
of the form because I think it looks a little bit better

137
00:06:24,960 --> 00:06:26,593
if we set it like this.

138
00:06:27,690 --> 00:06:31,050
So now we've got this divider here

139
00:06:31,050 --> 00:06:33,580
and now I want to ensure

140
00:06:33,580 --> 00:06:36,790
that we have line breaks after the labels.

141
00:06:36,790 --> 00:06:37,623
And of course,

142
00:06:37,623 --> 00:06:40,293
I also want to change the look of those input elements.

143
00:06:41,250 --> 00:06:43,860
Let's start with the labels

144
00:06:43,860 --> 00:06:46,120
and I'll target labels in general,

145
00:06:46,120 --> 00:06:47,820
because throughout this page,

146
00:06:47,820 --> 00:06:49,720
I will always

147
00:06:49,720 --> 00:06:53,700
want that look for all the labels in all my forms.

148
00:06:53,700 --> 00:06:57,140
So there's no need to go for classes or anything like this.

149
00:06:57,140 --> 00:07:00,360
I will target all label elements that I have

150
00:07:00,360 --> 00:07:01,950
because for this website,

151
00:07:01,950 --> 00:07:03,610
this is the look I want.

152
00:07:03,610 --> 00:07:05,220
I don't have any labels

153
00:07:05,220 --> 00:07:07,820
that should not get these global styles.

154
00:07:07,820 --> 00:07:09,650
And hence using the type selector

155
00:07:09,650 --> 00:07:11,113
is a good idea here.

156
00:07:12,490 --> 00:07:15,330
Now here, I'll start by changing the text color

157
00:07:15,330 --> 00:07:17,580
to color gray 100.

158
00:07:17,580 --> 00:07:20,253
Which is a pretty white shade of gray.

159
00:07:21,530 --> 00:07:23,660
I will also set display to block,

160
00:07:23,660 --> 00:07:26,930
which is very important because that changes the

161
00:07:26,930 --> 00:07:29,503
inline style, which labels normally have

162
00:07:29,503 --> 00:07:31,940
to block, which for example,

163
00:07:31,940 --> 00:07:33,430
forces a line break

164
00:07:33,430 --> 00:07:36,920
and forces this element to take the entire line

165
00:07:36,920 --> 00:07:38,253
and the document flow.

166
00:07:39,190 --> 00:07:44,190
And I'll add a margin-bottom of space two,

167
00:07:45,460 --> 00:07:49,040
which is 0.5 REM to have some distance between the

168
00:07:49,040 --> 00:07:51,463
label and the input element below it.

169
00:07:52,770 --> 00:07:53,760
And now speaking of that,

170
00:07:53,760 --> 00:07:56,590
I also want to target all input elements on the page

171
00:07:56,590 --> 00:07:58,740
and all text areas.

172
00:07:58,740 --> 00:08:00,570
We don't have a text area yet,

173
00:08:00,570 --> 00:08:03,280
but we will add one later in this section.

174
00:08:03,280 --> 00:08:05,340
And for those elements,

175
00:08:05,340 --> 00:08:07,820
I again want to start by inheriting my base font

176
00:08:08,720 --> 00:08:11,640
because just as for the button, the browser,

177
00:08:11,640 --> 00:08:13,390
or a lot of browsers

178
00:08:13,390 --> 00:08:17,300
do to find default fonts for inputs and text areas.

179
00:08:17,300 --> 00:08:19,600
And I don't want to use those defaults.

180
00:08:19,600 --> 00:08:21,890
Instead, I want to use my main font,

181
00:08:21,890 --> 00:08:25,920
which I set up in base-CSS and with font inherit,

182
00:08:25,920 --> 00:08:28,070
I can force inheritance again.

183
00:08:28,070 --> 00:08:30,080
Which otherwise would be overwritten by

184
00:08:30,080 --> 00:08:31,683
those browser defaults.

185
00:08:33,039 --> 00:08:35,730
Now, I also will add some padding

186
00:08:35,730 --> 00:08:39,010
of space two in all directions.

187
00:08:39,010 --> 00:08:43,140
And give my form elements, a border radius

188
00:08:43,140 --> 00:08:46,480
of border radius, small

189
00:08:46,480 --> 00:08:49,720
so that we have slightly rounded corners.

190
00:08:49,720 --> 00:08:51,950
I will remove the border though.

191
00:08:51,950 --> 00:08:54,400
So we still will see a border

192
00:08:54,400 --> 00:08:56,330
because again, the background color

193
00:08:56,330 --> 00:08:58,030
of those inputs will be different

194
00:08:58,030 --> 00:09:00,660
from the background of the form,

195
00:09:00,660 --> 00:09:02,823
but I don't have any explicit border

196
00:09:02,823 --> 00:09:06,050
and I'll give them a width of 90%

197
00:09:06,050 --> 00:09:08,151
so that they don't take the entire width

198
00:09:08,151 --> 00:09:10,040
that they could get,

199
00:09:10,040 --> 00:09:12,030
but that they also take more

200
00:09:12,030 --> 00:09:14,400
than they would have allocated by default.

201
00:09:14,400 --> 00:09:16,300
Because by default, those input elements

202
00:09:16,300 --> 00:09:19,730
are quite short and by setting an explicit width

203
00:09:19,730 --> 00:09:21,190
they will become bigger.

204
00:09:21,190 --> 00:09:24,666
But I don't want to give them 100% simply just because I

205
00:09:24,666 --> 00:09:27,373
prefer a look of 90% here.

206
00:09:29,460 --> 00:09:31,900
With that, if we save all files again,

207
00:09:31,900 --> 00:09:33,910
this is the look we get,

208
00:09:33,910 --> 00:09:36,740
and that looks quite decent, I would say.

209
00:09:36,740 --> 00:09:39,730
That's a nice signup form and we'll ignore the

210
00:09:39,730 --> 00:09:42,500
navigation for now. It's of course not finished,

211
00:09:42,500 --> 00:09:44,880
but instead, now that this form is finished.

212
00:09:44,880 --> 00:09:48,140
I want to continue by implementing all the backend logic

213
00:09:48,140 --> 00:09:50,230
for making authentication work

214
00:09:50,230 --> 00:09:52,763
and for storing users in the database.