1 00:00:02,340 --> 00:00:04,970 So, were you successful? 2 00:00:04,970 --> 00:00:07,460 Let's now solve this challenge together 3 00:00:07,460 --> 00:00:10,220 and let's apply what you learned over this module 4 00:00:10,220 --> 00:00:14,170 to build this form from the ground up with all the inputs 5 00:00:14,170 --> 00:00:17,500 and features you saw in the last lecture. 6 00:00:17,500 --> 00:00:18,400 And for this, 7 00:00:18,400 --> 00:00:23,400 I'll first of all create a new sub-folder named basics, 8 00:00:23,550 --> 00:00:28,550 where I placed the existing HTML and CSS file in. 9 00:00:28,700 --> 00:00:32,240 And then I'll add a new folder, challenge, 10 00:00:32,240 --> 00:00:36,163 where I want to, well, work on that challenge I gave you. 11 00:00:37,510 --> 00:00:38,520 For this here, 12 00:00:38,520 --> 00:00:41,040 I'll again add a new index.html file, 13 00:00:41,040 --> 00:00:43,000 but now in that challenge folder, 14 00:00:43,000 --> 00:00:46,040 and also already a styles.css file, 15 00:00:46,040 --> 00:00:49,040 which will hold the styles, 16 00:00:49,040 --> 00:00:52,970 and I'll open this index.html file 17 00:00:52,970 --> 00:00:56,920 in the challenge folder with live-server now. 18 00:00:56,920 --> 00:00:59,723 And close that other page. 19 00:01:00,830 --> 00:01:04,322 Now here, I'll create that skeleton, 20 00:01:05,840 --> 00:01:08,720 and name it Forms Challenge, 21 00:01:08,720 --> 00:01:10,820 get rid of that line here, 22 00:01:10,820 --> 00:01:14,470 and then start laying out that form which you saw. 23 00:01:14,470 --> 00:01:18,170 And actually, that page had two parts. 24 00:01:18,170 --> 00:01:20,870 It had that form as the main content, 25 00:01:20,870 --> 00:01:23,950 but above that form, I also had a small header 26 00:01:23,950 --> 00:01:25,980 with a little text. 27 00:01:25,980 --> 00:01:28,240 And therefore, I'll add this as well. 28 00:01:28,240 --> 00:01:31,930 I'll add a header element with a h1 element 29 00:01:31,930 --> 00:01:35,453 with Contact Us as text inside of it. 30 00:01:36,700 --> 00:01:39,970 But then they're (indistinct) at this main block 31 00:01:39,970 --> 00:01:41,960 with the form inside of it. 32 00:01:41,960 --> 00:01:43,970 And we can do that right away. 33 00:01:43,970 --> 00:01:46,640 Add that form inside of main, 34 00:01:46,640 --> 00:01:48,810 because that's the structure which we'll need 35 00:01:48,810 --> 00:01:49,963 in the end for this. 36 00:01:52,400 --> 00:01:57,400 With this, If I reload here, we see contact us. 37 00:01:57,450 --> 00:02:00,900 Now before I start adding elements to the form. 38 00:02:00,900 --> 00:02:05,330 I already want to dive into the styles of this page, 39 00:02:05,330 --> 00:02:09,160 because I definitely did not use such a serif font 40 00:02:09,160 --> 00:02:11,920 in that preview which has showed you. 41 00:02:11,920 --> 00:02:16,070 And we also had a background color for this page. 42 00:02:16,070 --> 00:02:20,540 And therefore, I want to apply that here as well. 43 00:02:20,540 --> 00:02:25,540 For this here in styles.css, I will select the body here. 44 00:02:27,120 --> 00:02:31,010 And first of all, set the font-family to sans-serif. 45 00:02:31,010 --> 00:02:34,920 We could also grab a font from Google Fonts, 46 00:02:34,920 --> 00:02:36,190 if we wanted to, 47 00:02:36,190 --> 00:02:39,510 but here I will just use this sans-serif font. 48 00:02:39,510 --> 00:02:41,613 This basic sensor of font. 49 00:02:43,160 --> 00:02:45,780 I will also set a background color, 50 00:02:45,780 --> 00:02:49,760 and here we had a blue color. 51 00:02:49,760 --> 00:02:53,110 So I'll use blue as a starting point and then select 52 00:02:53,110 --> 00:02:57,110 a light blue color with that color picker. 53 00:02:57,110 --> 00:03:01,473 So let's maybe go here, more into this light bluish area, 54 00:03:02,310 --> 00:03:05,210 and then use this very, very, very, light blue. 55 00:03:05,210 --> 00:03:09,700 It's almost white just with a tint of blue in it. 56 00:03:09,700 --> 00:03:10,563 Like this. 57 00:03:11,540 --> 00:03:14,380 And with that in index.html, 58 00:03:14,380 --> 00:03:19,380 if we add a link to style.css below our title, 59 00:03:19,540 --> 00:03:22,260 we now have this light blue background color, 60 00:03:22,260 --> 00:03:26,473 and this text here with the sans-serif font. 61 00:03:27,320 --> 00:03:31,120 And I'll actually use a little bit more blue here, I guess, 62 00:03:31,120 --> 00:03:33,603 little bit further to the right. 63 00:03:34,680 --> 00:03:36,493 Yeah, like this, that looks good. 64 00:03:37,590 --> 00:03:42,190 Now I also want to align my h1 text in the header 65 00:03:42,190 --> 00:03:44,470 and therefore we can select h1, 66 00:03:44,470 --> 00:03:47,573 and set text aligned to center here. 67 00:03:48,570 --> 00:03:51,143 Like this, and now this is centered. 68 00:03:52,040 --> 00:03:55,050 And I will always add a bit more spacing. 69 00:03:55,050 --> 00:04:00,050 Hence here I'll set my margin to 1.5 rem maybe, 70 00:04:01,590 --> 00:04:03,580 so that we have a little bit more space 71 00:04:03,580 --> 00:04:08,580 around the h1 tag, maybe 2rem, like this. 72 00:04:08,910 --> 00:04:11,100 So now that's the basic look here, 73 00:04:11,100 --> 00:04:14,280 but now let's focus on the form. 74 00:04:14,280 --> 00:04:15,113 And for this, 75 00:04:15,113 --> 00:04:18,880 I will already select the form element here for styling, 76 00:04:18,880 --> 00:04:22,380 because I already did add the form here to give that 77 00:04:22,380 --> 00:04:24,890 some dedicated style as well. 78 00:04:24,890 --> 00:04:27,490 And here I'll give that form of width of, 79 00:04:27,490 --> 00:04:32,490 let's say 40rem and a margin of auto to center it. 80 00:04:33,940 --> 00:04:38,940 And then all the background color, off white, 81 00:04:39,057 --> 00:04:42,750 so that we can see it against the background. 82 00:04:42,750 --> 00:04:44,870 Though we don't see anything at the moment 83 00:04:44,870 --> 00:04:47,720 because I have no content in the form. 84 00:04:47,720 --> 00:04:50,580 So if I had temporarily add The Form, 85 00:04:50,580 --> 00:04:55,563 so just some text in there, we can now see that here. 86 00:04:55,563 --> 00:04:57,690 Now, as a next step, 87 00:04:57,690 --> 00:05:02,690 I also want to change that white a little bit 88 00:05:03,020 --> 00:05:06,000 and go into the bluish area here as well, 89 00:05:06,000 --> 00:05:07,460 and use a darker blue, 90 00:05:07,460 --> 00:05:10,523 but still only a tint of blue here. 91 00:05:11,491 --> 00:05:16,491 So that we just barely see that blue, like this maybe. 92 00:05:18,470 --> 00:05:20,193 We can fine tune this later. 93 00:05:21,050 --> 00:05:23,560 Next, I will also add a padding here. 94 00:05:23,560 --> 00:05:26,400 So some internal spacing between the border 95 00:05:26,400 --> 00:05:30,420 and the content of this form, and I'll add a box shadow. 96 00:05:30,420 --> 00:05:33,500 So a little drop shadow behind that form, 97 00:05:33,500 --> 00:05:38,500 and here a box shadow with zero distance on the x-axis 98 00:05:40,610 --> 00:05:43,230 and two pixels on the y-axis, 99 00:05:43,230 --> 00:05:46,640 as well as a blur radius of eight pixels, 100 00:05:46,640 --> 00:05:49,033 and then RGBA value of 0, 0, 0, 0.2, 101 00:05:52,961 --> 00:05:55,930 should look quite good like this. 102 00:05:55,930 --> 00:05:58,550 And of course you can tweak to your likings 103 00:05:58,550 --> 00:06:01,203 and change the shadow if you want a different look. 104 00:06:02,470 --> 00:06:03,820 Now last but not least here, 105 00:06:03,820 --> 00:06:07,110 I also will give this form rounded corners 106 00:06:07,110 --> 00:06:12,110 by giving it a border radius of six pixels here like this. 107 00:06:12,750 --> 00:06:15,320 And that's now my container, my box, 108 00:06:15,320 --> 00:06:17,473 that will hold this form. 109 00:06:18,580 --> 00:06:19,900 Now as a next step, 110 00:06:19,900 --> 00:06:23,433 let's populate this form with a couple of elements.