Instructor: Welcome to the very last section
of the Omnifood website.
And in this one,
we're gonna build a really professional looking footer
like this one.
So we're gonna use this design example from the right side
to build a somewhat similar looking footer.
So in the first column, we will also have our logo,
then some social links and a copyright notice.
Then in the second column,
we're gonna have some contact information
of the Omnifood Company.
And then in the remaining three columns,
there will be some additional links.
So a bit again, like here
in this design example on the right side.
Okay, so five columns
and a really professional looking footer.
And so let's get to work and build this.
Okay.
And so to mark up this footer in the HTML,
we're going to use the footer element for that.
And we will put it not inside of the main element
but actually outside of it.
So right here.
Because remember that the main area of the website
is for non-repeated content.
And for footer as well as the header,
we might repeat them exactly the same
on some other pages that are part of the overall website.
And so yeah, the main part is really only for the part
that is specific to this particular webpage.
Okay. So again, the footer and the header,
they might be repeated on other pages
in case there were some.
And so they are not the main content of the page.
So giving it the class of footer here
just like I did in the header.
And then here, we will also want some centered container.
And so for that, we use of course our container class
and let's also use a grid.
And I think right now we don't have a grid yet
with five columns.
So let's create that really fast here.
And of course that's really simple.
We just copy this
and change this to 5 and this to 5.
And so just like this,
we now created a grid which has five equally sized columns.
Okay.
So this first one here is gonna have the logo
and the copyright notice and all that.
So let's call this one here, the 'logo-col'.
So let's just write that here.
Then the second one is for the address.
So I'm calling that one, 'address-col',
and I'm not sure yet if I will even need these,
these class names, but many times, as I write the HTML,
I try to immediately name it.
So let's just take a look at our content here again.
So,
yeah, so here is that contact information.
So we will write the address,
the phone number, and the email.
So right here, into the address column that we just created.
And these social links here,
they will go into the first column.
Then finally, we have also some additional links right here.
So this huge list here.
And so let's try to separate this
into some different basically topics.
So create account, sign in and these applications.
And so I think that we can say
that these links here are all about the user's account.
So I'm gonna basically create a subsection
of the navigation called account.
Then these four here are about the Omnifood Company itself,
so basically a page describing what Omnifood is.
Then Omnifood for business and partners and careers.
And then finally, here are some resources, for example,
where the user can find a directory or some other help.
So here is where we will have now three columns,
one for each of these sub-navigations, let's say.
So let's create three more columns here
and I'm gonna call this one here a 'nav'-col'.
And actually since this will be basically a navigation,
let's use the enough element here.
And then two more.
Two and three.
So this is just so we can see something
on our page right now.
But before we go check that out, let's always
add some padding here to that section first.
So copying that once more,
then footer,
and here footer as well.
So let's see.
And there it is.
So there are our five equally sized columns.
So let's now add the actual content here very quick.
So here we want the logo,
and so let's actually get that from the header.
So I'm gonna go all the way up,
and I noticed we have together here,
written over 600 lines of HTML code,
so that's really a great job.
But anyway, here is that logo.
But before I copy this, let me actually wrap it into a link,
so into an anchor tag,
which is something that we do all the time
with logos in the header.
And so this will be so that when we click that logo,
we will go back to the top, and this is something
that we will implement a little bit later.
So for now, let's just say nothing here.
So going nowhere.
And,
yeah.
Let's just check this out here in the top now.
And you see it looks exactly the same, but it is now a link.
And so when we click this,
we go basically back to the top, right?
And so now we will want the exact same thing
also in the footer.
So later we will then implement
some smooth scrolling functionality,
which will happen once the user clicks this logo.
Alright.
Here, let's just give it a class of,
'footer-logo' let's say.
But the rest here of the image can stay the same.
So we are actually reusing this logo class here
because I think that the size of it
is also good for the footer.
So here, I think this doesn't look too big
and so we can use that exact same class
that we also used in the header.
So that is basically now reusable.
So while we could move that class to the general.CSS file,
but let's not do that right now.
So instead, what I want to do next here
is to add that paragraph,
and actually before the paragraph,
so between the logo and the paragraph
is where I will want to put these icons for social links.
So like Facebook, Instagram, Twitter, and all that.
But I'm gonna leave that for a bit later.
So,
copyright.
But then let's just write some standard copyright text here.
So copyright.
And here, let's use yet another HTML entity.
So the copy one in this case.
So as you can see, it'll create this copyright sign.
So that looks quite nice.
And then let's say 2027,
and hopefully by the time you're watching this video,
this year is not correct
but we will also fix that later actually using JavaScript.
So I will show you how we can actually
very easily keep that year up to date.
So just 'All rights reserved',
even though this doesn't mean a lot legally
but it always looks nice, I think.
Okay, so again, we're leaving the social links for later.
And now let's take care of the address here.
Alright,
so let me grab that here.
And,
so of course we will not just paste it here
and leave it like this,
but instead we need to wrap it into some elements.
But before we do that,
let's actually also add some kind of header here
to this column.
But once more for that,
we will actually not use an H element
but simply a P element like this.
So this is not really a new section,
so it doesn't deserve basically its own
actual heading element.
So that would semantically not be really correct.
So contact us.
And then below that we can wrap this entire information here
into a special HTML element called 'address'.
So this element is basically
for contact information of the page.
So it's exactly what we are looking for here.
So contacts.
And so now let's wrap each of these here into a paragraph.
Now of course, we will not literally write address here
because while this is pretty obvious
that it is an address we could use maybe some icon
but even that is not necessary.
Okay.
Now this phone here is for the next one
which we also don't need.
Okay.
So let's create one paragraph for each of them.
And now here,
let me show you something cool,
because here we can now basically
make this phone number also a link.
So let me grab that here,
and then we can create a special kind of link.
So we can write, tel, and then call on,
and then hear the phone number.
And the same for the email.
And I will then show you soon what this actually does.
So here, instead of tel,
because it's not a telephone number,
we can write 'mailto'.
So this is now the href,
and it's also the text that we want to show up on the page.
Alright.
So let's check that.
And while if we click this now,
then since we're on a browser,
nothing should happen, or let me see.
Oh, actually it's trying to FaceTime it now,
which is basically a way of making a phone call.
And if I were to click here on this email,
then it's probably going to open up my email program.
And you see that it did
and it is trying to write an email to hello@omnifood.com.
Alright, so that's exactly the href that we defined there.
Right?
So it opened the email program
because of this mail tool here,
and it opened the phone application basically
because of the 'tel'.
And so this is not really that helpful
maybe on a computer,
but on a phone,
when you tap a link that is formatted like this,
it will then very easily make a phone call to this number.
Now, you noticed that these two links here are side by side,
so let's add a line break there.
And I'm actually not sure if we have done that before.
But anyway, the way we manually add a line break is
by using the Br element,
so that stands simply for break.
And so now they will be in two different lines here.
Okay.
So that looks perfect.
And so let's move on to the next column here.
So let's grab these,
four here.
Yeah, so right here.
So let's add here another 'footer-heading'.
And this one here, remember we said was about the account
and now let's create the actual navigation.
And do you remember how we did that in the header?
So we did not simply add a bunch of links,
one after another, right?
But instead, what we did was to structure them nicely
using the unordered list.
And so let's call this one here, the footer navigation.
And then in there, of course, a bunch of list elements.
And,
let's put these here.
And of course, now inside of these
is where we will put the actual links.
So again, exactly like we did also in the main navigation
that's on top of the page.
So this one is for create account,
and then let's simply duplicate this a couple of times.
Then here is the iOS app,
and it's even easier to write it than to copy it,
and the Android app.
So let's see if that looks correct.
And it does indeed.
So now we have a nice and structured navigation list
right here.
And so let's do the same for the other two.
So in fact, I will simply copy this entire enough
and then replace these two.
Alright, let's get the next four.
So that's the first.
Then here is for business,
and finally, careers.
Now. And here we also want to change the title to company.
Alright.
Oh, actually this is what we wanted in this one.
So let's grab all of this and move it up there.
So I just cut it and paste it here.
And now let's get the last three from here.
Help center.
And of course, the privacy in terms which are very important
on basically most websites out there.
And,
I didn't cut it here,
and let's just call this section here, the resources.
Alright,
let's go back down.
And here we go.
So that looks nice, except of course for all the formatting
but the content is already here.
So all the content except
for those social icons that I mentioned before.
And so let's now add them here
between the logo and that text.
So let's do that now
and once more we can consider that a list of links.
And so once again, we will use the unordered list for that.
So,
calling it the social links.
And since they are links,
let's create again an anchor element.
And now we just need some content in this link.
So what is that content going to be?
Well, we're gonna use some icons here for
each of the social links.
So one for Instagram, I think.
Yeah, so Instagram, Facebook, and Twitter.
So let's actually get that here from ionicons
because these usually have all these social links included.
So Instagram, and there we go.
So let's click to copy.
And so that should now be there, and indeed it is.
So let's just do the same,
two more times.
So Facebook and probably the next one, we can already guess.
So here, actually, we can just replace Instagram
with Facebook and here with Twitter.
That should work.
And yeah, those are the three we were looking for.
And so with this, we finished the content part.
So the HTML is written here for or footer, but
of course it doesn't look anything like professional yet.
And so let's take care of writing the CSS
in the next and final lecture of this section.