Instructor: All right.
So let's now style all the content that we have
in our footer.
And I'm gonna start with these headings here
and then also with these entire navigation blocks.
So that's footer heading.
And, of course, let's make it a bit bigger and also bolder,
but maybe not too bold, so just 500,
and then some margin to the bottom.
Let's say 32 pixels here for now.
And then, let's also style the navigations here.
So footer-nav.
So, of course, getting rid of those bullet points first
and, yeah, then let's first actually style
the links themselves.
So we didn't give them any class name,
but let's do that here.
So I will select or I will add multiple cursors here,
again, using that trick of hitting Alt or Option
at the same time as clicking,
and then we can simply say class, footer link, right?
But, of course, you can also just write it in one of them
and then copy this class to all the other links.
So footer, link at link,
and also as visited
And as always, getting rid of the text decoration first,
making it also a little bit bigger,
so maybe one step smaller than the heading, so 1.6.
Let's also make it really,
well, not really light, but quite light.
And I'm not sure what colors we have been using here,
I will just write this one here,
this gray color temporarily,
and then let's see what we have in our general color file.
So here, we have this 6f6f gray,
but that's a bit too dark, maybe yet.
So I noticed that here in the visited section,
I think we used 777,
or actually here, yeah, in the featured in section.
Oh, and actually I just remember that we used 888 there
which was probably not really accessible,
so let's just copy that here
just so we know that also,
and I'm just gonna test if that works,
so if that is accessible,
so 888888.
And not really.
So let's try 777 maybe.
And that's also not a good, but almost at 4.5.
So let's make it a bit lighter.
Oh, so 767676 is enough,
and so let's use that one.
So putting that right here,
basically from darkest to brightest.
So this is the lightest grade allowed on white,
so like this.
So let's copy that and let's use that one here,
because, these links,
they should not really have a big impact,
so they should be as light as possible
which, as you will see now, is still not really light.
So, you see, that is perfectly visible
but it is still a tad lighter than the rest of the content,
and that will be especially visible
once we actually style this one here.
And even now, you see that this here
is the normal 555 color.
And so this creates now a visual hierarchy
just as we want it, right?
So here, we don't want to draw a lot of attention,
and so, therefore, we didn't use the 333 color on those one.
And so, if we just left this one here at 555 as well,
then we wouldn't have any visual hierarchy
in terms of colors.
But anyway, let's go back
and let's style the hover and active states.
And so here, I will now make them darker,
going back to normal.
Let's also add our usual transition of all, let's say,
and then 0.3 seconds,
which is, I think is, what we have used all the time here.
Now finally, let's also take care of the spacing
between the links.
And so, once again, there are two possibilities here.
And the first one would be to add some margin bottom
to these links here,
or maybe even to these list items here,
and then on the last one,
we would take away that space and set it back to zero.
So that's the first option.
And the second option is to do what we also did before,
which is to make this footer nav here a flex container
and change the flex direction to column,
and so then, we can apply the gap property
which makes this a lot easier.
So display, flex.
And so just to show you once again that, like this,
all the elements would try to appear side by side,
and then we change it back to a column.
And so now, we can add a nice gap, for example, of 2.4 rem.
So let's see.
And that looks really nice.
The animation also works.
And here, we could maybe even use some more spacing,
so after these headings, let's set that to four rem even.
So here, we can use a lot of spacing
that looks quite nice and professional
in a footer like this.
Okay, next up, let's move here to this first column.
And so, I'm gonna start by styling this navigation here.
So the first thing that we can do
is to actually also add this footer link class
because these are, in fact, also just links, right?
So these three,
and so that should then already change
some of the things there.
Yeah, so they got bigger and the color has changed,
and even the color animation,
so that transition is already there.
But, of course, we want them to be a little bit bigger
and also side by side.
So let's grab the social links class
and let's put that first
just as it appears also in the HTML,
so actually right here.
So, of course, no list style,
and, to make them side by side,
as you could have guessed, we use flexbox,
and then let's add a gap of, again, 2.4 rem.
Okay, and now I think we just need to make them
a little bit bigger
and also add some space here, of course, after this logo.
So that's actually this link here,
so this footer logo.
So that's here.
And, first of all, if we want to add some vertical spacing,
we need to make this a block level element
because a link, remember, is just an inline element
but it needs to be block
if we want to use the complete box model on it.
And so the box model includes, of course,
the margin property.
So let's say, 3.2 rem here.
And now, just to make these bigger, let's select them,
giving them a new class name,
social-icon.
And here, we could also have used the descendant selector
basically selecting the ion icon element inside
of the full link,
so that would've worked just the same,
but, well, there are always many different ways
of achieving the exact same thing.
So here, let's go with the standard size
of many icons of 24 pixels,
so height and width of 2.4 rem.
Nice. That looks very beautiful, very nice.
And so next, let's take care of this copyright text.
And this one, let's make it even smaller than the links.
So the headings were 1.8, the links 1.6,
let's go one step down here, 1.4 rem,
and also the color here should be quite light again.
So I'm consistently gonna use that lightest gray color here,
so this one,
so just the one that we used also here for the links,
just to keep the colors consistent here in the footer.
Let's also add some line height,
1.6 maybe,
and so, let's check that out.
Okay, so we have this content here now in three lines
and that's a bit too much, it should just be two lines,
but let's fix that in a minute.
For now, I also want to change the spacing here.
Now, how could we do that spacing?
Of course, there are, as always, many different ways.
So we could manually try to add the right spacing here
to the top of the copyright or to the bottom of this icons,
so trying to maybe align this line here
with the rest of this footer,
so making it appear like down here.
So if we inspect this footer here really quick,
yeah, so basically trying, can even turn this on.
So basically, trying to push this content here
all the way to the bottom, right?
So basically, what we could and should try here
is to maybe push this element here
all the way to the bottom.
So how are we going to do that?
Well, we're gonna use again that trick
that we used before in the app layout,
so that's way back in the last section
where we created one element
that was basically pushed all the way to the right side
in that example.
And for that, we used flexbox together with margin auto.
Remember that?
So if not, that's not a problem,
because now we will do it again.
So first of all, let's then make this logo-col here
a flex container.
So logo-col, actually, we haven't selected that yet.
So display, flex.
And then, of course, we also need
to change the flex direction to column.
So for now, of course,
everything still looks exactly the same, right?
So here, you have the flex container
with the three elements.
But now, if we add a margin top of auto
to this paragraph here,
it will be all the way to the bottom.
So it will be pushed right here
because it will create automatically
the right margin to the top.
So let me show that to you.
So here in the copyright, we can now say margin top of auto.
And so, there it is.
So let's see.
And so, you see that the margin here is exactly 45 pixels.
And so, that is just what is necessary
to basically push this here all the way to the corner,
so all the way to the end of the element.
And if this element here,
so the entire footer, if it was higher,
then, of course, the margin here would not be 45
but it would automatically be figured out
to make this content appear at the bottom.
Okay, so this is really an amazing flexbox trick
that many people actually don't know,
and it works both horizontally and vertically.
So we used it horizontally in that app layout,
and so, you can go back there and see how it worked there.
and here we did it, now, of course, vertically,
Okay.
But anyway, let's not work here on that second column,
so on that address.
And so here, we actually have some more links.
And so, we can again use that class that we already created
so that all the links that we have in the footer
look the same,
so that's important for consistency.
So if we check that out now,
then, well, that didn't actually change.
Oh, and, of course,
that's just because I copied the wrong thing,
so I was distracted, apparently.
So, of course, I don't want social icon
but I want footer link.
And so now, that starts to look good already.
Now, all of this here is currently italic
because that is simply the default formatting
of the address element.
And so we need to, first of all, fix that.
So that's here, this contact element,
so let's add that right here after the,
yeah, right here maybe.
And so, we need to set the font style back to normal.
And then, let's also set the font size to 1.6,
just like the links,
and give it a line height also of 1.6.
So that should look good already.
And now, all we need to do is to add some spacing here
to the bottom of this first paragraph.
Okay, so that's this one here, let's call it the address,
or we could also have simply selected
the first paragraph child of contacts,
but, well, that's not a big difference.
Or also, we could have added a helper class.
So, once again, many different ways
of solving the same thing.
Now, okay. Nice.
However, what we notice here
is that we have some content overload,
basically, here on these first two columns.
So this content here has been wrapped into three lines
and the same here,
and it would be a lot nicer if we just had this in two lines
and so then the content would look a lot less dense here.
At the same time,
here we actually have a lot of empty space,
so here between this column and this one.
And so these columns, they are actually a bit too big
for this content here,
and they are a bit too small
for these two columns right here.
Now, of course, we could leave it like this
it would not be a problem,
but let's make this a bit nicer and fix this problem.
So these equally-sized columns have served us well
up until this point,
but now, let's actually create,
basically, another grid here,
so replace our existing grid
and make it so that the first two columns are a bit bigger
than the three other ones.
So let's come up here where the grid is placed in the HTML.
So that's the grid-5-cols.
Now, I will, of course, not change this here,
so this class will be the same
because the rule is basically that
in these types of classes,
so grid two, three, four, and five cols,
so this here, that the columns are always equal sized.
So that's just basically a rule
that we create for ourselves.
But here, again, what we want is different.
So let's create, basically, a grid just for the footer.
Let's call it grid-footer,
with two O's.
So grid-template-columns,
and so now, we need to experiment around a little bit here.
So let's start by making them double maybe,
so 2fr, 2fr, the first two ones,
and then the other ones, each of them 1fr.
And so now, here we replace that.
And so, let's see.
All right, now these columns here
they are a bit too small, I would say.
So here, there's now a lot of empty space created here
and so that's also not necessary.
So like this, the columns are too wide, so let's fix that.
So instead of being two, let's make them 1.5 maybe.
So basically, just a small difference.
And what this will do actually
is that these two here will be 1.5 plus 1.5,
so they will be three FRs overall,
and then the other three will also be 3fr,
and so that makes it so that these two columns here,
which are different,
are going to take half the width of this footer,
and then the other three are going to take the other half.
And so, I think that's a nice idea here.
So 3fr for the first two and 3fr for the three last columns.
And beautiful.
So like this, I think it looks really nice
and really balanced here in terms of spacing.
All right, so with this, I'm quite happy,
and all I want to do now
is to add a little bit more spacing here maybe.
So the footer should be quite a distinct part
of the webpage,
and so let's add even more spacing here on top
and on the bottom.
So let's see what we have after 96,
that's 128.
So let's go with that here, actually, for our padding.
So 12.8 rem.
Okay and very nice.
And now, I think we just need to create
a small visual distinction between these two sections here.
So we have, of course, this one here
which makes a huge impact,
but then we have to footer afterwards
and there is is not really a transition.
So that's partly because they have
the exact same background color
and maybe also because there is not enough spacing
between them.
So one thing that we can do to fix that
is to add a very small and subtle line here,
basically separating these two sections.
So like a very, very light gray line
going from one side to the other,
but even that subtle line
will then create some kind of distinction here.
So let's try to add that on the footer.
So really, on the footer,
so that it really goes from all the way to the left
to the right side,
so just like the background color.
So border-top, one pixel, solid,
and let's try something very light,
and, again, fff is the lightest,
and so, to make it a bit darker,
we can try for example, ddd,
which is, like, two letters above that.
So let's see.
And that is a bit too dark, actually.
So that's not the subtlety that I was looking for.
So let's try the intermediate one, so eee.
Now, okay, and this one, I think, looks great actually.
So that's really subtle
and still it creates some distinction here.
Now, we just need to make the spacing
between this one here and this one the same
because, like this, it looks a bit off, right?
So I'm sure you can see that as well.
So what I'm gonna do is to add this 12.8 padding of rem
to the bottom of this section right here.
So now top 9.6, then zero, then 12.8 rem,
and then zero on the other side.
And actually, we can omit this last value.
So I'm not sure if I mentioned that before,
but usually the order, as we already know, goes like this.
So top then right, then bottom, and then left, right?
However, we can also just write three values
so then it goes top,
then the one in the middle is the horizontal spacing,
and then the last one is the left value.
And so what this means
is that we can basically just omit this last value here
if it is the same, of course, as this one, right?
So let's see.
And now, because we changed that spacing,
the line is exactly between these two sections.
And so, that looks great now.
Now, since we were changing here the spacing,
I think that here
we do have a way too much spacing, actually.
So this section here, I want it to be closer
to this previous one to basically continuing the flow
of the user trying to sign up here.
So let's reduce that to half, so 4.8 rem.
All right.
And so, I think we fixed that as well.
And so now, if we come here and keep scrolling down,
then I think the flow here is a little bit better.
All right, but going back to our footer,
I think that we actually finished it.
And so with this,
we actually now finished the desktop version,
so basically the big version of our Omnifood website.
So congratulations, really, really well done,
and it's really nice to see that you're still with me here,
and that you made it all the way to the end of this project.
So this was a huge project.
So in fact, we did write like 600 lines of CSS here,
you see, and here, in this one even more,
or actually a bit less, but almost 300 as well,
so together, that's almost like 1,000 lines of CSS.
So really, great job,
and that's a huge achievement
for your very first big project.
However, of course, the project is not yet done here.
So that's because, as I mentioned
right at the beginning of the project,
the next step is to now make it responsive.
So make it adapt also to smaller screens
that are smaller than simply this.
So right now, if we scale down here our page,
then you will see that it will immediately start to break
and look really bad in many places, right?
So here, for example,
this is, of course, completely unacceptable, right?
And also here, things are really starting to break down.
And even worse if we make it even smaller, right?
Oh, actually I'm noticing here
that we didn't finish the navigation yet.
So let's quickly do that.
So I said we were already done but, in fact, we are not,
so let's see what sections we want here,
and there's not a lot to choose from.
So let's make the first one, the How it Works.
Then the Meal section should be the next navigation item,
then the Testimonials, and then the Pricing section.
And that's actually it.
So that's all that we have to do here.
So let's quickly finish that,
going back all the way to the top.
So How it Works,
Meals,
then the Testimonials,
Pricing, and then here, of course,
finally, our call to action.
Now, I'm not gonna use the same text here,
which was start eating well because that's too repetitive,
and also, the text is too long.
So here, let's try something simpler.
So just try for free, okay?
And so that looks a lot more natural now
with the real content.
And so now, in fact, we are done here.
So great job and make sure
that you really study this project,
that you understand all the codes,
and only then move on to our next section
where we will then make this project responsive.
So take a break here because you really deserve it,
and then, afterwards, let's go together to the next section.