WEBVTT 0 00:00.500 --> 00:02.390 All right, my dear students, welcome back. 1 00:02.390 --> 00:02.990 Welcome back. 2 00:02.990 --> 00:03.950 We've done our HTML. 3 00:04.070 --> 00:04.970 Very simple. 4 00:04.970 --> 00:08.300 But now I want us to open up the styles.css file. 5 00:08.300 --> 00:14.270 And let's start, you know, adding some pizzazz and some really cool styling to our form to finish 6 00:14.270 --> 00:16.670 it off. Remember we discussed fonts. 7 00:16.910 --> 00:20.630 What did we have to do in order to download and use our own fonts? 8 00:20.990 --> 00:21.620 That's right. 9 00:21.620 --> 00:24.290 We had to use the @font-face block. 10 00:24.290 --> 00:25.610 So why don't we do that. 11 00:25.610 --> 00:32.600 Let's define our own custom font using the @font-face rule. 12 00:32.750 --> 00:34.970 That's what I want to do ... @font-face, 13 00:34.970 --> 00:36.260 it's really this simple. 14 00:36.260 --> 00:37.850 It's really, really is this simple. 15 00:38.150 --> 00:42.260 The first thing is let's custom name our font. 16 00:43.900 --> 00:48.190 We do that by using the font-family property. 17 00:48.190 --> 00:50.840 And here let's just define it as handwriting. 18 00:50.860 --> 00:55.600 This is not our headings, this is the handwriting or the text the user puts into the input box. 19 00:55.630 --> 00:57.910 The next thing is I want to grab our font 20 00:58.590 --> 01:07.780 and provide the browser with a hint as to what format a font resource is 21 01:07.800 --> 01:12.060 so that the browser can select a suitable one. 22 01:12.090 --> 01:19.290 It is possible to include a format type inside a format function. 23 01:19.290 --> 01:19.870 I know, 24 01:19.900 --> 01:21.270 sounds strange, right? 25 01:21.450 --> 01:23.150 But let me show you exactly what I mean. 26 01:23.160 --> 01:28.740 So all I'm going to do now is I'm going to define a src attribute here, and I want the src kind 27 01:28.740 --> 01:32.130 of to come from two different formats of sources, right? 28 01:32.130 --> 01:36.660 So we define a src property by this url() method. 29 01:36.690 --> 01:39.120 Here we can just reference our local file. 30 01:39.120 --> 01:44.640 We know it's in the folder of fonts and here we can define our journal-webfont 31 01:44.670 --> 01:50.760 woff2. This is our preference. And like I mentioned in the comment above, we're going to give a hint 32 01:50.760 --> 01:53.640 to the browser now that this is the format, right, 33 01:53.640 --> 02:01.240 if the browser has woff2 available to it. It just helps speed things up. And we can do exactly the 34 02:01.240 --> 02:01.690 same thing, 35 02:01.690 --> 02:03.940 what about if the browser doesn't support woff2? 36 02:03.970 --> 02:09.010 Well, in that case, let's grab our fonts and in here let's don't use woff2 format. 37 02:09.010 --> 02:11.320 Let's just give it the woff format. 38 02:11.320 --> 02:15.220 And of course in this instance the format is woff. 39 02:15.250 --> 02:15.790 There we go 40 02:15.820 --> 02:18.280 my dear students, it really is that simple. 41 02:18.700 --> 02:20.530 So that's our handwriting font. 42 02:20.560 --> 02:22.270 We can do exactly the same thing. 43 02:22.270 --> 02:26.950 And because it's the same kind of concept, I'm not going to be putting all the, you know, all the 44 02:26.950 --> 02:27.670 comments here. 45 02:27.670 --> 02:36.730 We'll just say custom name our font - same as last time. We use the font-family property and here we want 46 02:36.730 --> 02:41.020 to call it, let's just call it headings because we're using these fonts for the headings. 47 02:41.290 --> 02:43.720 And of course the next step is to grab our font. 48 02:45.000 --> 02:45.690 Very, very simple. 49 02:45.690 --> 02:47.040 Let me start scrolling down. 50 02:47.160 --> 02:50.250 We need the src attribute. Here, the url(), and 51 02:50.280 --> 02:51.510 we can do the same thing. 52 02:52.820 --> 02:56.000 Access our fonts folder. Within here, 53 02:56.030 --> 03:02.900 let's access our typewriter-webfont woff2, and let's give it a format of woff2. 54 03:03.770 --> 03:05.330 Let's do exactly the same here. 55 03:05.360 --> 03:06.220 url(), 56 03:07.030 --> 03:07.840 fonts 57 03:09.450 --> 03:10.050 woff, 58 03:11.250 --> 03:15.660 specify or tell the browser that its format is woff. 59 03:15.990 --> 03:16.620 You know what, 60 03:16.620 --> 03:19.890 I think I might have put a semicolon here instead of a comma. 61 03:19.920 --> 03:20.820 I did too. 62 03:20.850 --> 03:22.230 Luckily I picked that up now. 63 03:23.370 --> 03:24.240 So there we go. 64 03:24.660 --> 03:25.920 Right now, nothing, 65 03:25.920 --> 03:26.040 you know, 66 03:26.190 --> 03:28.040 nothing would have changed. If we got to our browser, 67 03:28.050 --> 03:33.480 we are still on the default system fonts, which makes sense because we haven't used these fonts anywhere 68 03:33.480 --> 03:33.630 yet. 69 03:33.660 --> 03:35.610 We've just defined them and we've grabbed them. 70 03:35.970 --> 03:37.350 Okay, but let's continue. 71 03:37.380 --> 03:38.310 Okay, what do I want to do? 72 03:38.340 --> 03:40.560 Well, let's affect the body of our entire page now. 73 03:40.890 --> 03:47.730 Let's define its font-size as 1.3em, and for fun, let's just go sans-serif. 74 03:48.570 --> 03:49.620 Let's go to the browser. 75 03:50.010 --> 03:50.490 There we go. 76 03:50.490 --> 03:51.240 Just a bit bigger. 77 03:51.240 --> 03:55.050 And all our fonts now are at least standardized, even though we're going to override them. 78 03:55.050 --> 03:55.770 I know, I know. 79 03:55.770 --> 03:58.350 So we, strictly speaking, don't even have to do this. 80 03:58.530 --> 04:09.810 Why don't we put in some padding of 0.5em, and let's give this page a nice background color of 49,49,49. 81 04:10.050 --> 04:11.090 Let's go to our browser. 82 04:11.100 --> 04:13.140 Pretty hideous, but we are getting there. 83 04:13.170 --> 04:13.740 Don't worry. 84 04:13.770 --> 04:14.520 Don't worry. 85 04:15.060 --> 04:15.690 Okay. 86 04:15.690 --> 04:16.920 What is the next thing I want to do? 87 04:16.950 --> 04:23.350 Well, let me put the browser side by side so you can see as we go on what CSS properties we are affecting. 88 04:23.440 --> 04:24.760 Why don't we work on our form 89 04:24.760 --> 04:25.270 now? 90 04:25.270 --> 04:32.140 If we look at our index file, we've wrapped everything within this form tag. And therefore we want to 91 04:32.320 --> 04:35.710 apply certain widths and heights to that form itself. 92 04:36.160 --> 04:39.160 So let's grab our form and start applying some styling to it. 93 04:39.160 --> 04:41.380 The first thing I want to do is define its width 94 04:42.080 --> 04:44.150 as what? Well, my dear students, remember 95 04:44.150 --> 04:46.850 we want our entire form wrapped within this post card. 96 04:46.850 --> 04:54.230 So if we go to our root directory here, and we look at the post card, we know that its size is 679 pixels 97 04:54.230 --> 04:57.250 wide and 434 pixels high. 98 04:57.260 --> 05:02.870 So in that case, let's go back to our styles.css, and let's define it or let's give it the same 99 05:02.870 --> 05:03.650 width and height. 100 05:03.680 --> 05:07.340 The width of 679 pixels. 101 05:08.250 --> 05:09.890 And the width 102 05:09.900 --> 05:13.080 want to be 434 pixels. 103 05:13.290 --> 05:16.780 And then what we can do is why don't we incorporate our postcard image into here? 104 05:16.800 --> 05:23.490 So let's grab our background property and let's specify its URL. And its URL is literally in the same 105 05:23.490 --> 05:24.030 directory 106 05:24.030 --> 05:26.400 as the postcard_background.png. 107 05:26.430 --> 05:29.380 If we save this, there we go. 108 05:29.400 --> 05:30.810 How awesome is that? 109 05:30.810 --> 05:33.000 Right, but it's still not quite fitting properly. 110 05:33.660 --> 05:37.710 And in order to make it fit properly, there's just a few more things we have to do. 111 05:37.740 --> 05:40.320 Firstly, let's set its position to relative. 112 05:41.100 --> 05:45.540 The next thing I want to do is I want to remove well, I want to center it. 113 05:45.550 --> 05:47.580 So let's center it to the screen. 114 05:47.760 --> 05:48.270 That's fine. 115 05:48.270 --> 05:48.930 That's fine. 116 05:49.170 --> 05:50.610 Let's give it some padding. 117 05:50.740 --> 05:51.610 Starting to get there. 118 05:51.610 --> 05:52.740 It's starting to get there. 119 05:53.250 --> 05:55.020 I want the box-sizing property. 120 05:55.020 --> 05:58.990 and we've discussed this before in previous lectures, to border-box. 121 05:59.010 --> 06:04.200 It just gives us more intuitive control around the sizing of all our widgets. 122 06:04.200 --> 06:05.220 And now 123 06:05.220 --> 06:08.880 right, because we're on this form, remember we spoke about the grid system. 124 06:08.880 --> 06:11.850 So right now I want to create our grid. 125 06:12.330 --> 06:15.510 This is where really the exciting things happen. 126 06:16.560 --> 06:17.820 How do we create a grid? 127 06:17.850 --> 06:21.360 Well, remember, we've got to set its display property to grid. 128 06:21.390 --> 06:22.740 That's the first thing we have to do. 129 06:22.770 --> 06:26.400 How do we deal with evenly spacing our grid? 130 06:26.430 --> 06:34.830 Well, what's quite cool is that the CSS, and I'll put a comment here, the CSS grid has a new unit that 131 06:34.830 --> 06:38.880 solves spacing our grid evenly. 132 06:40.110 --> 06:41.160 It's quite cool. 133 06:41.190 --> 06:51.090 The fractional unit, it's known as fr, that solves the problem of automatically distributing space. 134 06:51.300 --> 06:52.430 Let me show you how we use it. 135 06:52.440 --> 06:53.580 It's very, very simple. 136 06:53.610 --> 07:02.370 Let's access our grid-template-columns and here we're using the keyword repeat, and it takes two arguments. 137 07:02.400 --> 07:04.590 The first argument is how many columns do we want? 138 07:04.620 --> 07:05.940 We want 2 columns. 139 07:06.740 --> 07:11.330 And each column is going to take one fractional width. 140 07:11.860 --> 07:12.070 Okay. 141 07:12.080 --> 07:13.070 I know it sounds confusing. 142 07:13.070 --> 07:18.020 Let me actually put the columns here or another comment just so you understand what this repeat was. 143 07:18.020 --> 07:34.610 So, using repeat says we want 2 columns with equal width, each taking up one fractional unit. 144 07:34.640 --> 07:36.130 That's all we saying here. 145 07:36.140 --> 07:38.780 If we go to the browser, we open this up in our console, 146 07:38.780 --> 07:40.400 we'll start seeing our grid, right? 147 07:40.400 --> 07:41.420 The make-up of our grid. 148 07:41.420 --> 07:42.980 Let's grab the form. 149 07:44.170 --> 07:45.190 And here it is. 150 07:45.700 --> 07:50.860 We've defined 2 columns and then we've got rows and we haven't worked on rows yet. 151 07:50.890 --> 07:54.370 They're not the correct placement actually, so we need to sort that out. 152 07:54.750 --> 07:55.000 Okay. 153 07:55.000 --> 07:55.760 So let's sort that out 154 07:55.780 --> 07:57.880 now, quickly. We've got our columns. 155 07:58.000 --> 07:59.950 Now I want to sort out our rows. 156 08:00.100 --> 08:03.400 Let's access our grid-template-rows. 157 08:08.230 --> 08:10.440 We want the first row to be really large. 158 08:10.450 --> 08:14.050 The second row and third row are for each of the form headings - 159 08:14.050 --> 08:16.900 I'll show you now. And then the last row we can just set to auto. 160 08:17.890 --> 08:19.900 Let's save this, and go back here. 161 08:20.110 --> 08:23.800 It's starting to look nice, but I actually want gaps between each grid item. 162 08:23.800 --> 08:26.350 I don't want just a dotted line. 163 08:26.350 --> 08:28.930 And in order to add gaps, it's very, very easy. 164 08:28.930 --> 08:33.130 All we need to do is define a grid-gap and you'll see how this works 165 08:33.130 --> 08:35.230 now. Let's define it as 18 pixels. 166 08:35.260 --> 08:41.290 Let's go back to our form and here we can see that we've got gaps, which is just nice because it's going 167 08:41.290 --> 08:43.900 to separate all of our form controls quite nicely. 168 08:44.140 --> 08:46.570 It's going to make a lot of sense shortly, I promise. 169 08:46.960 --> 08:47.340 Okay. 170 08:47.350 --> 08:48.880 What is the next thing we should style? 171 08:50.330 --> 08:54.620 I want to style our heading, right, the "to: King Kong". 172 08:54.620 --> 08:58.040 So why don't we grab our h1 tag, font-family, 173 08:59.110 --> 09:02.020 this is the first time we're using this, so it's exciting. 174 09:02.200 --> 09:04.620 The font-family is headings. 175 09:05.470 --> 09:07.990 If we save that, and there is our own custom font. 176 09:08.020 --> 09:09.190 How awesome. 177 09:11.060 --> 09:12.860 Font size is just too big, right? 178 09:12.870 --> 09:14.810 So let's just reduce it a bit. 179 09:14.840 --> 09:15.350 There you go. 180 09:15.380 --> 09:16.280 Much, much better. 181 09:16.850 --> 09:21.110 I don't want it bold, so let's just go lighter. 182 09:21.140 --> 09:21.620 There we go. 183 09:21.650 --> 09:22.670 Much, much better. 184 09:23.750 --> 09:33.950 Now I want to access the align-self property and the align-self property overrides a grid-align value. 185 09:33.980 --> 09:38.870 The end value aligns the item at the bottom of the grid. 186 09:42.210 --> 09:49.680 So like I mentioned, I want to access the align-self property, self, and I want to set that to end. And 187 09:49.680 --> 09:51.180 look what happens when I do that. 188 09:51.540 --> 09:52.500 How awesome. 189 09:52.590 --> 09:55.380 If we go to the browser, you'll see exactly how this is working. 190 09:56.540 --> 09:58.610 If we inspect our grid. 191 09:59.870 --> 10:06.620 We know that King Kong was pushed to the top originally, but now we've set it to be at the end of this 192 10:06.620 --> 10:10.460 grid or the cell grid, which is why it's been pushed down now. 193 10:10.940 --> 10:12.080 How awesome. 194 10:12.440 --> 10:18.080 But you'll notice, my dear students, can you see our message div? It's kind of shoved to the top right 195 10:18.080 --> 10:19.550 in the second cell? 196 10:19.580 --> 10:20.510 We don't want that. 197 10:20.540 --> 10:26.810 We want to specify that our message should start in row one and span across all rows. 198 10:27.080 --> 10:30.620 So this is the huge benefit with working with the grid system. 199 10:30.830 --> 10:32.060 And I'll show you exactly what I mean. 200 10:32.060 --> 10:36.170 So let's access that div by accessing its ID of message. 201 10:36.260 --> 10:37.490 We gave it an ID of message. 202 10:37.490 --> 10:41.750 We can access this grid-row-property and this is what's really cool. 203 10:41.750 --> 10:46.820 We can say that we want it to start on row 1 and we want it to span all 4 rows. 204 10:46.820 --> 10:49.460 And if we save this, go back to the browser. 205 10:50.330 --> 10:51.500 How cool. 206 10:51.650 --> 10:57.890 Basically its saying here my students that we want this message div to take up the entire first column. 207 10:57.890 --> 11:03.800 We want it to start on row one and take up the entire four rows of our entire grid. 208 11:03.980 --> 11:05.160 This is the beauty, 209 11:05.180 --> 11:07.100 this is the beauty with working with the grid system. 210 11:07.100 --> 11:09.390 We have a lot of flexibility and control. 211 11:09.410 --> 11:12.920 Don't worry, we're going to style their textarea input shortly. 212 11:13.130 --> 11:14.550 Okay, so what should we target next? 213 11:14.570 --> 11:18.220 Well, you can see all our labels like "Your message", "from", "reply" ... 214 11:18.230 --> 11:21.280 all of those are in the wrong text format. 215 11:21.290 --> 11:22.610 So let's go here. 216 11:22.730 --> 11:24.530 Let's grab our label. 217 11:26.660 --> 11:27.380 Our label. 218 11:27.380 --> 11:35.690 We can use the font property in CSS, give it a size of 1em, and then define its font-family as headings. 219 11:35.690 --> 11:38.030 And if we save this, go to the browser, 220 11:38.060 --> 11:38.870 there we go. 221 11:38.870 --> 11:40.790 It's already starting to kind of fit in. 222 11:40.790 --> 11:42.890 It's starting to look really, really cool. 223 11:42.890 --> 11:43.970 But let's keep going. 224 11:44.000 --> 11:45.740 Let's don't stop here, right? 225 11:45.740 --> 11:46.820 Let's keep going. 226 11:47.360 --> 11:47.840 You know what, 227 11:47.840 --> 11:49.010 let me actually, 228 11:50.740 --> 11:52.180 I quite like having the grid here, though. 229 11:52.210 --> 11:52.870 Let's keep it. 230 11:52.870 --> 11:53.770 Let's keep it. 231 11:53.890 --> 11:54.400 All right. 232 11:54.400 --> 11:55.360 So we've done the label. 233 11:55.360 --> 11:59.140 What I want to do now is I want to access our input and our textarea. 234 12:00.350 --> 12:02.060 Textarea. 235 12:03.440 --> 12:04.760 So let's start styling this. 236 12:04.760 --> 12:07.370 Let's define it as having no border. 237 12:11.820 --> 12:13.500 It's already starting to look better. 238 12:14.510 --> 12:17.010 Let's give it a background of none. 239 12:17.030 --> 12:18.470 We don't like that white border. 240 12:18.590 --> 12:21.980 We want the background of none, which is coming on. 241 12:21.980 --> 12:24.170 It's coming on. The font, 242 12:24.200 --> 12:26.780 remember, we want our own custom font. 243 12:26.810 --> 12:29.660 We can define it as 1.5em in size, 244 12:29.660 --> 12:33.500 and then the font word we gave it - the font-family is handwriting 245 12:33.500 --> 12:34.010 font. 246 12:34.340 --> 12:35.630 What is going on here? 247 12:36.030 --> 12:36.710 Oh, you know what? 248 12:36.710 --> 12:38.480 This whole post card isn't fitting properly. 249 12:38.480 --> 12:39.650 I've done something wrong. 250 12:39.740 --> 12:43.760 Let's scroll to a form background width, heigh .... oh, height. 251 12:46.700 --> 12:47.260 We had two widths. 252 12:47.320 --> 12:48.500 That was silly 🙈. 253 12:49.190 --> 12:50.150 That was really silly 🙈. 254 12:50.180 --> 12:51.080 How's that looking? 255 12:51.990 --> 12:52.320 All right. 256 12:52.320 --> 12:54.780 So I think that solved our issue. 257 12:54.810 --> 12:55.290 That's right. 258 12:55.290 --> 12:55.720 That's right. 259 12:55.740 --> 12:55.950 Okay. 260 12:55.950 --> 12:58.050 So at least the full post card is showing. 261 12:58.230 --> 13:02.640 The next issue we're having is you can see this textarea is just way too wide, which is why it's pushing 262 13:02.640 --> 13:05.040 this grid, you know, so far. 263 13:05.250 --> 13:09.300 So what we need to do is go back to our input and textarea here. 264 13:09.840 --> 13:19.260 Let's give it some padding, 0 10px, and let's define its width as being 60%, which would 265 13:19.260 --> 13:20.190 solve our problem. 266 13:21.190 --> 13:21.940 There we go. 267 13:22.150 --> 13:23.890 It's starting to look good. 268 13:23.980 --> 13:25.310 It's starting to look very good, 269 13:25.330 --> 13:26.160 I might say, 270 13:26.170 --> 13:27.040 I might add. 271 13:27.760 --> 13:29.110 Okay, let's continue. 272 13:29.440 --> 13:31.930 Why is this background not changing here? 273 13:32.620 --> 13:34.320 Uh, what have I done? 274 13:34.450 --> 13:35.400 There's an "s" here. 275 13:37.230 --> 13:37.830 Much better. 276 13:38.860 --> 13:39.220 Okay. 277 13:39.250 --> 13:40.240 Much, much better. 278 13:41.300 --> 13:41.990 We're getting there. 279 13:42.020 --> 13:42.710 We're getting there. 280 13:42.860 --> 13:43.060 Okay. 281 13:43.070 --> 13:48.980 That's all I want to do now with the input and textarea. Why don't now we target the input where its state 282 13:48.980 --> 13:50.120 is in focus? 283 13:51.040 --> 13:53.980 And we can do textarea as well. 284 13:54.010 --> 13:54.850 Textarea 285 13:54.850 --> 14:01.570 when it's state is in focus. All we want to do here is change the background color 286 14:04.260 --> 14:07.950 but we just want to make it very, very light gray. 287 14:07.980 --> 14:08.760 This should work. 288 14:08.760 --> 14:09.480 Let's see. 289 14:09.840 --> 14:10.820 It's in focus. 290 14:10.830 --> 14:11.400 Yep. 291 14:11.940 --> 14:12.660 How nice is that? 292 14:12.660 --> 14:13.920 It's a nice gray color. 293 14:14.070 --> 14:14.700 I love it. 294 14:14.700 --> 14:15.360 I love it. 295 14:15.390 --> 14:18.210 We can also define its border-radius 296 14:18.240 --> 14:19.650 and make it a bit round. 297 14:20.880 --> 14:21.450 Let's see now. 298 14:23.560 --> 14:25.000 Yeah, it looks really nice. 299 14:25.090 --> 14:26.250 Okay, what can we do next? 300 14:26.260 --> 14:26.970 Let's keep going. 301 14:26.980 --> 14:27.550 Let's keep going. 302 14:27.580 --> 14:28.090 We're almost done. 303 14:28.090 --> 14:28.960 We're almost done. 304 14:29.780 --> 14:33.470 We can target an input where its ID is name. 305 14:35.130 --> 14:36.840 And why don't we do two, 306 14:36.840 --> 14:41.760 why don't we do two in one. Input and its ID is mail, 307 14:42.960 --> 14:46.230 and here we can affect font-size, 308 14:47.210 --> 14:50.180 1.5em, and let's give it no outline. 309 14:51.390 --> 14:52.410 Much, much better. 310 14:53.100 --> 14:56.550 There's still an outline in the textarea, but at least these two don't have any outline. 311 14:56.910 --> 14:58.890 And now I'm just going to get very picky. 312 14:58.920 --> 15:00.450 Let's just start styling this up like this. 313 15:00.450 --> 15:01.740 Then you can see what's happening. 314 15:02.010 --> 15:04.500 I want to start getting very, very detailed now. 315 15:04.500 --> 15:09.420 I want to grab our div with the id of from, and let's style this. 316 15:09.450 --> 15:14.280 All I want to do now is I want our from and reply right above those lines on the card. 317 15:15.390 --> 15:21.420 So, align-self we can just say center and it needs to be pushed up slightly. 318 15:21.420 --> 15:25.290 So let's just give this padding bottom of 10 pixels. 319 15:25.830 --> 15:26.370 Much better. 320 15:26.370 --> 15:26.790 Much better. 321 15:26.790 --> 15:28.320 You can see it's just above the line now. 322 15:28.530 --> 15:29.700 It's looking quite good. 323 15:29.700 --> 15:34.080 And what about the div of reply? 324 15:34.110 --> 15:35.670 Let's just target that, 325 15:37.420 --> 15:41.410 reply, and we can align-self to the center as well. 326 15:41.800 --> 15:42.400 Looking good. 327 15:42.400 --> 15:44.470 And then we can see our message heading is too high. 328 15:44.500 --> 15:46.300 Your message ... way, way too high. 329 15:46.330 --> 15:48.380 So let's bring that down. 330 15:48.400 --> 15:49.390 How do we do that? 331 15:49.420 --> 15:51.600 Well, we can just target our message div. 332 15:52.370 --> 15:57.830 And target its child of label, because we know that's the label we're dealing with. 333 15:58.100 --> 16:01.820 Here we can set its position property to absolute. 334 16:02.500 --> 16:06.160 We can push it to the right. Better. And then we can push it down. 335 16:06.590 --> 16:08.470 Let's try 100 pixels. 336 16:10.430 --> 16:11.300 Much, much better. 337 16:11.300 --> 16:16.070 And now I explicitly want to target our textarea element. 338 16:16.070 --> 16:17.690 So we grab our textarea. 339 16:17.990 --> 16:21.560 Here I want to define its height as 70%. 340 16:21.560 --> 16:24.620 So if the user clicks in here, yeah, that looks very, very good. 341 16:24.620 --> 16:28.310 Let's define its width as being, I don't know, 90%. 342 16:28.340 --> 16:29.120 How's that? 343 16:29.480 --> 16:32.540 Remember, it's relative to its parent, which is the div. 344 16:32.540 --> 16:35.480 So we're saying it should be 90% of the width of the div. 345 16:35.870 --> 16:37.100 I think that looks really good. 346 16:37.610 --> 16:39.260 And then of course let's push it down. 347 16:39.260 --> 16:42.560 It's too high. And we used top of 100 pixels 348 16:42.560 --> 16:46.520 so let's give this margin as well of 100 pixels at the top. 349 16:46.520 --> 16:49.340 And then right, bottom and left can just all be 0. 350 16:49.370 --> 16:53.930 Now, if the user clicks in here, it is perfect, it is perfect. 351 16:54.050 --> 16:56.120 And then of course, we don't want an outline. 352 16:56.870 --> 16:58.670 Same as the from and reply. 353 16:58.700 --> 16:59.510 No outline. 354 16:59.510 --> 17:00.230 No outline. 355 17:00.230 --> 17:01.040 No outline. 356 17:01.070 --> 17:02.030 How awesome. 357 17:02.180 --> 17:05.090 And then my dear students, I just want to style our button. 358 17:05.090 --> 17:06.560 Our "Send your message" button. 359 17:06.710 --> 17:08.230 We are literally almost at the end. 360 17:08.240 --> 17:08.840 Stick with me. 361 17:08.840 --> 17:09.710 Let's give it some padding. 362 17:09.710 --> 17:10.610 You'll see how quick this is. 363 17:10.610 --> 17:12.680 5 pixels ... it's starting to look 364 17:12.680 --> 17:13.820 nice. Font, 365 17:14.120 --> 17:15.710 we can give it bold 366 17:16.870 --> 17:20.200 0.6em in sans-serif. 367 17:20.230 --> 17:21.220 How does that look? 368 17:22.200 --> 17:22.980 It looks nice. 369 17:22.980 --> 17:26.430 Border, 2 pixels solid 370 17:27.330 --> 17:29.010 and we can give it a gray border. 371 17:29.040 --> 17:30.870 Yeah, that looks really nice. 372 17:31.320 --> 17:32.520 Border radius 373 17:32.550 --> 17:35.700 let's just give it a slight rounded border-radius. 374 17:35.790 --> 17:36.420 It's coming on. 375 17:36.420 --> 17:37.200 It's coming on. 376 17:37.740 --> 17:40.740 Cursor can be pointer. And then transform, 377 17:40.740 --> 17:47.220 remember, we had it at a slight angle so we can just rotate this element. 378 17:47.430 --> 17:47.820 I don't know, 379 17:47.850 --> 17:49.740 1.5 degrees should work. 380 17:49.980 --> 17:50.640 Yeah. 381 17:50.860 --> 17:52.350 Just adds a bit of pizzazz. 382 17:52.380 --> 17:53.490 It's really, really cool. 383 17:53.610 --> 17:56.400 Now what we could do just to show you something different, 384 17:56.400 --> 18:01.920 I mean, we could go to our index file, to our message and put these greater than signs, right? 385 18:01.920 --> 18:02.910 We could do this. 386 18:03.090 --> 18:04.980 But I want to show you something else we can do. 387 18:05.310 --> 18:14.010 We can actually access the buttons ::after pseudo element, and we can just set its content to those 388 18:14.010 --> 18:15.060 greater signs. 389 18:15.060 --> 18:19.920 Same thing, I'm just showing you different things, different ways to to do the same thing. 390 18:19.920 --> 18:24.000 And then here, I just want to finish it off by creating a cool hover effect 391 18:25.440 --> 18:28.920 and a focus effect. 392 18:29.370 --> 18:31.800 I don't want an outline, so we can say none. 393 18:32.010 --> 18:32.910 Background 394 18:32.910 --> 18:34.050 we can say black. 395 18:35.030 --> 18:38.270 And the color can be white. 396 18:38.300 --> 18:39.170 How does this look? 397 18:40.860 --> 18:42.600 How awesome is that! 398 18:42.690 --> 18:44.220 From, reply ... 399 18:44.250 --> 18:44.640 you know what, 400 18:44.640 --> 18:45.900 this font is too big. 401 18:46.370 --> 18:46.500 Right. 402 18:46.500 --> 18:48.850 So let's scroll up here, and just refresh this page. 403 18:48.880 --> 18:50.490 Okay, let's just type in here 404 18:50.520 --> 18:51.140 "asdf". 405 18:51.150 --> 18:54.780 I want that... the font is too big. Input ... 406 18:54.810 --> 18:57.660 no, no, I want the actual input itself. 407 18:57.660 --> 18:58.830 I'm sure we defined ... 408 18:58.830 --> 18:58.980 yeah, 409 18:58.980 --> 18:59.730 here we go. 410 19:00.390 --> 19:01.830 Let's define 1em. 411 19:03.510 --> 19:04.050 Um. 412 19:04.140 --> 19:05.190 I think that's a bit better. 413 19:06.500 --> 19:07.820 Oh, why is that so large? 414 19:08.150 --> 19:09.770 Okay, let's try and capture that. 415 19:10.480 --> 19:12.190 Here, this is the issue. 416 19:13.350 --> 19:13.650 Better. 417 19:13.980 --> 19:14.550 You know what, 418 19:14.550 --> 19:15.980 I don't even think we need that font-size. 419 19:15.990 --> 19:19.890 We should just specify it here, and it should apply automatically, which it is doing. 420 19:19.890 --> 19:21.900 And my dear students, we are done. 421 19:21.930 --> 19:23.340 How awesome is this? 422 19:23.970 --> 19:24.720 Woo hoo! 🥳 423 19:25.110 --> 19:26.280 Well done for sticking with me. 424 19:26.280 --> 19:26.760 Well done. 425 19:26.760 --> 19:27.540 Well done. 426 19:27.720 --> 19:29.190 How awesome is this, my dear students! 427 19:29.200 --> 19:31.440 So the user can type their message in here. 428 19:31.470 --> 19:37.500 They can say, Hey, this is from Wally, and you can send your response to wally. 429 19:38.160 --> 19:43.830 If he does not or she does not type a valid email address, we should get a validation error, which 430 19:43.830 --> 19:45.060 is exactly what's happened. 431 19:45.570 --> 19:51.270 If it's wally@gmail.com, the user should be able to now submit their form and it happens successfully. 432 19:51.270 --> 19:52.140 So there you go. 433 19:52.140 --> 19:58.110 A very fun example of creating your own postcard using the grid system, applying some simple CSS to 434 19:58.110 --> 20:00.030 create a very fun form. 435 20:00.030 --> 20:00.880 I hope you had a lot of fun. 436 20:00.880 --> 20:02.100 I hope you're following along. 437 20:02.100 --> 20:08.370 And in the next section I want to discuss now a bit more detail around submitting a form to a server. 438 20:08.490 --> 20:09.890 We are almost finished this course. 439 20:09.900 --> 20:11.040 Please stick with me. 440 20:11.070 --> 20:16.330 Although ... I am a bit sad we are coming to the end because I've had so much fun. 441 20:16.330 --> 20:17.590 But anyway, stick with me. 442 20:17.620 --> 20:18.880 See you in the next lecture.