0
1
00:00:02,670 --> 00:00:03,330
Welcome back.
1

2
00:00:03,330 --> 00:00:08,470
In this video, we're going to build the final section of the home page, which is the footer.
2

3
00:00:08,490 --> 00:00:10,080
We're not going to build it from scratch.
3

4
00:00:10,080 --> 00:00:11,620
We're going to use Webflow's
4

5
00:00:11,640 --> 00:00:13,160
amazing copy-paste feature.
5

6
00:00:13,170 --> 00:00:18,500
Basically, we're going to copy the entire footer from our previous Chat App project and paste it in this
6

7
00:00:18,540 --> 00:00:19,850
current project.
7

8
00:00:19,860 --> 00:00:21,120
This is a handy feature.
8

9
00:00:21,130 --> 00:00:27,870
It lets you reuse competence across your projects. And also it lets you copy different elements or components
9

10
00:00:27,870 --> 00:00:34,140
from other people's Webflow projects. For instance, Webflow has a library of showcase projects, where
10

11
00:00:34,140 --> 00:00:37,410
other Webflow designers can showcase the projects they've made.
11

12
00:00:37,410 --> 00:00:42,870
Often if the author allows it, you can clone the project and copy any components from there.
12

13
00:00:42,930 --> 00:00:48,750
You can either copy entire page, or copy bits and pieces. You'll find people sharing here things like
13

14
00:00:49,050 --> 00:00:54,720
UI kits or wireframe kits. You know like that wireframe kit, that we used in Figma? Yah, interfaces like
14

15
00:00:54,720 --> 00:01:00,480
that can be found here as well. You will have to make kits your own, and then copy-paste any elements
15

16
00:01:00,480 --> 00:01:05,050
and components as you like.
16

17
00:01:05,060 --> 00:01:11,390
All right, so let's see how this copy-paste works. Once you have a project within your account, open both
17

18
00:01:11,390 --> 00:01:15,360
of the projects in the designer, select the element you want to copy,
18

19
00:01:15,470 --> 00:01:21,920
in our case, footer section with everything that's inside, hit CTRL+C or CMD+C and then go to
19

20
00:01:21,920 --> 00:01:24,680
the current project and select where you want to paste it.
20

21
00:01:24,740 --> 00:01:31,310
In our case, we have to select body. So it pastes right there and not inside some other section. Then
21

22
00:01:31,310 --> 00:01:33,380
hit CTRL+V and there you go.
22

23
00:01:33,380 --> 00:01:36,820
Now, the entire footer has been duplicated in our current project.
23

24
00:01:36,890 --> 00:01:42,050
We can edit everything about this footer without affecting the other previous original project.
24

25
00:01:42,050 --> 00:01:45,570
All the styles have been carried with it and new classes have been created.
25

26
00:01:45,650 --> 00:01:50,810
When you copy classes that have the same name then Webflow is going to rename this conflicting class.
26

27
00:01:51,140 --> 00:01:57,110
Just like it says in this message. For example, that class name section we already having our current
27

28
00:01:57,110 --> 00:02:01,170
project, so Webflow gave a different name to our duplicate section.
28

29
00:02:01,170 --> 00:02:05,720
Another thing you'll note is that once you paste, the footer it doesn't look the same as the
29

30
00:02:05,720 --> 00:02:08,330
original. Because some of the styles are being inherited.
30

31
00:02:08,330 --> 00:02:10,440
For example, the text font wasn't carried.
31

32
00:02:10,460 --> 00:02:13,890
It's showing our website font for this project, which is Cabin.
32

33
00:02:13,910 --> 00:02:17,480
The font wasn't carried, because it is inheriting style from the body.
33

34
00:02:17,480 --> 00:02:19,460
In reality this is exactly what we want.
34

35
00:02:19,460 --> 00:02:22,070
We don't want the font from that project.
35

36
00:02:22,070 --> 00:02:24,750
We want the font to be what's inside our project.
36

37
00:02:24,800 --> 00:02:25,070
All right.
37

38
00:02:25,070 --> 00:02:28,240
Now let's style this footer and make it look like our designs.
38

39
00:02:31,290 --> 00:02:35,890
Let's start with the duplicate classes, section and container, and switch them to our existing classes.
39

40
00:02:51,080 --> 00:02:53,000
Any extra classes that we don't need.
40

41
00:02:53,030 --> 00:02:57,070
We actually can get rid off and clean up inside our website.
41

42
00:02:57,080 --> 00:02:58,690
We can do that from here.
42

43
00:02:58,790 --> 00:03:04,580
Click cleanup and Webflow will show us all the classes, we are not currently using on our page. And just
43

44
00:03:04,580 --> 00:03:05,990
remove all of them.
44

45
00:03:05,990 --> 00:03:08,260
And if we're not using that means we don't need them.
45

46
00:03:08,300 --> 00:03:27,700
Next, let's create a combo class for the footer section and change the background color.
46

47
00:03:27,810 --> 00:03:51,910
Also, let's change the spacing on the footer section because it's a little different from the usual section.
47

48
00:03:52,060 --> 00:03:56,470
Now, let's edit the footer links. The color is white with 60% opacity.
48

49
00:04:19,320 --> 00:04:23,240
And we also have to change the hover color to a different blue.
49

50
00:04:29,870 --> 00:04:30,700
Excellent.
50

51
00:04:30,710 --> 00:04:32,570
Now the logo, which is pretty easy.
51

52
00:04:41,370 --> 00:04:43,080
Next, footer headlines.
52

53
00:04:43,080 --> 00:04:44,550
This one is a little more interesting.
53

54
00:04:44,550 --> 00:04:46,760
It doesn't have a class like footer links.
54

55
00:04:46,770 --> 00:04:50,070
That's because in the previous project, we didn't have a class for this footer headlines.
55

56
00:04:50,070 --> 00:04:53,490
We styled in H3 tag instead.
56

57
00:04:53,490 --> 00:04:58,440
So, when we copied the footer Webflow just applied H3 tag from the current project. We're going to
57

58
00:04:58,440 --> 00:05:00,910
do the same and style that H3 tag.
58

59
00:05:01,110 --> 00:05:06,840
We can, of course, create a new class or change the tag to something like H2, H4 whatever, but styling
59

60
00:05:06,840 --> 00:05:08,300
H3 seems pretty good.
60

61
00:05:24,810 --> 00:05:28,610
There is an extra space on top of the headline, as you can see.
61

62
00:05:28,610 --> 00:05:29,880
Let's get rid of that space.
62

63
00:05:47,210 --> 00:05:47,530
All right.
63

64
00:05:47,530 --> 00:05:48,700
So far so good.
64

65
00:05:48,760 --> 00:05:51,420
We have to fix the margin on the testimonial section.
65

66
00:05:51,430 --> 00:05:54,070
You see how the arrow is too close to the footer?
66

67
00:05:54,070 --> 00:05:56,050
That's because the arrow is absolute element.
67

68
00:05:56,050 --> 00:06:04,120
It ignored the 80-pixel margin that's on the section and goes on top of it.
68

69
00:06:04,130 --> 00:06:09,140
Don't forget to create a new combo class or you will change all other sections too. It already has one
69

70
00:06:09,140 --> 00:06:10,690
combo class to it, but it's OK.
70

71
00:06:10,700 --> 00:06:12,350
We can have multiple combo classes.
71

72
00:06:12,350 --> 00:06:16,760
Usually, it's not recommended, because it can get a little confusing. But in this case, it's not that big
72

73
00:06:16,760 --> 00:06:17,210
of a deal.
73

74
00:06:21,100 --> 00:06:23,260
Let's compensate for that extra padding.
74

75
00:06:29,360 --> 00:06:31,270
And finaly, just update the content.
75

76
00:07:28,960 --> 00:07:31,030
That's all done. And we have one thing left.
76

77
00:07:31,030 --> 00:07:33,670
The email form. We're going to do that in the next video.