0
1
00:00:00,300 --> 00:00:05,190
And the very last section of this page, the footer. The layout is quite simple.
1

2
00:00:05,190 --> 00:00:11,730
We used our twelve-point grid to divide the footer in six equal blocks. Each block is made of two columns.
2

3
00:00:11,730 --> 00:00:16,920
And one block is reserved for the space between the logo and the footer links.
3

4
00:00:16,920 --> 00:00:19,470
The most obvious option here is to use flexbox.
4

5
00:00:19,470 --> 00:00:25,220
Of course, there is an option of using columns element from Webflow, it would fit our layout just right.
5

6
00:00:25,290 --> 00:00:29,990
Because it's based on 12-point grid too. But you know how much I love those columns.
6

7
00:00:30,000 --> 00:00:31,980
So we're not going to use them.
7

8
00:00:32,010 --> 00:00:36,390
Instead, we will make our own columns using flexbox. As usual,
8

9
00:00:36,390 --> 00:00:38,910
let's add the section and a container inside.
9

10
00:00:54,390 --> 00:01:02,960
Add another block and apply our usual flexbox class to it.
10

11
00:01:02,980 --> 00:01:13,070
Now let's add another div block inside, which we will name as footer column.
11

12
00:01:13,270 --> 00:01:17,890
I'm gonna give it a temporary background and height, just to see what we are doing.
12

13
00:01:24,020 --> 00:01:25,300
Just like in our designs,
13

14
00:01:25,310 --> 00:01:31,250
we're going to use 6 columns. These are going to be equal width columns, so the entire flexbox will be
14

15
00:01:31,250 --> 00:01:33,240
divided in six equal parts.
15

16
00:01:33,260 --> 00:01:35,270
We can do that using percentage points.
16

17
00:01:35,270 --> 00:01:39,500
100% divided by 6 gives us 16,666...
17

18
00:01:39,500 --> 00:01:40,700
and so on.
18

19
00:01:40,700 --> 00:01:43,600
Instead of doing the math on our own, we can actually have Webflow
19

20
00:01:43,600 --> 00:01:47,450
do the math for us. Just like Figma. Inside the width field type
20

21
00:01:47,450 --> 00:01:49,400
100% divided by 6.
21

22
00:01:53,470 --> 00:02:01,180
If we duplicate this six times, you can see how it fills up the entire space. Let's add the margins on
22

23
00:02:01,180 --> 00:02:03,490
the side, just like we have in our designs.
23

24
00:02:03,490 --> 00:02:05,810
They are separated by 30 pixel space.
24

25
00:02:05,890 --> 00:02:11,920
So here we should add half of that on each side. 15 pixel left and right margin.
25

26
00:02:11,920 --> 00:02:15,220
This way margins from adjacent columns will add up to 30 pixels.
26

27
00:02:15,310 --> 00:02:20,770
However, we shouldn't have margins on the first and last columns. Because these margins will add extra
27

28
00:02:20,770 --> 00:02:22,900
space to already existing padding,
28

29
00:02:22,900 --> 00:02:24,040
that's part of the section div.
29

30
00:02:24,040 --> 00:02:28,540
This might not be that big of a deal, but it's a great habit to be consistent.
30

31
00:02:28,600 --> 00:02:30,830
We can do this easily by using combo classes.
31

32
00:02:30,840 --> 00:02:35,850
Just create a combo class first and remove the left margin. And same thing on the last column.
32

33
00:02:47,260 --> 00:02:50,250
All right now let's put the content in the corresponding columns.
33

34
00:03:12,230 --> 00:03:18,260
Instead of using paragraph for regular text, we have another option for text called Text Block. Which
34

35
00:03:18,260 --> 00:03:24,680
is what we are going to use for this tag line under the logo. Text block is basically a regular div with
35

36
00:03:24,680 --> 00:03:26,150
text inside it.
36

37
00:03:26,210 --> 00:03:30,460
It works the same way as a paragraph element, but they have different purposes.
37

38
00:03:30,560 --> 00:03:37,040
You should use paragraph for multi-line, longer texts and main content of the page. And text blocks for
38

39
00:03:37,040 --> 00:03:37,730
everything else,
39

40
00:03:37,730 --> 00:03:42,100
that is not a heading, paragraph or a link. You can use these 2 interchangeably.
40

41
00:03:42,110 --> 00:03:47,660
The result is the same. But it's a good habit to use them purposefully because search engines and screen
41

42
00:03:47,660 --> 00:03:52,520
readers can identify how your content is structured on the page.
42

43
00:03:52,520 --> 00:03:57,700
Another way to create a text blog is just by double-clicking inside a regular div blog and start typing.
43

44
00:03:57,710 --> 00:03:59,990
It will turn it into a text block.
44

45
00:04:03,470 --> 00:04:07,270
For the footer links, we are going to add regular link elements.
45

46
00:04:12,470 --> 00:04:15,360
Let's style the link before duplicating, that way duplicates
46

47
00:04:15,380 --> 00:04:17,140
will carry the class.
47

48
00:04:17,210 --> 00:04:22,960
The font color already shows the grey color. But for some reason it's still blue on the canvas.
48

49
00:04:22,970 --> 00:04:26,870
This is a little odd behavior that seems like a bug on Webflow's side.
49

50
00:04:26,870 --> 00:04:33,060
It is correct that it's blue. Because the grey color from the body tag is being overridden by more specific
50

51
00:04:33,200 --> 00:04:37,430
All Links tag, which has a blue color by default.
51

52
00:04:37,430 --> 00:04:43,490
So, in reality, the properties panel should be showing blue, not grey. But there might be one reason why
52

53
00:04:43,490 --> 00:04:44,440
that's not happening.
53

54
00:04:44,450 --> 00:04:48,710
Which I'm not gonna go into right now, because it's not really adding value to this lesson.
54

55
00:04:48,710 --> 00:04:52,700
So to fix this, just select some other color and select the grey again.
55

56
00:04:56,060 --> 00:05:01,490
We don't need it to be underlined. That we can remove by selecting None under Text Decoration.
56

57
00:05:07,480 --> 00:05:09,460
We need some hover effect for this link.
57

58
00:05:09,460 --> 00:05:12,320
Otherwise they're not gonna look like links.
58

59
00:05:12,430 --> 00:05:15,180
We can simply turn it into blue color on the hover  state.
59

60
00:05:15,200 --> 00:05:16,870
That's a simple and effective option.
60

61
00:05:19,970 --> 00:05:21,770
We could add a hover transition effect here.
61

62
00:05:21,770 --> 00:05:22,960
Just like we did with buttons.
62

63
00:05:22,970 --> 00:05:24,780
But it's not really necessary.
63

64
00:05:24,800 --> 00:05:30,870
It's not a lot of change, so let's keep it without a transition.
64

65
00:05:30,940 --> 00:05:34,880
Now let's duplicate. But oops.
65

66
00:05:35,200 --> 00:05:36,930
It puts them side by side.
66

67
00:05:36,940 --> 00:05:37,540
Why is that?
67

68
00:05:37,540 --> 00:05:42,450
Can you guess? Because display for links is set to inline.
68

69
00:05:42,460 --> 00:05:46,590
That means it flows like text, which it is.
69

70
00:05:46,750 --> 00:05:49,210
So they are going to go one next to each other.
70

71
00:05:50,080 --> 00:05:56,080
If we apply display block instead, we know what's gonna happen. It will occupy an entire width and
71

72
00:05:56,080 --> 00:05:57,920
stack on top of each other.
72

73
00:05:58,000 --> 00:06:01,530
But this method has one little issue. Not really an issue,
73

74
00:06:01,540 --> 00:06:06,250
more like not an ideal user experience. Since it's a link and it's a full width,
74

75
00:06:06,250 --> 00:06:12,480
that means it's a clickable even on the empty space. Unlike our navbar, where a similar thing is happening.
75

76
00:06:12,640 --> 00:06:15,020
The links interact even on the empty space.
76

77
00:06:15,070 --> 00:06:20,440
But here the border on the bottom is a good representation that the entire thing is a link.
77

78
00:06:20,440 --> 00:06:23,750
If we were just highlighting the text, then it would be odd
78

79
00:06:23,760 --> 00:06:24,840
on the navbar too.
79

80
00:06:25,180 --> 00:06:30,730
So how can we make them stack on top of each other, without using display block function? By using
80

81
00:06:30,730 --> 00:06:31,480
flexbox.
81

82
00:06:31,480 --> 00:06:37,890
We can give the parent flex layout and give it the vertical direction instead of horizontal. Then left
82

83
00:06:37,890 --> 00:06:38,810
align.
83

84
00:06:38,920 --> 00:06:40,620
Make sure to give this left align.
84

85
00:06:40,630 --> 00:06:46,000
Otherwise, it will stretch edge to edge by default. Just like a block. And there, now is stack on top of
85

86
00:06:46,000 --> 00:06:48,250
each other and empty space isn't part of the link.
86

87
00:06:53,010 --> 00:06:59,060
Okay, let's style our headline. Instead of applying a class to these footer headlines, lets style one of
87

88
00:06:59,060 --> 00:07:03,220
the headings tags. Say H3 maybe. It might be the right level.
88

89
00:07:03,230 --> 00:07:05,240
H2 we could use for something bigger.
89

90
00:07:05,340 --> 00:07:06,710
A mid-level headline.
90

91
00:07:06,770 --> 00:07:08,700
Do you remember how to style the tags?
91

92
00:07:08,720 --> 00:07:15,080
We need to select the tag from the selector. And now we are able to style all the H3 tags.
92

93
00:07:26,180 --> 00:07:31,280
Let's remove the top margin and add a 20-pixel bottom margin, just like we have it in the designs.
93

94
00:07:34,410 --> 00:07:38,160
And there we go. Now all H3 tags will be styled like this by default.
94

95
00:07:49,500 --> 00:07:53,880
One thing you'll notice, that columns don't align on top like we have in design.
95

96
00:07:53,880 --> 00:07:58,290
Let's have a look at our flexbox settings. You see it says Align Center.
96

97
00:07:58,680 --> 00:08:00,840
What we want, is align top instead.
97

98
00:08:03,830 --> 00:08:04,610
As usual,
98

99
00:08:04,610 --> 00:08:09,680
let's add a combo class to this flexbox before we make any changes. To not mess up other instances.
99

100
00:08:13,090 --> 00:08:14,620
And now that's a correct alignment.
100

101
00:08:14,620 --> 00:08:16,400
Let's finish up the links.
101

102
00:08:44,250 --> 00:08:49,200
In this practice project, we're not going to link these pages. Because we don't have other pages. But we
102

103
00:08:49,200 --> 00:08:56,520
could connect the Contact Us link. For example, to link the email address, so it opens up a new email window
103

104
00:08:56,520 --> 00:08:58,850
when the user clicks on it.
104

105
00:08:58,860 --> 00:09:04,740
We just need to put the email address inside this field. We can skip the subject line. And we can
105

106
00:09:04,740 --> 00:09:06,390
do the similar thing for the phone link.
106

107
00:09:13,240 --> 00:09:14,680
And also for the office address.
107

108
00:09:14,680 --> 00:09:16,370
We could link a Google Maps URL.
108

109
00:09:36,480 --> 00:09:42,570
Check open in new window, so that Google Maps doesn't open up right inside this window, forcing the users
109

110
00:09:42,570 --> 00:09:43,530
to leave the site.
110

111
00:09:46,960 --> 00:09:49,780
And finally lets add the copyright text on the bottom.
111

112
00:09:55,550 --> 00:09:59,200
We're going to use Text Block again, instead of the paragraph element.
112

113
00:10:03,160 --> 00:10:05,790
I've added the text block inside the container,
113

114
00:10:05,800 --> 00:10:07,690
but outside of the flexbox.
114

115
00:10:17,930 --> 00:10:22,420
And we can add 180-pixel margin on top, just like our designs.
115

116
00:10:25,610 --> 00:10:31,710
In our designs, the copyright text is quite close to the bottom of the page, 30-pixel away from the bottom.
116

117
00:10:33,290 --> 00:10:37,420
But in Webflow it's much higher, because our section block has a 90-pixel padding.
117

118
00:10:37,460 --> 00:10:40,820
We need to change that 90 padding to those 30-pixels.
118

119
00:10:40,820 --> 00:10:43,460
But before we do that, we gotta add a combo class.
119

120
00:10:52,660 --> 00:10:56,090
And there you go, we're done with our desktop version of our page.
120

121
00:10:56,110 --> 00:10:58,890
Let's go to the preview mode and check how it all looks.
121

122
00:11:14,600 --> 00:11:18,430
So to recap. We have built the footer using a flexbox layout.
122

123
00:11:18,440 --> 00:11:23,930
We have given footer columns percentage width, so they shrink and expand equally. And we have left
123

124
00:11:23,930 --> 00:11:28,220
one of the columns empty to create space between the logo in the footer links.
124

125
00:11:28,220 --> 00:11:35,390
We have learned about a new element Text Block, how it's used for non-paragraph text in more of a general
125

126
00:11:35,390 --> 00:11:41,890
use. This concludes the current section. In the upcoming section, we will learn how to make our page responsive.
126

127
00:11:42,230 --> 00:11:45,230
So it looks beautiful and user friendly on any device.