Original subtitles

1 1

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.