Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,583 --> 00:00:03,996 Welcome back to building the footer. 2 2 00:00:03,996 --> 00:00:07,913 Let's write some more CSS to format our footer. 3 3 00:00:10,912 --> 00:00:14,956 So, here we are again as I said before we want 4 4 00:00:14,956 --> 00:00:19,628 to, of course, have these links side by side. 5 5 00:00:19,628 --> 00:00:22,645 And we want to get rid of these bullet points 6 6 00:00:22,645 --> 00:00:24,851 and we want to format the whole thing. 7 7 00:00:24,851 --> 00:00:27,999 And we also want a very dark background 8 8 00:00:27,999 --> 00:00:32,166 for this footer in order to make it, kind of, stand out. 9 9 00:00:34,978 --> 00:00:39,145 So let's go to our CSS. 10 10 00:00:41,830 --> 00:00:42,663 And the thing's we're going to 11 11 00:00:42,663 --> 00:00:45,580 do are, actually, quite easy to do. 12 12 00:00:47,335 --> 00:00:51,502 It's just to repeat some things we already did before. 13 13 00:00:55,666 --> 00:00:59,199 So to start, 14 14 00:00:59,199 --> 00:01:02,699 let's make a darker background color here. 15 15 00:01:07,706 --> 00:01:11,873 Of course, not black, but we want it kind of deep. 16 16 00:01:13,950 --> 00:01:17,200 And I like to use this color, actually. 17 17 00:01:18,305 --> 00:01:20,138 Let's just check this. 18 18 00:01:21,014 --> 00:01:22,973 Okay, this makes a great contrast between this 19 19 00:01:22,973 --> 00:01:27,140 white and this gray and now I will make the text, like 20 20 00:01:28,109 --> 00:01:32,276 white or a very light gray. 21 21 00:01:33,243 --> 00:01:36,743 But first, let's format those navigations. 22 22 00:01:38,789 --> 00:01:40,622 So we have Footer Nav. 23 23 00:01:43,245 --> 00:01:48,061 And we want it to have no bullet points as always. 24 24 00:01:48,061 --> 00:01:50,115 And we want this one to float on 25 25 00:01:50,115 --> 00:01:53,365 the left side, inside of its container. 26 26 00:01:54,948 --> 00:01:57,698 And then we have to social icons. 27 27 00:01:59,650 --> 00:02:02,483 And we also want no bullet points. 28 28 00:02:03,960 --> 00:02:08,127 And this one we want to float all the way to the right side. 29 29 00:02:12,507 --> 00:02:16,674 On the list elements inside of these navigations 30 30 00:02:17,643 --> 00:02:21,388 of these unordered lists, we want to have them 31 31 00:02:21,388 --> 00:02:24,357 side by side and so one thing that we 32 32 00:02:24,357 --> 00:02:27,252 can do is to display them as in line blocks. 33 33 00:02:27,252 --> 00:02:29,597 And this way they will not cause a line break 34 34 00:02:29,597 --> 00:02:32,070 so they will be side by side and we can 35 35 00:02:32,070 --> 00:02:34,487 also assign them some margin. 36 36 00:02:36,504 --> 00:02:39,837 So what we can do here is Footer Nav LI. 37 37 00:02:41,452 --> 00:02:45,619 And we can actually do the same thing for the social icons. 38 38 00:02:47,141 --> 00:02:51,058 Because we want them to behave in the same way. 39 39 00:02:53,654 --> 00:02:57,153 So we use our very much used property display 40 40 00:02:57,153 --> 00:03:01,320 and in line block and then we can set a nice margin 41 41 00:03:02,300 --> 00:03:05,728 to the right side of each of them 42 42 00:03:05,728 --> 00:03:08,401 in order to give them some spacing. 43 43 00:03:08,401 --> 00:03:11,484 So margin right, let's say 20 pixels. 44 44 00:03:12,916 --> 00:03:15,653 Okay, let's check this. 45 45 00:03:15,653 --> 00:03:19,250 Okay, they are already side by side, at least these ones. 46 46 00:03:19,250 --> 00:03:22,500 There must be something wrong with this here. 47 47 00:03:22,500 --> 00:03:25,750 So, let me check what's happening here. 48 48 00:03:27,391 --> 00:03:30,306 Maybe it's not the right name. 49 49 00:03:30,306 --> 00:03:34,090 Oh, alright, it's social links here. 50 50 00:03:34,090 --> 00:03:35,642 Of course it's not social icons, 51 51 00:03:35,642 --> 00:03:38,142 social links and social links. 52 52 00:03:41,739 --> 00:03:44,989 And now these are side by side as well. 53 53 00:03:46,407 --> 00:03:51,091 Now there's only one tiny problem left with these 54 54 00:03:51,091 --> 00:03:53,754 LI elements and let me show you what I'm talking about 55 55 00:03:53,754 --> 00:03:57,267 and for that I will use inspect element. 56 56 00:03:57,267 --> 00:04:00,684 So you will see again how useful this is. 57 57 00:04:02,077 --> 00:04:03,591 So where do we have our footer? 58 58 00:04:03,591 --> 00:04:07,758 Okay, it's right here and so with the blue highlighting 59 59 00:04:09,143 --> 00:04:13,310 you see the row class and so you can see that 60 60 00:04:14,331 --> 00:04:18,451 here we have some space between the last icon 61 61 00:04:18,451 --> 00:04:21,270 and the end of the row, right? 62 62 00:04:21,270 --> 00:04:26,180 So the icon is not all the way to the right side of the row. 63 63 00:04:26,180 --> 00:04:28,767 And that's because of the margin right we defined 64 64 00:04:28,767 --> 00:04:31,803 of 20 pixels so what we need to do 65 65 00:04:31,803 --> 00:04:35,636 is to get rid of that for the last LI element. 66 66 00:04:37,449 --> 00:04:38,866 So let's do that. 67 67 00:04:40,742 --> 00:04:43,907 And as you know the connection between brackets 68 68 00:04:43,907 --> 00:04:45,907 and the browser was lost 69 69 00:04:47,099 --> 00:04:50,249 because we that. 70 70 00:04:50,249 --> 00:04:51,730 So let's go back here. 71 71 00:04:51,730 --> 00:04:55,166 And now what we do is, of course, 72 72 00:04:55,166 --> 00:04:58,441 such as we did it before 73 73 00:04:58,441 --> 00:05:02,608 we use the last child pseudo class. 74 74 00:05:04,953 --> 00:05:08,508 So last child 75 75 00:05:08,508 --> 00:05:11,508 and last child. 76 76 00:05:13,635 --> 00:05:16,635 And then we say we want margin zero. 77 77 00:05:17,546 --> 00:05:19,495 We can say we want margin right but 78 78 00:05:19,495 --> 00:05:21,912 it's actually the same thing. 79 79 00:05:23,495 --> 00:05:25,967 So you see that now this is better 80 80 00:05:25,967 --> 00:05:28,478 now we'll inspect it again, actually. 81 81 00:05:28,478 --> 00:05:31,478 So to prove to you that this worked, 82 82 00:05:32,434 --> 00:05:35,017 Okay, right this is better now. 83 83 00:05:38,581 --> 00:05:42,748 So then, let's now format this text here, these links. 84 84 00:05:47,165 --> 00:05:51,332 And you see we have to get rid of this text in the html. 85 85 00:05:54,162 --> 00:05:55,912 It's down here still. 86 86 00:05:59,036 --> 00:06:03,203 Okay so these are links and so I hope 87 87 00:06:04,477 --> 00:06:08,368 that you can do this on your own by now. 88 88 00:06:08,368 --> 00:06:12,535 So Footer Nav LI 89 89 00:06:13,390 --> 00:06:16,421 and then the links inside of it. 90 90 00:06:16,421 --> 00:06:20,588 And I will use the links state. 91 91 00:06:22,557 --> 00:06:26,724 And then Footer Nav LI A visited. 92 92 00:06:30,275 --> 00:06:34,025 And we want this to happen as well 93 93 00:06:35,533 --> 00:06:39,366 for the social links. 94 94 00:06:49,668 --> 00:06:53,835 We want of course now text decoration so now underlining. 95 95 00:06:57,436 --> 00:07:01,534 And we also want no border because, if you remember, 96 96 00:07:01,534 --> 00:07:05,261 we defined that those links should have a border. 97 97 00:07:05,261 --> 00:07:09,428 We defined it all the way up here. 98 98 00:07:11,034 --> 00:07:14,367 So all the usual links have this border. 99 99 00:07:16,568 --> 00:07:18,818 So we just get rid of this. 100 100 00:07:22,152 --> 00:07:26,565 And as I said, I also want a nice text color for them 101 101 00:07:26,565 --> 00:07:29,640 because that orange really doesn't look great. 102 102 00:07:29,640 --> 00:07:34,577 So I will start with white and then use the color picker 103 103 00:07:34,577 --> 00:07:39,125 to go with something else. 104 104 00:07:39,125 --> 00:07:43,292 So we want something a little bit dark. 105 105 00:07:44,569 --> 00:07:47,460 Okay, this color looks good. 106 106 00:07:47,460 --> 00:07:49,517 I really like those colors where 107 107 00:07:49,517 --> 00:07:52,719 we only need those three digits. 108 108 00:07:52,719 --> 00:07:56,851 And up here it's, of course, visited 109 109 00:07:56,851 --> 00:08:01,347 and not vistad or whatever that is. 110 110 00:08:01,347 --> 00:08:05,014 I think now we should be good to check this. 111 111 00:08:07,853 --> 00:08:10,475 It looks a little dark, but it's on purpose 112 112 00:08:10,475 --> 00:08:12,491 because I will then, with the 113 113 00:08:12,491 --> 00:08:16,561 hover effect make the color look lighter 114 114 00:08:16,561 --> 00:08:20,620 because we don't want to stand this out to much. 115 115 00:08:20,620 --> 00:08:24,217 And so this is good and we will now add 116 116 00:08:24,217 --> 00:08:28,384 some hover effect to these links here. 117 117 00:08:29,262 --> 00:08:30,679 So let's do that. 118 118 00:08:32,380 --> 00:08:36,547 So Footer Nav L A I and hover. 119 119 00:08:45,864 --> 00:08:47,781 And, of course, active. 120 120 00:08:49,006 --> 00:08:52,173 So if we want to change this to color, 121 121 00:08:53,393 --> 00:08:56,643 not too white, but something like that. 122 122 00:08:58,237 --> 00:08:59,987 Let's say, this one. 123 123 00:09:01,022 --> 00:09:05,022 And we want of course to have a transition there 124 124 00:09:05,922 --> 00:09:10,089 for the color property of zero point two seconds interval. 125 125 00:09:16,956 --> 00:09:19,392 Now, of course, we also need some 126 126 00:09:19,392 --> 00:09:22,309 padding here in this footer, right? 127 127 00:09:23,847 --> 00:09:28,014 And also we want to format this text here, this paragraph. 128 128 00:09:30,804 --> 00:09:33,784 So let's do these two things and then we 129 129 00:09:33,784 --> 00:09:36,617 will worry about these icons here. 130 130 00:09:39,496 --> 00:09:42,697 So we want a heading for this footer. 131 131 00:09:42,697 --> 00:09:46,408 Not quite as big as we had with the other sections 132 132 00:09:46,408 --> 00:09:49,666 so let's say 60 pixels, for instance, 133 133 00:09:49,666 --> 00:09:53,251 and we will then see if it looks great. 134 134 00:09:53,251 --> 00:09:55,739 And now let's just format the 135 135 00:09:55,739 --> 00:09:58,239 paragraph inside of the footer 136 136 00:09:59,288 --> 00:10:03,455 to have the same color as the links 137 137 00:10:04,367 --> 00:10:07,851 which is 8888. 138 138 00:10:07,851 --> 00:10:12,018 And we can also center the text. The text align, centerer. 139 139 00:10:15,932 --> 00:10:20,168 And we can maybe even decrease the font size a little bit 140 140 00:10:20,168 --> 00:10:22,292 because it's not necessary that it's 141 141 00:10:22,292 --> 00:10:25,542 as big as the main text on the website. 142 142 00:10:33,968 --> 00:10:38,135 Yeah, probably 60 pixels was still a little too much. 143 143 00:10:39,130 --> 00:10:43,804 We will decrease this to 50 pixels or 40 144 144 00:10:43,804 --> 00:10:48,331 and also some distance between this paragraph 145 145 00:10:48,331 --> 00:10:50,213 and these navigations so the best 146 146 00:10:50,213 --> 00:10:52,717 way of doing that is to add a margin 147 147 00:10:52,717 --> 00:10:55,483 to the top of the paragraph. 148 148 00:10:55,483 --> 00:10:59,007 So margin top, 30 pixels, let's say 149 149 00:10:59,007 --> 00:11:02,674 and here we change that to 50. 150 150 00:11:06,103 --> 00:11:09,729 So, of course, this looks a little empty here right now 151 151 00:11:09,729 --> 00:11:13,787 because you could actually add some more text here 152 152 00:11:13,787 --> 00:11:16,301 or, I don't know, something else. 153 153 00:11:16,301 --> 00:11:19,884 In this case we will not worry about this 154 154 00:11:19,884 --> 00:11:24,410 because it's just a photo to show you what we can do 155 155 00:11:24,410 --> 00:11:27,410 and how all of this works. 156 156 00:11:28,264 --> 00:11:30,575 So now let's worry about these icons 157 157 00:11:30,575 --> 00:11:33,994 and what I want to do here is to, of course, 158 158 00:11:33,994 --> 00:11:35,921 make those a little bit bigger but then 159 159 00:11:35,921 --> 00:11:38,046 the hover effect, we will do something cool 160 160 00:11:38,046 --> 00:11:41,457 which is, in each of these icons, we will 161 161 00:11:41,457 --> 00:11:45,894 change the color of the icon to the color 162 162 00:11:45,894 --> 00:11:48,900 of the corresponding social network 163 163 00:11:48,900 --> 00:11:52,851 and I have a great site where we can see all of these colors 164 164 00:11:52,851 --> 00:11:55,418 so with Facebook we will change to this color. 165 165 00:11:55,418 --> 00:11:58,402 The Twitter button we will change to this color. 166 166 00:11:58,402 --> 00:12:01,892 The Google Plus and the Instagram so we have 167 167 00:12:01,892 --> 00:12:06,059 those colors here and then we will just have to copy them. 168 168 00:12:08,069 --> 00:12:10,652 So let's do that. 169 169 00:12:12,317 --> 00:12:13,650 Back in the CSS, 170 170 00:12:16,708 --> 00:12:20,208 actually put this right here. 171 171 00:12:22,070 --> 00:12:26,237 So, do social links LI, 172 172 00:12:28,959 --> 00:12:31,408 write link 173 173 00:12:31,408 --> 00:12:36,393 and social links 174 174 00:12:36,393 --> 00:12:39,226 the visited state, 175 175 00:12:40,382 --> 00:12:42,809 let's make them a little bit bigger 176 176 00:12:42,809 --> 00:12:46,976 font size, say 180 percent 177 177 00:12:48,644 --> 00:12:52,811 and we will then target each of the specific icons. 178 178 00:12:55,718 --> 00:12:59,612 We will use these classes here so it's just 179 179 00:12:59,612 --> 00:13:03,779 ion social and then the name of each of the social networks. 180 180 00:13:06,753 --> 00:13:08,961 We will then, the best way of doing this is 181 181 00:13:08,961 --> 00:13:12,628 to, actually put the hover effect right 182 182 00:13:13,655 --> 00:13:15,738 on each of these classes. 183 183 00:13:21,643 --> 00:13:22,643 So let's see 184 184 00:13:25,833 --> 00:13:28,867 which color value we're going to use. 185 185 00:13:28,867 --> 00:13:33,034 So this is for Facebook. 186 186 00:13:33,948 --> 00:13:36,115 And that should work. 187 187 00:13:37,481 --> 00:13:39,148 I'll just copy this. 188 188 00:13:43,153 --> 00:13:44,070 So Twitter, 189 189 00:13:47,716 --> 00:13:48,716 Google plus, 190 190 00:13:50,676 --> 00:13:53,676 and Instagram. 191 191 00:13:58,797 --> 00:14:00,714 So this is for Twitter. 192 192 00:14:05,899 --> 00:14:07,899 For Google Plus. 193 193 00:14:11,544 --> 00:14:15,461 And then, the last one is for Instagram. 194 194 00:14:21,228 --> 00:14:23,311 And let's check this out. 195 195 00:14:27,049 --> 00:14:29,036 Whoa, these are way too big, of course, 196 196 00:14:29,036 --> 00:14:33,203 but the color effect works actually and this is pretty great 197 197 00:14:34,888 --> 00:14:37,084 and this looks really cool, right? 198 198 00:14:37,084 --> 00:14:39,417 Now what we have to do is to 199 199 00:14:40,740 --> 00:14:42,740 also add that transition 200 200 00:14:43,668 --> 00:14:47,835 that we want and we're going to do that back here. 201 201 00:14:54,903 --> 00:14:57,903 So we have to do it this way. 202 202 00:15:05,312 --> 00:15:09,395 So Twitter, Google Plus, and Instagram. 203 203 00:15:13,330 --> 00:15:17,504 And then we just say that we want a transition 204 204 00:15:17,504 --> 00:15:21,671 for the color of zero point two seconds. 205 205 00:15:26,610 --> 00:15:28,360 Let's check this out. 206 206 00:15:29,565 --> 00:15:31,389 And here we go. 207 207 00:15:31,389 --> 00:15:33,389 Here we have our effect. 208 208 00:15:34,456 --> 00:15:38,368 So actually I think that the entire text here is a little 209 209 00:15:38,368 --> 00:15:42,499 too big so I'll just reduce all of the text 210 210 00:15:42,499 --> 00:15:46,511 because, as I said, I don't want to make all of this 211 211 00:15:46,511 --> 00:15:48,636 stand out too much and all of these links 212 212 00:15:48,636 --> 00:15:52,803 are a little too big now, this doesn't look natural I think. 213 213 00:15:55,674 --> 00:15:59,222 So I will reduce the text for all elements 214 214 00:15:59,222 --> 00:16:02,846 in the footer element so I can say that 215 215 00:16:02,846 --> 00:16:07,556 I want font size to be 80 percent here, for instance, 216 216 00:16:07,556 --> 00:16:11,723 and then everything will get effected inside of this element 217 217 00:16:13,011 --> 00:16:15,594 and just delete this from here. 218 218 00:16:18,141 --> 00:16:22,308 And maybe here we can change it to 170. 219 219 00:16:24,733 --> 00:16:28,900 And so, let's see. 220 220 00:16:31,671 --> 00:16:35,497 These are still a little bit too big 221 221 00:16:35,497 --> 00:16:39,253 but the rest looks good actually the padding here 222 222 00:16:39,253 --> 00:16:43,336 or the margin here is too big as well 223 223 00:16:44,181 --> 00:16:47,848 so let's change that and let's also 224 224 00:16:49,197 --> 00:16:53,186 make these icons a little bit smaller. 225 225 00:16:53,186 --> 00:16:57,353 So maybe 20 pixels is enough here and then 160. 226 226 00:16:58,938 --> 00:17:02,271 And now we're almost at the end of this. 227 227 00:17:04,822 --> 00:17:08,055 So, yeah, I think this was our last change 228 228 00:17:08,055 --> 00:17:10,472 because this looks great now. 229 229 00:17:11,320 --> 00:17:15,487 So let's revisit our whole web page to see what we got here. 230 230 00:17:17,214 --> 00:17:21,498 So this is very cool, we designed all those section 231 231 00:17:21,498 --> 00:17:24,520 and I think you can really be proud of yourself 232 232 00:17:24,520 --> 00:17:26,182 for what you achieved with this. 233 233 00:17:26,182 --> 00:17:27,765 Don't you think so? 234 234 00:17:31,721 --> 00:17:35,221 So we built all of this with our own hands 235 235 00:17:36,988 --> 00:17:39,891 and I think this is really powerful. 236 236 00:17:39,891 --> 00:17:42,141 This is really great stuff. 237 237 00:17:43,501 --> 00:17:45,867 In the next lecture, we will start 238 238 00:17:45,867 --> 00:17:49,274 to make this website be responsive. 239 239 00:17:49,274 --> 00:17:53,441 Because as you see now when we reduce this 240 240 00:17:55,565 --> 00:17:59,232 it starts looking a little bit weird, right? 241 241 00:18:00,772 --> 00:18:02,534 So that is what we are going to 242 242 00:18:02,534 --> 00:18:05,367 be working on in the next lecture. 243 243 00:18:06,220 --> 00:18:09,708 So you can take a break and revisit everything 244 244 00:18:09,708 --> 00:18:11,870 we've done here or you can come with me 245 245 00:18:11,870 --> 00:18:13,537 to the next lecture. 20937