Original subtitles

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, add 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 know 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 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 grid 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'll see that is perfectly visible,

but it is still (indistinct) 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 wanted.

Right.

So here we don't want to draw a lot of attention.

And so therefore we didn't use the 333 color

on dose 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 or 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 us 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.

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 footer-link.

So that would have 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 these 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't 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 site 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'll 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 now 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 "contacts" element.

So let's add that right here after the...

Yep, 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 2, 3, 4,

and 5 cols, so this here,

that the columns are always equal-sized.

So that's just basically our 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 to "oo's" of course, or "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 replaced that.

And so let's see.

All right, now, these columns here,

they are a bit too small, I would say.

So here, there is 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 2, 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 3fr's 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 the footer afterwards

and 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.

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 way too much spacing,

actually.

So this section here, I wanted to be closer

to this previous one to, basically,

continuing the flow off the user, trying to sign up here.

So let's reduce that to (indistinct).

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 1000 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 scaled 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 "meals" 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 code

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.