1

00:00:01,583 --> 00:00:03,996

<v Voiceover>Welcome back to building the footer.</v>



2

00:00:03,996 --> 00:00:07,913

Let's write some more CSS to format our footer.



3

00:00:10,912 --> 00:00:14,956

So, here we are again as I said before we want



4

00:00:14,956 --> 00:00:19,628

to, of course, have these links side by side.



5

00:00:19,628 --> 00:00:22,645

And we want to get rid of these bullet points



6

00:00:22,645 --> 00:00:24,851

and we want to format the whole thing.



7

00:00:24,851 --> 00:00:27,999

And we also want a very dark background



8

00:00:27,999 --> 00:00:32,166

for this footer in order to make it, kind of, stand out.



9

00:00:34,978 --> 00:00:39,145

So let's go to our CSS.



10

00:00:41,830 --> 00:00:42,663

And the thing's we're going to



11

00:00:42,663 --> 00:00:45,580

do are, actually, quite easy to do.



12

00:00:47,335 --> 00:00:51,502

It's just to repeat some things we already did before.



13

00:00:55,666 --> 00:00:59,199

So to start,



14

00:00:59,199 --> 00:01:02,699

let's make a darker background color here.



15

00:01:07,706 --> 00:01:11,873

Of course, not black, but we want it kind of deep.



16

00:01:13,950 --> 00:01:17,200

And I like to use this color, actually.



17

00:01:18,305 --> 00:01:20,138

Let's just check this.



18

00:01:21,014 --> 00:01:22,973

Okay, this makes a great contrast between this



19

00:01:22,973 --> 00:01:27,140

white and this gray and now I will make the text, like



20

00:01:28,109 --> 00:01:32,276

white or a very light gray.



21

00:01:33,243 --> 00:01:36,743

But first, let's format those navigations.



22

00:01:38,789 --> 00:01:40,622

So we have Footer Nav.



23

00:01:43,245 --> 00:01:48,061

And we want it to have no bullet points as always.



24

00:01:48,061 --> 00:01:50,115

And we want this one to float on



25

00:01:50,115 --> 00:01:53,365

the left side, inside of its container.



26

00:01:54,948 --> 00:01:57,698

And then we have to social icons.



27

00:01:59,650 --> 00:02:02,483

And we also want no bullet points.



28

00:02:03,960 --> 00:02:08,127

And this one we want to float all the way to the right side.



29

00:02:12,507 --> 00:02:16,674

On the list elements inside of these navigations



30

00:02:17,643 --> 00:02:21,388

of these unordered lists, we want to have them



31

00:02:21,388 --> 00:02:24,357

side by side and so one thing that we



32

00:02:24,357 --> 00:02:27,252

can do is to display them as in line blocks.



33

00:02:27,252 --> 00:02:29,597

And this way they will not cause a line break



34

00:02:29,597 --> 00:02:32,070

so they will be side by side and we can



35

00:02:32,070 --> 00:02:34,487

also assign them some margin.



36

00:02:36,504 --> 00:02:39,837

So what we can do here is Footer Nav LI.



37

00:02:41,452 --> 00:02:45,619

And we can actually do the same thing for the social icons.



38

00:02:47,141 --> 00:02:51,058

Because we want them to behave in the same way.



39

00:02:53,654 --> 00:02:57,153

So we use our very much used property display



40

00:02:57,153 --> 00:03:01,320

and in line block and then we can set a nice margin



41

00:03:02,300 --> 00:03:05,728

to the right side of each of them



42

00:03:05,728 --> 00:03:08,401

in order to give them some spacing.



43

00:03:08,401 --> 00:03:11,484

So margin right, let's say 20 pixels.



44

00:03:12,916 --> 00:03:15,653

Okay, let's check this.



45

00:03:15,653 --> 00:03:19,250

Okay, they are already side by side, at least these ones.



46

00:03:19,250 --> 00:03:22,500

There must be something wrong with this here.



47

00:03:22,500 --> 00:03:25,750

So, let me check what's happening here.



48

00:03:27,391 --> 00:03:30,306

Maybe it's not the right name.



49

00:03:30,306 --> 00:03:34,090

Oh, alright, it's social links here.



50

00:03:34,090 --> 00:03:35,642

Of course it's not social icons,



51

00:03:35,642 --> 00:03:38,142

social links and social links.



52

00:03:41,739 --> 00:03:44,989

And now these are side by side as well.



53

00:03:46,407 --> 00:03:51,091

Now there's only one tiny problem left with these



54

00:03:51,091 --> 00:03:53,754

LI elements and let me show you what I'm talking about



55

00:03:53,754 --> 00:03:57,267

and for that I will use inspect element.



56

00:03:57,267 --> 00:04:00,684

So you will see again how useful this is.



57

00:04:02,077 --> 00:04:03,591

So where do we have our footer?



58

00:04:03,591 --> 00:04:07,758

Okay, it's right here and so with the blue highlighting



59

00:04:09,143 --> 00:04:13,310

you see the row class and so you can see that



60

00:04:14,331 --> 00:04:18,451

here we have some space between the last icon



61

00:04:18,451 --> 00:04:21,270

and the end of the row, right?



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

00:04:26,180 --> 00:04:28,767

And that's because of the margin right we defined



64

00:04:28,767 --> 00:04:31,803

of 20 pixels so what we need to do



65

00:04:31,803 --> 00:04:35,636

is to get rid of that for the last LI element.



66

00:04:37,449 --> 00:04:38,866

So let's do that.



67

00:04:40,742 --> 00:04:43,907

And as you know the connection between brackets



68

00:04:43,907 --> 00:04:45,907

and the browser was lost



69

00:04:47,099 --> 00:04:50,249

because we that.



70

00:04:50,249 --> 00:04:51,730

So let's go back here.



71

00:04:51,730 --> 00:04:55,166

And now what we do is, of course,



72

00:04:55,166 --> 00:04:58,441

such as we did it before



73

00:04:58,441 --> 00:05:02,608

we use the last child pseudo class.



74

00:05:04,953 --> 00:05:08,508

So last child



75

00:05:08,508 --> 00:05:11,508

and last child.



76

00:05:13,635 --> 00:05:16,635

And then we say we want margin zero.



77

00:05:17,546 --> 00:05:19,495

We can say we want margin right but



78

00:05:19,495 --> 00:05:21,912

it's actually the same thing.



79

00:05:23,495 --> 00:05:25,967

So you see that now this is better



80

00:05:25,967 --> 00:05:28,478

now we'll inspect it again, actually.



81

00:05:28,478 --> 00:05:31,478

So to prove to you that this worked,



82

00:05:32,434 --> 00:05:35,017

Okay, right this is better now.



83

00:05:38,581 --> 00:05:42,748

So then, let's now format this text here, these links.



84

00:05:47,165 --> 00:05:51,332

And you see we have to get rid of this text in the html.



85

00:05:54,162 --> 00:05:55,912

It's down here still.



86

00:05:59,036 --> 00:06:03,203

Okay so these are links and so I hope



87

00:06:04,477 --> 00:06:08,368

that you can do this on your own by now.



88

00:06:08,368 --> 00:06:12,535

So Footer Nav LI



89

00:06:13,390 --> 00:06:16,421

and then the links inside of it.



90

00:06:16,421 --> 00:06:20,588

And I will use the links state.



91

00:06:22,557 --> 00:06:26,724

And then Footer Nav LI A visited.



92

00:06:30,275 --> 00:06:34,025

And we want this to happen as well



93

00:06:35,533 --> 00:06:39,366

for the social links.



94

00:06:49,668 --> 00:06:53,835

We want of course now text decoration so now underlining.



95

00:06:57,436 --> 00:07:01,534

And we also want no border because, if you remember,



96

00:07:01,534 --> 00:07:05,261

we defined that those links should have a border.



97

00:07:05,261 --> 00:07:09,428

We defined it all the way up here.



98

00:07:11,034 --> 00:07:14,367

So all the usual links have this border.



99

00:07:16,568 --> 00:07:18,818

So we just get rid of this.



100

00:07:22,152 --> 00:07:26,565

And as I said, I also want a nice text color for them



101

00:07:26,565 --> 00:07:29,640

because that orange really doesn't look great.



102

00:07:29,640 --> 00:07:34,577

So I will start with white and then use the color picker



103

00:07:34,577 --> 00:07:39,125

to go with something else.



104

00:07:39,125 --> 00:07:43,292

So we want something a little bit dark.



105

00:07:44,569 --> 00:07:47,460

Okay, this color looks good.



106

00:07:47,460 --> 00:07:49,517

I really like those colors where



107

00:07:49,517 --> 00:07:52,719

we only need those three digits.



108

00:07:52,719 --> 00:07:56,851

And up here it's, of course, visited



109

00:07:56,851 --> 00:08:01,347

and not vistad or whatever that is.



110

00:08:01,347 --> 00:08:05,014

I think now we should be good to check this.



111

00:08:07,853 --> 00:08:10,475

It looks a little dark, but it's on purpose



112

00:08:10,475 --> 00:08:12,491

because I will then, with the



113

00:08:12,491 --> 00:08:16,561

hover effect make the color look lighter



114

00:08:16,561 --> 00:08:20,620

because we don't want to stand this out to much.



115

00:08:20,620 --> 00:08:24,217

And so this is good and we will now add



116

00:08:24,217 --> 00:08:28,384

some hover effect to these links here.



117

00:08:29,262 --> 00:08:30,679

So let's do that.



118

00:08:32,380 --> 00:08:36,547

So Footer Nav L A I and hover.



119

00:08:45,864 --> 00:08:47,781

And, of course, active.



120

00:08:49,006 --> 00:08:52,173

So if we want to change this to color,



121

00:08:53,393 --> 00:08:56,643

not too white, but something like that.



122

00:08:58,237 --> 00:08:59,987

Let's say, this one.



123

00:09:01,022 --> 00:09:05,022

And we want of course to have a transition there



124

00:09:05,922 --> 00:09:10,089

for the color property of zero point two seconds interval.



125

00:09:16,956 --> 00:09:19,392

Now, of course, we also need some



126

00:09:19,392 --> 00:09:22,309

padding here in this footer, right?



127

00:09:23,847 --> 00:09:28,014

And also we want to format this text here, this paragraph.



128

00:09:30,804 --> 00:09:33,784

So let's do these two things and then we



129

00:09:33,784 --> 00:09:36,617

will worry about these icons here.



130

00:09:39,496 --> 00:09:42,697

So we want a heading for this footer.



131

00:09:42,697 --> 00:09:46,408

Not quite as big as we had with the other sections



132

00:09:46,408 --> 00:09:49,666

so let's say 60 pixels, for instance,



133

00:09:49,666 --> 00:09:53,251

and we will then see if it looks great.



134

00:09:53,251 --> 00:09:55,739

And now let's just format the



135

00:09:55,739 --> 00:09:58,239

paragraph inside of the footer



136

00:09:59,288 --> 00:10:03,455

to have the same color as the links



137

00:10:04,367 --> 00:10:07,851

which is 8888.



138

00:10:07,851 --> 00:10:12,018

And we can also center the text. The text align, centerer.



139

00:10:15,932 --> 00:10:20,168

And we can maybe even decrease the font size a little bit



140

00:10:20,168 --> 00:10:22,292

because it's not necessary that it's



141

00:10:22,292 --> 00:10:25,542

as big as the main text on the website.



142

00:10:33,968 --> 00:10:38,135

Yeah, probably 60 pixels was still a little too much.



143

00:10:39,130 --> 00:10:43,804

We will decrease this to 50 pixels or 40



144

00:10:43,804 --> 00:10:48,331

and also some distance between this paragraph



145

00:10:48,331 --> 00:10:50,213

and these navigations so the best



146

00:10:50,213 --> 00:10:52,717

way of doing that is to add a margin



147

00:10:52,717 --> 00:10:55,483

to the top of the paragraph.



148

00:10:55,483 --> 00:10:59,007

So margin top, 30 pixels, let's say



149

00:10:59,007 --> 00:11:02,674

and here we change that to 50.



150

00:11:06,103 --> 00:11:09,729

So, of course, this looks a little empty here right now



151

00:11:09,729 --> 00:11:13,787

because you could actually add some more text here



152

00:11:13,787 --> 00:11:16,301

or, I don't know, something else.



153

00:11:16,301 --> 00:11:19,884

In this case we will not worry about this



154

00:11:19,884 --> 00:11:24,410

because it's just a photo to show you what we can do



155

00:11:24,410 --> 00:11:27,410

and how all of this works.



156

00:11:28,264 --> 00:11:30,575

So now let's worry about these icons



157

00:11:30,575 --> 00:11:33,994

and what I want to do here is to, of course,



158

00:11:33,994 --> 00:11:35,921

make those a little bit bigger but then



159

00:11:35,921 --> 00:11:38,046

the hover effect, we will do something cool



160

00:11:38,046 --> 00:11:41,457

which is, in each of these icons, we will



161

00:11:41,457 --> 00:11:45,894

change the color of the icon to the color



162

00:11:45,894 --> 00:11:48,900

of the corresponding social network



163

00:11:48,900 --> 00:11:52,851

and I have a great site where we can see all of these colors



164

00:11:52,851 --> 00:11:55,418

so with Facebook we will change to this color.



165

00:11:55,418 --> 00:11:58,402

The Twitter button we will change to this color.



166

00:11:58,402 --> 00:12:01,892

The Google Plus and the Instagram so we have



167

00:12:01,892 --> 00:12:06,059

those colors here and then we will just have to copy them.



168

00:12:08,069 --> 00:12:10,652

So let's do that.



169

00:12:12,317 --> 00:12:13,650

Back in the CSS,



170

00:12:16,708 --> 00:12:20,208

actually put this right here.



171

00:12:22,070 --> 00:12:26,237

So, do social links LI,



172

00:12:28,959 --> 00:12:31,408

write link



173

00:12:31,408 --> 00:12:36,393

and social links



174

00:12:36,393 --> 00:12:39,226

the visited state,



175

00:12:40,382 --> 00:12:42,809

let's make them a little bit bigger



176

00:12:42,809 --> 00:12:46,976

font size, say 180 percent



177

00:12:48,644 --> 00:12:52,811

and we will then target each of the specific icons.



178

00:12:55,718 --> 00:12:59,612

We will use these classes here so it's just



179

00:12:59,612 --> 00:13:03,779

ion social and then the name of each of the social networks.



180

00:13:06,753 --> 00:13:08,961

We will then, the best way of doing this is



181

00:13:08,961 --> 00:13:12,628

to, actually put the hover effect right



182

00:13:13,655 --> 00:13:15,738

on each of these classes.



183

00:13:21,643 --> 00:13:22,643

So let's see



184

00:13:25,833 --> 00:13:28,867

which color value we're going to use.



185

00:13:28,867 --> 00:13:33,034

So this is for Facebook.



186

00:13:33,948 --> 00:13:36,115

And that should work.



187

00:13:37,481 --> 00:13:39,148

I'll just copy this.



188

00:13:43,153 --> 00:13:44,070

So Twitter,



189

00:13:47,716 --> 00:13:48,716

Google plus,



190

00:13:50,676 --> 00:13:53,676

and Instagram.



191

00:13:58,797 --> 00:14:00,714

So this is for Twitter.



192

00:14:05,899 --> 00:14:07,899

For Google Plus.



193

00:14:11,544 --> 00:14:15,461

And then, the last one is for Instagram.



194

00:14:21,228 --> 00:14:23,311

And let's check this out.



195

00:14:27,049 --> 00:14:29,036

Whoa, these are way too big, of course,



196

00:14:29,036 --> 00:14:33,203

but the color effect works actually and this is pretty great



197

00:14:34,888 --> 00:14:37,084

and this looks really cool, right?



198

00:14:37,084 --> 00:14:39,417

Now what we have to do is to



199

00:14:40,740 --> 00:14:42,740

also add that transition



200

00:14:43,668 --> 00:14:47,835

that we want and we're going to do that back here.



201

00:14:54,903 --> 00:14:57,903

So we have to do it this way.



202

00:15:05,312 --> 00:15:09,395

So Twitter, Google Plus, and Instagram.



203

00:15:13,330 --> 00:15:17,504

And then we just say that we want a transition



204

00:15:17,504 --> 00:15:21,671

for the color of zero point two seconds.



205

00:15:26,610 --> 00:15:28,360

Let's check this out.



206

00:15:29,565 --> 00:15:31,389

And here we go.



207

00:15:31,389 --> 00:15:33,389

Here we have our effect.



208

00:15:34,456 --> 00:15:38,368

So actually I think that the entire text here is a little



209

00:15:38,368 --> 00:15:42,499

too big so I'll just reduce all of the text



210

00:15:42,499 --> 00:15:46,511

because, as I said, I don't want to make all of this



211

00:15:46,511 --> 00:15:48,636

stand out too much and all of these links



212

00:15:48,636 --> 00:15:52,803

are a little too big now, this doesn't look natural I think.



213

00:15:55,674 --> 00:15:59,222

So I will reduce the text for all elements



214

00:15:59,222 --> 00:16:02,846

in the footer element so I can say that



215

00:16:02,846 --> 00:16:07,556

I want font size to be 80 percent here, for instance,



216

00:16:07,556 --> 00:16:11,723

and then everything will get effected inside of this element



217

00:16:13,011 --> 00:16:15,594

and just delete this from here.



218

00:16:18,141 --> 00:16:22,308

And maybe here we can change it to 170.



219

00:16:24,733 --> 00:16:28,900

And so, let's see.



220

00:16:31,671 --> 00:16:35,497

These are still a little bit too big



221

00:16:35,497 --> 00:16:39,253

but the rest looks good actually the padding here



222

00:16:39,253 --> 00:16:43,336

or the margin here is too big as well



223

00:16:44,181 --> 00:16:47,848

so let's change that and let's also



224

00:16:49,197 --> 00:16:53,186

make these icons a little bit smaller.



225

00:16:53,186 --> 00:16:57,353

So maybe 20 pixels is enough here and then 160.



226

00:16:58,938 --> 00:17:02,271

And now we're almost at the end of this.



227

00:17:04,822 --> 00:17:08,055

So, yeah, I think this was our last change



228

00:17:08,055 --> 00:17:10,472

because this looks great now.



229

00:17:11,320 --> 00:17:15,487

So let's revisit our whole web page to see what we got here.



230

00:17:17,214 --> 00:17:21,498

So this is very cool, we designed all those section



231

00:17:21,498 --> 00:17:24,520

and I think you can really be proud of yourself



232

00:17:24,520 --> 00:17:26,182

for what you achieved with this.



233

00:17:26,182 --> 00:17:27,765

Don't you think so?



234

00:17:31,721 --> 00:17:35,221

So we built all of this with our own hands



235

00:17:36,988 --> 00:17:39,891

and I think this is really powerful.



236

00:17:39,891 --> 00:17:42,141

This is really great stuff.



237

00:17:43,501 --> 00:17:45,867

In the next lecture, we will start



238

00:17:45,867 --> 00:17:49,274

to make this website be responsive.



239

00:17:49,274 --> 00:17:53,441

Because as you see now when we reduce this



240

00:17:55,565 --> 00:17:59,232

it starts looking a little bit weird, right?



241

00:18:00,772 --> 00:18:02,534

So that is what we are going to



242

00:18:02,534 --> 00:18:05,367

be working on in the next lecture.



243

00:18:06,220 --> 00:18:09,708

So you can take a break and revisit everything



244

00:18:09,708 --> 00:18:11,870

we've done here or you can come with me



245

00:18:11,870 --> 00:18:13,537

to the next lecture.