1 00:00:01,051 --> 00:00:02,272 Welcome to our last section 2 00:00:02,272 --> 00:00:06,231 we need to build for our website, the footer. 3 00:00:06,231 --> 00:00:08,089 Every website has a footer 4 00:00:08,089 --> 00:00:11,211 and it's like the conclusion of your website, 5 00:00:11,211 --> 00:00:13,453 where the user can find additional information 6 00:00:13,453 --> 00:00:15,870 about a website or a company. 7 00:00:17,647 --> 00:00:20,340 So this is most simple footer ever, 8 00:00:20,340 --> 00:00:24,056 but simple is in many cases a good solution, 9 00:00:24,056 --> 00:00:26,899 and this the footer has two navigations. 10 00:00:26,899 --> 00:00:29,356 One for less important links, like About Us 11 00:00:29,356 --> 00:00:32,618 or a link to a blog, and one for social media 12 00:00:32,618 --> 00:00:34,118 on the right side. 13 00:00:35,021 --> 00:00:36,925 In a more complex website, 14 00:00:36,925 --> 00:00:39,840 the footer usually repeats the main navigation, 15 00:00:39,840 --> 00:00:42,463 but that's not necessary in our case. 16 00:00:42,463 --> 00:00:44,880 We don't need more than this. 17 00:00:46,458 --> 00:00:48,222 So in this last section, 18 00:00:48,222 --> 00:00:50,402 there are not many new things to learn, 19 00:00:50,402 --> 00:00:52,553 but we keep practicing. 20 00:00:52,553 --> 00:00:55,873 So we'll learn how to build a simple but effective footer, 21 00:00:55,873 --> 00:01:00,040 and a cool way of using social icons on a webpage. 22 00:01:01,028 --> 00:01:03,586 So, for the footer, HTML actually 23 00:01:03,586 --> 00:01:07,604 has another special element just for that, 24 00:01:07,604 --> 00:01:12,402 and as you can imagine it's called Exactly Footer. 25 00:01:12,402 --> 00:01:16,152 So, first, as always, we need a new row here, 26 00:01:18,528 --> 00:01:21,861 so a row, and now, as I told you before, 27 00:01:22,869 --> 00:01:27,061 we will have two navigations inside of this row. 28 00:01:27,061 --> 00:01:29,569 And so we have a column for each of those, 29 00:01:29,569 --> 00:01:32,761 because we want them side by side. 30 00:01:32,761 --> 00:01:35,594 So I will create two columns here. 31 00:01:38,810 --> 00:01:41,310 So column and span one of two. 32 00:01:45,434 --> 00:01:49,300 And this is for one of the navigations 33 00:01:49,300 --> 00:01:52,217 and then for the second navigation, 34 00:01:53,244 --> 00:01:55,545 the social media navigation. 35 00:01:55,545 --> 00:01:59,481 So as before, we're gonna use an ordered list 36 00:01:59,481 --> 00:02:03,114 in order to build that navigation. 37 00:02:03,114 --> 00:02:06,364 And I'm gonna call this one footer nav. 38 00:02:09,220 --> 00:02:11,973 And so let's see what we need to include 39 00:02:11,973 --> 00:02:13,723 into this navigation. 40 00:02:15,095 --> 00:02:18,345 Because we actually have it right here. 41 00:02:28,203 --> 00:02:31,370 So the first link will be to About Us. 42 00:02:32,301 --> 00:02:35,801 And again, it points nowhere, so About Us. 43 00:02:38,083 --> 00:02:40,333 And now just duplicate this 44 00:02:43,090 --> 00:02:43,923 and blog 45 00:02:48,600 --> 00:02:49,767 press IOS app, 46 00:02:57,128 --> 00:02:59,833 and I need to duplicate it once again, 47 00:02:59,833 --> 00:03:01,083 so Android app. 48 00:03:04,537 --> 00:03:08,344 All right, and now we need another navigation 49 00:03:08,344 --> 00:03:11,247 to include links to Facebook, Twitter, Google Plus, 50 00:03:11,247 --> 00:03:15,414 and Instagram, because those are the accounts Omnifood uses. 51 00:03:17,684 --> 00:03:20,017 So again, an unordered list, 52 00:03:20,969 --> 00:03:24,386 and this one will be called social links. 53 00:03:30,803 --> 00:03:31,636 So. 54 00:03:34,774 --> 00:03:37,096 Now what we need here, we will obviously 55 00:03:37,096 --> 00:03:40,021 not write Facebook or Twitter. 56 00:03:40,021 --> 00:03:42,820 What we want here is an icon for that. 57 00:03:42,820 --> 00:03:46,987 So you already know where we get those, and it's right here. 58 00:03:48,219 --> 00:03:52,386 As I showed you, we have some social icons down here. 59 00:03:53,559 --> 00:03:56,309 So here's the first for Facebook. 60 00:03:59,993 --> 00:04:00,826 So i class 61 00:04:08,230 --> 00:04:10,063 and it's easy as this. 62 00:04:11,933 --> 00:04:14,683 So I'm duplicating it three times 63 00:04:16,357 --> 00:04:18,357 and now one for Twitter. 64 00:04:23,253 --> 00:04:25,920 The next one is for Google Plus, 65 00:04:31,693 --> 00:04:33,943 and one last for Instagram. 66 00:04:40,900 --> 00:04:42,212 And here we go. 67 00:04:42,212 --> 00:04:44,629 So these are our navigations. 68 00:04:45,776 --> 00:04:50,264 And now we usually have a paragraph as well, 69 00:04:50,264 --> 00:04:54,005 where we have for instance some fancy text 70 00:04:54,005 --> 00:04:57,001 about copyright or something like that. 71 00:04:57,001 --> 00:05:00,168 And so let's include another row here, 72 00:05:01,042 --> 00:05:03,292 where we can put some text. 73 00:05:07,873 --> 00:05:12,040 And in here, as I said, I will put just a paragraph, 74 00:05:13,050 --> 00:05:16,550 and we can write something like copyright, 75 00:05:18,477 --> 00:05:23,413 and then we use a nice symbol as well, which is called copy, 76 00:05:23,413 --> 00:05:26,374 you'll have obviously seen this in many places. 77 00:05:26,374 --> 00:05:30,541 So it's the copyright symbol, then 2015 by Omnifood. 78 00:05:33,568 --> 00:05:35,507 Of course this is not the case because Omnifood 79 00:05:35,507 --> 00:05:39,507 is not a real company, but it's just to show you 80 00:05:42,882 --> 00:05:45,299 what this usually looks like. 81 00:05:48,006 --> 00:05:52,173 So Omnifood created this in 2015, and it's their website. 82 00:05:54,176 --> 00:05:55,009 All right. 83 00:05:57,520 --> 00:06:01,444 So we can now check what this looks like in the browser 84 00:06:01,444 --> 00:06:05,611 on our webpage, and we see our new section down here. 85 00:06:08,120 --> 00:06:10,465 So this looks of course a little weird, 86 00:06:10,465 --> 00:06:15,259 because it comes with the link styling we defined before. 87 00:06:15,259 --> 00:06:18,926 So the style of this is like this right now, 88 00:06:20,566 --> 00:06:22,225 because it's the generic link styling 89 00:06:22,225 --> 00:06:24,142 that we defined before. 90 00:06:25,127 --> 00:06:27,369 So we have to change this, 91 00:06:27,369 --> 00:06:29,528 and we have to format all of this, 92 00:06:29,528 --> 00:06:32,721 and put these links side by side, 93 00:06:32,721 --> 00:06:36,888 and we're gonna do all of this in the next lecture.