NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,500 Hi guys and welcome back. 2 00:00:01,529 --> 00:00:05,190 In this video, we're going to style the footer, which is probably the most 3 00:00:05,190 --> 00:00:07,140 complicated part of the entire page. 4 00:00:07,530 --> 00:00:08,640 So let's get started. 5 00:00:09,140 --> 00:00:13,550 The first thing to remember is that our footer has two containers of sorts. 6 00:00:13,820 --> 00:00:16,250 There's the footer main element or the block. 7 00:00:16,640 --> 00:00:19,190 And then there's this footer content. 8 00:00:19,640 --> 00:00:23,330 The footer is going to be full width and it's going to occupy 9 00:00:23,480 --> 00:00:25,010 100% of the width of the page. 10 00:00:25,010 --> 00:00:26,430 And it's going to have a background colour. 11 00:00:26,780 --> 00:00:30,979 And the footer content is going to be limited to be the same size as the header. 12 00:00:31,449 --> 00:00:33,410 So we have to remember to do that. 13 00:00:33,921 --> 00:00:36,471 Let's get started with the footer. 14 00:00:36,918 --> 00:00:39,798 And again, I'd just reiterate at this point that I've got all 15 00:00:39,798 --> 00:00:43,218 this CSS code written already and obviously I'm not winging it. 16 00:00:43,938 --> 00:00:47,358 But normally when you are coming up with a CSS code that you want to write. 17 00:00:47,448 --> 00:00:48,948 I would do that in the browser. 18 00:00:48,948 --> 00:00:53,058 I would be playing around deciding what I want exactly to match the design. 19 00:00:53,238 --> 00:00:56,658 And then I would transfer that to the file. 20 00:00:56,808 --> 00:00:59,118 I showed you how to do that in an earlier video, but I'm not 21 00:00:59,118 --> 00:01:00,618 doing it now to save you time. 22 00:01:00,858 --> 00:01:04,578 But again, it's something that you probably want to do when you are coming 23 00:01:04,578 --> 00:01:06,318 up with the CSS that you want to write. 24 00:01:06,818 --> 00:01:09,068 All right , for the footer, we're going to set the background colour. 25 00:01:09,428 --> 00:01:12,088 And it's going to be 323f43. 26 00:01:12,338 --> 00:01:14,948 And that is going to make it a dark color. 27 00:01:15,428 --> 00:01:18,128 And you can see that we've got a little bit of space there 28 00:01:18,128 --> 00:01:19,778 between the elements and the body. 29 00:01:19,928 --> 00:01:21,068 We're actually going to get rid of that. 30 00:01:21,128 --> 00:01:25,688 I didn't remember to get rid of that before, but you can see if we right click 31 00:01:25,688 --> 00:01:27,688 on that little gap and inspected it. 32 00:01:28,348 --> 00:01:29,368 It is here. 33 00:01:29,413 --> 00:01:33,133 Let me just bring this up into the computed tab and in the body. 34 00:01:33,343 --> 00:01:36,703 There's a little bit of margin there that we're going to want to get rid of. 35 00:01:36,703 --> 00:01:39,283 So in body, we're going to do margin zero. 36 00:01:39,433 --> 00:01:40,633 And that's just going to get rid of that. 37 00:01:40,890 --> 00:01:42,150 Perfect, that's what we wanted. 38 00:01:42,690 --> 00:01:43,650 Let's continue. 39 00:01:43,617 --> 00:01:45,537 We've got the footer there with a background color. 40 00:01:45,747 --> 00:01:49,567 And then we're going to add a little bit of padding 40 pixels and 0 41 00:01:49,587 --> 00:01:53,277 pixels just to separate it from the top and the bottom of its content. 42 00:01:53,695 --> 00:01:56,635 And then we're also going to add a little bit of margin at the top. 43 00:01:56,635 --> 00:01:59,305 So we'll do 50 pixels, zero zero, zero. 44 00:01:59,515 --> 00:02:02,185 This is a shorthand way of setting 50 pixels at the top 45 00:02:02,425 --> 00:02:04,585 and no margin anywhere else. 46 00:02:05,065 --> 00:02:08,545 Of course, instead of doing this, you can just do margin top 50 47 00:02:08,545 --> 00:02:11,785 pixels if you are sure that there's not going to be any other margins 48 00:02:11,785 --> 00:02:13,855 anywhere else that you want to unset. 49 00:02:14,355 --> 00:02:17,325 Now we're also going to set a border top, and this is going to 50 00:02:17,325 --> 00:02:20,295 be a four pixel solid black border. 51 00:02:20,475 --> 00:02:23,685 Just to separate the footer from the rest of the page a little bit more. 52 00:02:24,108 --> 00:02:28,008 We're going to set the colour to white so all the text contents will be white. 53 00:02:28,698 --> 00:02:32,438 And we're going to set the font size to 12 pixels, a little bit smaller there. 54 00:02:32,658 --> 00:02:37,458 Basically the smallest that you want to go on a website is going to be 12 pixels. 55 00:02:37,947 --> 00:02:40,317 That's because the footer is going to be a bit less important. 56 00:02:40,527 --> 00:02:42,147 So we're going to leave it as that. 57 00:02:42,647 --> 00:02:45,737 But of course notice that the footer is stuck to the left. 58 00:02:45,887 --> 00:02:46,637 We don't want that. 59 00:02:46,667 --> 00:02:50,597 We want the footer to be centred in the page and we want it to be limited to 60 00:02:50,597 --> 00:02:55,487 the same size as the header so we're going to do footer__content and here 61 00:02:55,487 --> 00:02:57,647 we're going to do max-width 640 pixels. 62 00:02:57,677 --> 00:02:58,487 The same as the header. 63 00:02:58,847 --> 00:03:03,347 Margin: 0 auto and that is going to centre it in the page as 64 00:03:03,347 --> 00:03:04,397 the page gets bigger of course. 65 00:03:04,817 --> 00:03:08,987 We're going to do display: flex and flex-direction: row. 66 00:03:08,987 --> 00:03:13,187 And the reason we're doing this is because we want the different parts of the 67 00:03:13,187 --> 00:03:18,047 content, which are these two sections to be one on the left and one on the right. 68 00:03:18,547 --> 00:03:18,877 Okay. 69 00:03:18,907 --> 00:03:20,527 I'll just make this a little bit bigger so you can see that 70 00:03:20,527 --> 00:03:21,907 it's still centred in there. 71 00:03:22,391 --> 00:03:24,281 And let's go back to the normal size there. 72 00:03:24,781 --> 00:03:30,901 Now I'm going to do footer left to set the left side column and 73 00:03:30,901 --> 00:03:33,581 we're going to do flex-grow: 2. 74 00:03:33,851 --> 00:03:37,964 When multiple flex elements have flex grow, they're going to take 75 00:03:37,964 --> 00:03:42,794 up an amount of space equal to the ratio of flex grow out of the total 76 00:03:42,794 --> 00:03:45,314 sum of flex grows in the container. 77 00:03:45,674 --> 00:03:49,394 So that's a long winded way of saying that if we do footer right 78 00:03:49,604 --> 00:03:51,854 and we set this flex growth to one. 79 00:03:52,479 --> 00:03:56,019 Then this element is going to take up twice as much space as this one. 80 00:03:56,169 --> 00:03:59,389 Okay, so now we can refresh and you can see that is what happens. 81 00:03:59,841 --> 00:04:03,771 Now we want to do display: flex and flex-direction: column. 82 00:04:03,831 --> 00:04:06,651 And what that's going to do, is it's going to make these two elements 83 00:04:06,651 --> 00:04:08,487 here stack up like a column. 84 00:04:08,987 --> 00:04:12,797 So that is these two elements that we've got there. 85 00:04:13,337 --> 00:04:18,317 Now in the right hand side, we want to lay it out as a row of columns 86 00:04:18,347 --> 00:04:20,477 because we've got two columns here. 87 00:04:20,837 --> 00:04:24,947 So in the right hand side, we want flex-direction to be row. 88 00:04:25,197 --> 00:04:27,447 And this will be in the second row. 89 00:04:27,957 --> 00:04:32,457 So we'll do display: flex and flex-direction: row. 90 00:04:33,457 --> 00:04:38,167 You can see that doing this means that recent and calendar are first and 91 00:04:38,227 --> 00:04:40,507 about and how this was made are second. 92 00:04:40,717 --> 00:04:43,357 Exactly as we've got here in our divs. 93 00:04:43,837 --> 00:04:46,297 Now, if we make these into columns. 94 00:04:46,567 --> 00:04:50,017 Their contents will stack up as columns, which is exactly what we want. 95 00:04:50,167 --> 00:04:51,787 So let's go and do that. 96 00:04:52,177 --> 00:04:58,447 We'll do footer column and we'll do display: flex and flex-direction: column. 97 00:04:58,691 --> 00:05:01,181 That is going to lay it out as we wanted. 98 00:05:01,571 --> 00:05:05,741 And finally, we'll do margin left 50 pixels just to separate them 99 00:05:05,921 --> 00:05:07,001 from each other a little bit. 100 00:05:07,501 --> 00:05:09,781 For the individual footer items. 101 00:05:09,811 --> 00:05:11,021 So we'll do footer__item. 102 00:05:11,311 --> 00:05:14,281 We're going to do margin-bottom five pixels, and that's just going 103 00:05:14,281 --> 00:05:17,281 to separate each item from each other just a little bit there. 104 00:05:17,781 --> 00:05:20,391 Remember that the footer items are elements. 105 00:05:20,421 --> 00:05:22,611 So when we've put a href in any of them. 106 00:05:22,611 --> 00:05:23,901 Let's say we put an href in here. 107 00:05:24,401 --> 00:05:26,741 It's going to turn blue and it's going to have an underline. 108 00:05:26,741 --> 00:05:27,881 So that's not what we want. 109 00:05:28,327 --> 00:05:32,797 We do want to say colour inherit and text decoration none. 110 00:05:33,297 --> 00:05:34,797 And then they'll still be white. 111 00:05:35,284 --> 00:05:38,554 Something else that we can do is of course we can change the look 112 00:05:38,554 --> 00:05:40,541 of them when you hover over them. 113 00:05:40,571 --> 00:05:43,341 So we'll do footer__item: hover. 114 00:05:43,661 --> 00:05:46,431 We'll do text-decoration: underline. 115 00:05:46,881 --> 00:05:47,571 Just like that. 116 00:05:48,071 --> 00:05:49,331 And now when we hover over them. 117 00:05:49,511 --> 00:05:50,921 They look like they're clickable. 118 00:05:51,419 --> 00:05:54,387 Notice that the cursor becomes a pointer in "About" but 119 00:05:54,387 --> 00:05:56,178 not so in the other element. 120 00:05:56,358 --> 00:05:57,078 That's totally fine. 121 00:05:57,108 --> 00:05:59,178 It just means they don't have an href at the moment. 122 00:05:59,448 --> 00:06:02,148 So we're going to want to set that once we've got the links ready. 123 00:06:03,508 --> 00:06:04,888 All right, that's everything for this video. 124 00:06:04,888 --> 00:06:07,318 We've got basically everything ready. 125 00:06:07,348 --> 00:06:12,568 The next few steps for this project are going to include Flask, Python, 126 00:06:12,658 --> 00:06:16,168 a database, and actually starting to get user input and displaying 127 00:06:16,168 --> 00:06:17,818 the user input on the page. 128 00:06:18,088 --> 00:06:21,578 But before we can do that, we do need to learn a bit more about 129 00:06:21,598 --> 00:06:25,168 Python and Flask, which we're going to learn about in the next section. 130 00:06:25,648 --> 00:06:28,378 In the section after that, we will use that knowledge to come 131 00:06:28,378 --> 00:06:31,738 back to this project and add flask and a database to it. 132 00:06:32,223 --> 00:06:33,903 So thank you guys for joining me in this section. 133 00:06:34,023 --> 00:06:36,033 I hope you've learned something and you've enjoyed it and 134 00:06:36,033 --> 00:06:37,203 I'll see you in the next one.