Voiceover: Welcome back to building the footer.
Let's write some more CSS to format our footer.
So, here we are again as I said before we want
to, of course, have these links side by side.
And we want to get rid of these bullet points
and we want to format the whole thing.
And we also want a very dark background
for this footer in order to make it, kind of, stand out.
So let's go to our CSS.
And the thing's we're going to
do are, actually, quite easy to do.
It's just to repeat some things we already did before.
So to start,
let's make a darker background color here.
Of course, not black, but we want it kind of deep.
And I like to use this color, actually.
Let's just check this.
Okay, this makes a great contrast between this
white and this gray and now I will make the text, like
white or a very light gray.
But first, let's format those navigations.
So we have Footer Nav.
And we want it to have no bullet points as always.
And we want this one to float on
the left side, inside of its container.
And then we have to social icons.
And we also want no bullet points.
And this one we want to float all the way to the right side.
On the list elements inside of these navigations
of these unordered lists, we want to have them
side by side and so one thing that we
can do is to display them as in line blocks.
And this way they will not cause a line break
so they will be side by side and we can
also assign them some margin.
So what we can do here is Footer Nav LI.
And we can actually do the same thing for the social icons.
Because we want them to behave in the same way.
So we use our very much used property display
and in line block and then we can set a nice margin
to the right side of each of them
in order to give them some spacing.
So margin right, let's say 20 pixels.
Okay, let's check this.
Okay, they are already side by side, at least these ones.
There must be something wrong with this here.
So, let me check what's happening here.
Maybe it's not the right name.
Oh, alright, it's social links here.
Of course it's not social icons,
social links and social links.
And now these are side by side as well.
Now there's only one tiny problem left with these
LI elements and let me show you what I'm talking about
and for that I will use inspect element.
So you will see again how useful this is.
So where do we have our footer?
Okay, it's right here and so with the blue highlighting
you see the row class and so you can see that
here we have some space between the last icon
and the end of the row, right?
So the icon is not all the way to the right side of the row.
And that's because of the margin right we defined
of 20 pixels so what we need to do
is to get rid of that for the last LI element.
So let's do that.
And as you know the connection between brackets
and the browser was lost
because we that.
So let's go back here.
And now what we do is, of course,
such as we did it before
we use the last child pseudo class.
So last child
and last child.
And then we say we want margin zero.
We can say we want margin right but
it's actually the same thing.
So you see that now this is better
now we'll inspect it again, actually.
So to prove to you that this worked,
Okay, right this is better now.
So then, let's now format this text here, these links.
And you see we have to get rid of this text in the html.
It's down here still.
Okay so these are links and so I hope
that you can do this on your own by now.
So Footer Nav LI
and then the links inside of it.
And I will use the links state.
And then Footer Nav LI A visited.
And we want this to happen as well
for the social links.
We want of course now text decoration so now underlining.
And we also want no border because, if you remember,
we defined that those links should have a border.
We defined it all the way up here.
So all the usual links have this border.
So we just get rid of this.
And as I said, I also want a nice text color for them
because that orange really doesn't look great.
So I will start with white and then use the color picker
to go with something else.
So we want something a little bit dark.
Okay, this color looks good.
I really like those colors where
we only need those three digits.
And up here it's, of course, visited
and not vistad or whatever that is.
I think now we should be good to check this.
It looks a little dark, but it's on purpose
because I will then, with the
hover effect make the color look lighter
because we don't want to stand this out to much.
And so this is good and we will now add
some hover effect to these links here.
So let's do that.
So Footer Nav L A I and hover.
And, of course, active.
So if we want to change this to color,
not too white, but something like that.
Let's say, this one.
And we want of course to have a transition there
for the color property of zero point two seconds interval.
Now, of course, we also need some
padding here in this footer, right?
And also we want to format this text here, this paragraph.
So let's do these two things and then we
will worry about these icons here.
So we want a heading for this footer.
Not quite as big as we had with the other sections
so let's say 60 pixels, for instance,
and we will then see if it looks great.
And now let's just format the
paragraph inside of the footer
to have the same color as the links
which is 8888.
And we can also center the text. The text align, centerer.
And we can maybe even decrease the font size a little bit
because it's not necessary that it's
as big as the main text on the website.
Yeah, probably 60 pixels was still a little too much.
We will decrease this to 50 pixels or 40
and also some distance between this paragraph
and these navigations so the best
way of doing that is to add a margin
to the top of the paragraph.
So margin top, 30 pixels, let's say
and here we change that to 50.
So, of course, this looks a little empty here right now
because you could actually add some more text here
or, I don't know, something else.
In this case we will not worry about this
because it's just a photo to show you what we can do
and how all of this works.
So now let's worry about these icons
and what I want to do here is to, of course,
make those a little bit bigger but then
the hover effect, we will do something cool
which is, in each of these icons, we will
change the color of the icon to the color
of the corresponding social network
and I have a great site where we can see all of these colors
so with Facebook we will change to this color.
The Twitter button we will change to this color.
The Google Plus and the Instagram so we have
those colors here and then we will just have to copy them.
So let's do that.
Back in the CSS,
actually put this right here.
So, do social links LI,
write link
and social links
the visited state,
let's make them a little bit bigger
font size, say 180 percent
and we will then target each of the specific icons.
We will use these classes here so it's just
ion social and then the name of each of the social networks.
We will then, the best way of doing this is
to, actually put the hover effect right
on each of these classes.
So let's see
which color value we're going to use.
So this is for Facebook.
And that should work.
I'll just copy this.
So Twitter,
Google plus,
and Instagram.
So this is for Twitter.
For Google Plus.
And then, the last one is for Instagram.
And let's check this out.
Whoa, these are way too big, of course,
but the color effect works actually and this is pretty great
and this looks really cool, right?
Now what we have to do is to
also add that transition
that we want and we're going to do that back here.
So we have to do it this way.
So Twitter, Google Plus, and Instagram.
And then we just say that we want a transition
for the color of zero point two seconds.
Let's check this out.
And here we go.
Here we have our effect.
So actually I think that the entire text here is a little
too big so I'll just reduce all of the text
because, as I said, I don't want to make all of this
stand out too much and all of these links
are a little too big now, this doesn't look natural I think.
So I will reduce the text for all elements
in the footer element so I can say that
I want font size to be 80 percent here, for instance,
and then everything will get effected inside of this element
and just delete this from here.
And maybe here we can change it to 170.
And so, let's see.
These are still a little bit too big
but the rest looks good actually the padding here
or the margin here is too big as well
so let's change that and let's also
make these icons a little bit smaller.
So maybe 20 pixels is enough here and then 160.
And now we're almost at the end of this.
So, yeah, I think this was our last change
because this looks great now.
So let's revisit our whole web page to see what we got here.
So this is very cool, we designed all those section
and I think you can really be proud of yourself
for what you achieved with this.
Don't you think so?
So we built all of this with our own hands
and I think this is really powerful.
This is really great stuff.
In the next lecture, we will start
to make this website be responsive.
Because as you see now when we reduce this
it starts looking a little bit weird, right?
So that is what we are going to
be working on in the next lecture.
So you can take a break and revisit everything
we've done here or you can come with me
to the next lecture.