Voiceover: Welcome back to building the footer. 2 2
Let's write some more CSS to format our footer. 3 3
So, here we are again as I said before we want 4 4
to, of course, have these links side by side. 5 5
And we want to get rid of these bullet points 6 6
and we want to format the whole thing. 7 7
And we also want a very dark background 8 8
for this footer in order to make it, kind of, stand out. 9 9
So let's go to our CSS. 10 10
And the thing's we're going to 11 11
do are, actually, quite easy to do. 12 12
It's just to repeat some things we already did before. 13 13
So to start, 14 14
let's make a darker background color here. 15 15
Of course, not black, but we want it kind of deep. 16 16
And I like to use this color, actually. 17 17
Let's just check this. 18 18
Okay, this makes a great contrast between this 19 19
white and this gray and now I will make the text, like 20 20
white or a very light gray. 21 21
But first, let's format those navigations. 22 22
So we have Footer Nav. 23 23
And we want it to have no bullet points as always. 24 24
And we want this one to float on 25 25
the left side, inside of its container. 26 26
And then we have to social icons. 27 27
And we also want no bullet points. 28 28
And this one we want to float all the way to the right side. 29 29
On the list elements inside of these navigations 30 30
of these unordered lists, we want to have them 31 31
side by side and so one thing that we 32 32
can do is to display them as in line blocks. 33 33
And this way they will not cause a line break 34 34
so they will be side by side and we can 35 35
also assign them some margin. 36 36
So what we can do here is Footer Nav LI. 37 37
And we can actually do the same thing for the social icons. 38 38
Because we want them to behave in the same way. 39 39
So we use our very much used property display 40 40
and in line block and then we can set a nice margin 41 41
to the right side of each of them 42 42
in order to give them some spacing. 43 43
So margin right, let's say 20 pixels. 44 44
Okay, let's check this. 45 45
Okay, they are already side by side, at least these ones. 46 46
There must be something wrong with this here. 47 47
So, let me check what's happening here. 48 48
Maybe it's not the right name. 49 49
Oh, alright, it's social links here. 50 50
Of course it's not social icons, 51 51
social links and social links. 52 52
And now these are side by side as well. 53 53
Now there's only one tiny problem left with these 54 54
LI elements and let me show you what I'm talking about 55 55
and for that I will use inspect element. 56 56
So you will see again how useful this is. 57 57
So where do we have our footer? 58 58
Okay, it's right here and so with the blue highlighting 59 59
you see the row class and so you can see that 60 60
here we have some space between the last icon 61 61
and the end of the row, right? 62 62
So the icon is not all the way to the right side of the row. 63 63
And that's because of the margin right we defined 64 64
of 20 pixels so what we need to do 65 65
is to get rid of that for the last LI element. 66 66
So let's do that. 67 67
And as you know the connection between brackets 68 68
and the browser was lost 69 69
because we that. 70 70
So let's go back here. 71 71
And now what we do is, of course, 72 72
such as we did it before 73 73
we use the last child pseudo class. 74 74
So last child 75 75
and last child. 76 76
And then we say we want margin zero. 77 77
We can say we want margin right but 78 78
it's actually the same thing. 79 79
So you see that now this is better 80 80
now we'll inspect it again, actually. 81 81
So to prove to you that this worked, 82 82
Okay, right this is better now. 83 83
So then, let's now format this text here, these links. 84 84
And you see we have to get rid of this text in the html. 85 85
It's down here still. 86 86
Okay so these are links and so I hope 87 87
that you can do this on your own by now. 88 88
So Footer Nav LI 89 89
and then the links inside of it. 90 90
And I will use the links state. 91 91
And then Footer Nav LI A visited. 92 92
And we want this to happen as well 93 93
for the social links. 94 94
We want of course now text decoration so now underlining. 95 95
And we also want no border because, if you remember, 96 96
we defined that those links should have a border. 97 97
We defined it all the way up here. 98 98
So all the usual links have this border. 99 99
So we just get rid of this. 100 100
And as I said, I also want a nice text color for them 101 101
because that orange really doesn't look great. 102 102
So I will start with white and then use the color picker 103 103
to go with something else. 104 104
So we want something a little bit dark. 105 105
Okay, this color looks good. 106 106
I really like those colors where 107 107
we only need those three digits. 108 108
And up here it's, of course, visited 109 109
and not vistad or whatever that is. 110 110
I think now we should be good to check this. 111 111
It looks a little dark, but it's on purpose 112 112
because I will then, with the 113 113
hover effect make the color look lighter 114 114
because we don't want to stand this out to much. 115 115
And so this is good and we will now add 116 116
some hover effect to these links here. 117 117
So let's do that. 118 118
So Footer Nav L A I and hover. 119 119
And, of course, active. 120 120
So if we want to change this to color, 121 121
not too white, but something like that. 122 122
Let's say, this one. 123 123
And we want of course to have a transition there 124 124
for the color property of zero point two seconds interval. 125 125
Now, of course, we also need some 126 126
padding here in this footer, right? 127 127
And also we want to format this text here, this paragraph. 128 128
So let's do these two things and then we 129 129
will worry about these icons here. 130 130
So we want a heading for this footer. 131 131
Not quite as big as we had with the other sections 132 132
so let's say 60 pixels, for instance, 133 133
and we will then see if it looks great. 134 134
And now let's just format the 135 135
paragraph inside of the footer 136 136
to have the same color as the links 137 137
which is 8888. 138 138
And we can also center the text. The text align, centerer. 139 139
And we can maybe even decrease the font size a little bit 140 140
because it's not necessary that it's 141 141
as big as the main text on the website. 142 142
Yeah, probably 60 pixels was still a little too much. 143 143
We will decrease this to 50 pixels or 40 144 144
and also some distance between this paragraph 145 145
and these navigations so the best 146 146
way of doing that is to add a margin 147 147
to the top of the paragraph. 148 148
So margin top, 30 pixels, let's say 149 149
and here we change that to 50. 150 150
So, of course, this looks a little empty here right now 151 151
because you could actually add some more text here 152 152
or, I don't know, something else. 153 153
In this case we will not worry about this 154 154
because it's just a photo to show you what we can do 155 155
and how all of this works. 156 156
So now let's worry about these icons 157 157
and what I want to do here is to, of course, 158 158
make those a little bit bigger but then 159 159
the hover effect, we will do something cool 160 160
which is, in each of these icons, we will 161 161
change the color of the icon to the color 162 162
of the corresponding social network 163 163
and I have a great site where we can see all of these colors 164 164
so with Facebook we will change to this color. 165 165
The Twitter button we will change to this color. 166 166
The Google Plus and the Instagram so we have 167 167
those colors here and then we will just have to copy them. 168 168
So let's do that. 169 169
Back in the CSS, 170 170
actually put this right here. 171 171
So, do social links LI, 172 172
write link 173 173
and social links 174 174
the visited state, 175 175
let's make them a little bit bigger 176 176
font size, say 180 percent 177 177
and we will then target each of the specific icons. 178 178
We will use these classes here so it's just 179 179
ion social and then the name of each of the social networks. 180 180
We will then, the best way of doing this is 181 181
to, actually put the hover effect right 182 182
on each of these classes. 183 183
So let's see 184 184
which color value we're going to use. 185 185
So this is for Facebook. 186 186
And that should work. 187 187
I'll just copy this. 188 188
So Twitter, 189 189
Google plus, 190 190
and Instagram. 191 191
So this is for Twitter. 192 192
For Google Plus. 193 193
And then, the last one is for Instagram. 194 194
And let's check this out. 195 195
Whoa, these are way too big, of course, 196 196
but the color effect works actually and this is pretty great 197 197
and this looks really cool, right? 198 198
Now what we have to do is to 199 199
also add that transition 200 200
that we want and we're going to do that back here. 201 201
So we have to do it this way. 202 202
So Twitter, Google Plus, and Instagram. 203 203
And then we just say that we want a transition 204 204
for the color of zero point two seconds. 205 205
Let's check this out. 206 206
And here we go. 207 207
Here we have our effect. 208 208
So actually I think that the entire text here is a little 209 209
too big so I'll just reduce all of the text 210 210
because, as I said, I don't want to make all of this 211 211
stand out too much and all of these links 212 212
are a little too big now, this doesn't look natural I think. 213 213
So I will reduce the text for all elements 214 214
in the footer element so I can say that 215 215
I want font size to be 80 percent here, for instance, 216 216
and then everything will get effected inside of this element 217 217
and just delete this from here. 218 218
And maybe here we can change it to 170. 219 219
And so, let's see. 220 220
These are still a little bit too big 221 221
but the rest looks good actually the padding here 222 222
or the margin here is too big as well 223 223
so let's change that and let's also 224 224
make these icons a little bit smaller. 225 225
So maybe 20 pixels is enough here and then 160. 226 226
And now we're almost at the end of this. 227 227
So, yeah, I think this was our last change 228 228
because this looks great now. 229 229
So let's revisit our whole web page to see what we got here. 230 230
So this is very cool, we designed all those section 231 231
and I think you can really be proud of yourself 232 232
for what you achieved with this. 233 233
Don't you think so? 234 234
So we built all of this with our own hands 235 235
and I think this is really powerful. 236 236
This is really great stuff. 237 237
In the next lecture, we will start 238 238
to make this website be responsive. 239 239
Because as you see now when we reduce this 240 240
it starts looking a little bit weird, right? 241 241
So that is what we are going to 242 242
be working on in the next lecture. 243 243
So you can take a break and revisit everything 244 244
we've done here or you can come with me 245 245
to the next lecture.