Voiceover: Welcome to our last section 2 2
we need to build for our website, the footer. 3 3
Every website has a footer 4 4
and it's like the conclusion of your website, 5 5
where the user can find additional information 6 6
about a website or a company. 7 7
So this is most simple footer ever, 8 8
but simple is in many cases a good solution, 9 9
and this the footer has two navigations. 10 10
One for less important links, like About Us 11 11
or a link to a blog, and one for social media 12 12
on the right side. 13 13
In a more complex website, 14 14
the footer usually repeats the main navigation, 15 15
but that's not necessary in our case. 16 16
We don't need more than this. 17 17
So in this last section, 18 18
there are not many new things to learn, 19 19
but we keep practicing. 20 20
So we'll learn how to build a simple but effective footer, 21 21
and a cool way of using social icons on a webpage. 22 22
So, for the footer, HTML actually 23 23
has another special element just for that, 24 24
and as you can imagine it's called Exactly Footer. 25 25
So, first, as always, we need a new row here, 26 26
so a row, and now, as I told you before, 27 27
we will have two navigations inside of this row. 28 28
And so we have a column for each of those, 29 29
because we want them side by side. 30 30
So I will create two columns here. 31 31
So column and span one of two. 32 32
And this is for one of the navigations 33 33
and then for the second navigation, 34 34
the social media navigation. 35 35
So as before, we're gonna use an ordered list 36 36
in order to build that navigation. 37 37
And I'm gonna call this one footer nav. 38 38
And so let's see what we need to include 39 39
into this navigation. 40 40
Because we actually have it right here. 41 41
So the first link will be to About Us. 42 42
And again, it points nowhere, so About Us. 43 43
And now just duplicate this 44 44
and blog 45 45
press IOS app, 46 46
and I need to duplicate it once again, 47 47
so Android app. 48 48
All right, and now we need another navigation 49 49
to include links to Facebook, Twitter, Google Plus, 50 50
and Instagram, because those are the accounts Omnifood uses. 51 51
So again, an unordered list, 52 52
and this one will be called social links. 53 53
So. 54 54
Now what we need here, we will obviously 55 55
not write Facebook or Twitter. 56 56
What we want here is an icon for that. 57 57
So you already know where we get those, and it's right here. 58 58
As I showed you, we have some social icons down here. 59 59
So here's the first for Facebook. 60 60
So i class 61 61
and it's easy as this. 62 62
So I'm duplicating it three times 63 63
and now one for Twitter. 64 64
The next one is for Google Plus, 65 65
and one last for Instagram. 66 66
And here we go. 67 67
So these are our navigations. 68 68
And now we usually have a paragraph as well, 69 69
where we have for instance some fancy text 70 70
about copyright or something like that. 71 71
And so let's include another row here, 72 72
where we can put some text. 73 73
And in here, as I said, I will put just a paragraph, 74 74
and we can write something like copyright, 75 75
and then we use a nice symbol as well, which is called copy, 76 76
you'll have obviously seen this in many places. 77 77
So it's the copyright symbol, then 2015 by Omnifood. 78 78
Of course this is not the case because Omnifood 79 79
is not a real company, but it's just to show you 80 80
what this usually looks like. 81 81
So Omnifood created this in 2015, and it's their website. 82 82
All right. 83 83
So we can now check what this looks like in the browser 84 84
on our webpage, and we see our new section down here. 85 85
So this looks of course a little weird, 86 86
because it comes with the link styling we defined before. 87 87
So the style of this is like this right now, 88 88
because it's the generic link styling 89 89
that we defined before. 90 90
So we have to change this, 91 91
and we have to format all of this, 92 92
and put these links side by side, 93 93
and we're gonna do all of this in the next lecture.