Welcome back. 1
In this video, we're going to build the final section of the home page, which is the footer. 2
We're not going to build it from scratch. 3
We're going to use Webflow's 4
amazing copy-paste feature. 5
Basically, we're going to copy the entire footer from our previous Chat App project and paste it in this 6
current project. 7
This is a handy feature. 8
It lets you reuse competence across your projects. And also it lets you copy different elements or components 9
from other people's Webflow projects. For instance, Webflow has a library of showcase projects, where 10
other Webflow designers can showcase the projects they've made. 11
Often if the author allows it, you can clone the project and copy any components from there. 12
You can either copy entire page, or copy bits and pieces. You'll find people sharing here things like 13
UI kits or wireframe kits. You know like that wireframe kit, that we used in Figma? Yah, interfaces like 14
that can be found here as well. You will have to make kits your own, and then copy-paste any elements 15
and components as you like. 16
All right, so let's see how this copy-paste works. Once you have a project within your account, open both 17
of the projects in the designer, select the element you want to copy, 18
in our case, footer section with everything that's inside, hit CTRL+C or CMD+C and then go to 19
the current project and select where you want to paste it. 20
In our case, we have to select body. So it pastes right there and not inside some other section. Then 21
hit CTRL+V and there you go. 22
Now, the entire footer has been duplicated in our current project. 23
We can edit everything about this footer without affecting the other previous original project. 24
All the styles have been carried with it and new classes have been created. 25
When you copy classes that have the same name then Webflow is going to rename this conflicting class. 26
Just like it says in this message. For example, that class name section we already having our current 27
project, so Webflow gave a different name to our duplicate section. 28
Another thing you'll note is that once you paste, the footer it doesn't look the same as the 29
original. Because some of the styles are being inherited. 30
For example, the text font wasn't carried. 31
It's showing our website font for this project, which is Cabin. 32
The font wasn't carried, because it is inheriting style from the body. 33
In reality this is exactly what we want. 34
We don't want the font from that project. 35
We want the font to be what's inside our project. 36
All right. 37
Now let's style this footer and make it look like our designs. 38
Let's start with the duplicate classes, section and container, and switch them to our existing classes. 39
Any extra classes that we don't need. 40
We actually can get rid off and clean up inside our website. 41
We can do that from here. 42
Click cleanup and Webflow will show us all the classes, we are not currently using on our page. And just 43
remove all of them. 44
And if we're not using that means we don't need them. 45
Next, let's create a combo class for the footer section and change the background color. 46
Also, let's change the spacing on the footer section because it's a little different from the usual section. 47
Now, let's edit the footer links. The color is white with 60% opacity. 48
And we also have to change the hover color to a different blue. 49
Excellent. 50
Now the logo, which is pretty easy. 51
Next, footer headlines. 52
This one is a little more interesting. 53
It doesn't have a class like footer links. 54
That's because in the previous project, we didn't have a class for this footer headlines. 55
We styled in H3 tag instead. 56
So, when we copied the footer Webflow just applied H3 tag from the current project. We're going to 57
do the same and style that H3 tag. 58
We can, of course, create a new class or change the tag to something like H2, H4 whatever, but styling 59
H3 seems pretty good. 60
There is an extra space on top of the headline, as you can see. 61
Let's get rid of that space. 62
All right. 63
So far so good. 64
We have to fix the margin on the testimonial section. 65
You see how the arrow is too close to the footer? 66
That's because the arrow is absolute element. 67
It ignored the 80-pixel margin that's on the section and goes on top of it. 68
Don't forget to create a new combo class or you will change all other sections too. It already has one 69
combo class to it, but it's OK. 70
We can have multiple combo classes. 71
Usually, it's not recommended, because it can get a little confusing. But in this case, it's not that big 72
of a deal. 73
Let's compensate for that extra padding. 74
And finaly, just update the content. 75
That's all done. And we have one thing left. 76
The email form. We're going to do that in the next video.