0
1
00:00:02,770 --> 00:00:09,040
In this video, we have one last thing to do, to finish the footer, its the e-mail from. This title here that
1

2
00:00:09,040 --> 00:00:15,050
says to subscribe to our newsletter, is not a link, it's just a headline. But same style as other footer links.
2

3
00:00:15,100 --> 00:00:19,020
We need to change this into a regular text and remove that hover effect.
3

4
00:00:19,030 --> 00:00:20,050
This is how we'll do that.
4

5
00:00:20,050 --> 00:00:32,690
Add a regular text block and give it the same footer link class.
5

6
00:00:32,720 --> 00:00:36,940
Now it's not a link anymore, but the hover effect is still there. To get rid of that,
6

7
00:00:36,950 --> 00:00:42,760
we will duplicate a class and name it something like "subscribe text".
7

8
00:00:42,810 --> 00:00:45,420
Now we can go to the hover effect and get rid of it.
8

9
00:00:55,390 --> 00:00:57,390
Now let's create the newsletter form.
9

10
00:00:57,520 --> 00:01:02,380
But start by copying the email form we already have above and go from there.
10

11
00:01:08,240 --> 00:01:11,710
Naturally, spacing is going to be an issue here, especially when we shrink.
11

12
00:01:11,960 --> 00:01:14,340
So we're gonna have to make some layout adjustments.
12

13
00:01:14,360 --> 00:01:17,870
The content here is flexbox organized in columns.
13

14
00:01:17,870 --> 00:01:23,300
For starters, we can get rid of the width that we have applied to the footer columns. That is making them
14

15
00:01:23,330 --> 00:01:26,320
equal width, regardless of the content inside.
15

16
00:01:26,390 --> 00:01:29,090
Which in this case, isn't really going to work.
16

17
00:01:33,800 --> 00:01:35,800
All right, that's a little better.
17

18
00:01:35,800 --> 00:01:41,260
There is also an extra empty column, which previously we used to have an equal space between the logo
18

19
00:01:41,260 --> 00:01:42,430
and the links.
19

20
00:01:42,430 --> 00:01:44,110
This time, we're gonna have to lose it.
20

21
00:01:44,380 --> 00:01:45,790
And that's an extra improvement.
21

22
00:01:45,790 --> 00:01:51,190
Now, let's change the width of the first column with a logo inside. It's stretching way too much.
22

23
00:01:51,490 --> 00:01:54,400
Let's check what's the width in the design and apply that.
23

24
00:02:04,770 --> 00:02:05,160
Excellent.
24

25
00:02:05,170 --> 00:02:08,770
That might be enough.
25

26
00:02:08,850 --> 00:02:10,360
Now let's style the form.
26

27
00:02:10,470 --> 00:02:14,850
Now, this form is using classes from the above hero section form.
27

28
00:02:14,850 --> 00:02:19,790
So we need to duplicate every time we're changing something inside, so don't forget that.
28

29
00:02:20,160 --> 00:02:22,940
Let's start with the background color of the field.
29

30
00:02:37,800 --> 00:02:42,910
There seems to be some default style in the field border, so let's change the border to transparent
30

31
00:02:42,950 --> 00:02:49,500
or 0 pixels.
31

32
00:02:49,510 --> 00:03:15,340
Remember, the text inside the field, is the place holder text. Which can be styled from the states dropdown.
32

33
00:03:17,800 --> 00:03:34,620
♫
33

34
00:03:34,860 --> 00:03:40,540
Now the button is a little more fun, we've decided to have a button that's arrow and it's on top of
34

35
00:03:40,540 --> 00:03:42,250
the field not outside of it.
35

36
00:03:42,280 --> 00:03:44,340
So we gotta pay for our creativity.
36

37
00:03:44,350 --> 00:03:48,960
Luckily we have already learned how to use positions, so we can make such arrangements.
37

38
00:03:49,060 --> 00:03:51,720
We'll need to do a few things in order to make this work.
38

39
00:03:51,730 --> 00:03:54,630
First, let's turn our button into an arrow.
39

40
00:03:54,640 --> 00:03:56,140
This is fairly straightforward.
40

41
00:03:56,140 --> 00:04:00,630
We are going to put the arrow as a background image of the button. In regular buttons,
41

42
00:04:00,620 --> 00:04:06,220
we could directly insert the arrow inside, but when it comes to form buttons they work a little differently.
42

43
00:04:06,220 --> 00:04:07,180
Here's what we need to do.
43

44
00:04:07,180 --> 00:04:11,100
Get rid of the text and the waiting message, that's inside the settings of the button.
44

45
00:04:11,140 --> 00:04:14,050
But put something, like one single letter.
45

46
00:04:14,230 --> 00:04:18,540
We cannot leave it completely empty, because Webflow will insert some default text otherwise.
46

47
00:04:18,730 --> 00:04:22,840
Now, remove the existing class and create a new class something like arrow button.
47

48
00:04:29,360 --> 00:04:33,530
We can easily make the letter disappear, by turning the text to transparent color.
48

49
00:04:36,700 --> 00:04:37,120
That's all.
49

50
00:04:37,120 --> 00:04:38,280
Now it won't be visible.
50

51
00:04:38,280 --> 00:04:39,400
Problem solved.
51

52
00:04:39,400 --> 00:04:39,820
Next.
52

53
00:04:39,820 --> 00:04:43,840
Export the arrow from Figma and add it as a background image of the button.
53

54
00:04:58,750 --> 00:05:00,290
We've got to change a few settings here.
54

55
00:05:00,300 --> 00:05:02,010
First, choose the Contain,
55

56
00:05:02,010 --> 00:05:07,460
so the full arrow is visible no matter the button's dimensions. And remove tiling and position
56

57
00:05:07,470 --> 00:05:16,420
image right in the center. Next, remove the blue background by changing it to transparent.
57

58
00:05:16,460 --> 00:05:19,720
We need to match the height of the button to the height of the field.
58

59
00:05:19,790 --> 00:05:24,350
It's not matching right now because the field has an extra margin on the bottom by default.
59

60
00:05:24,350 --> 00:05:28,550
Change that to 0 and the button should match the height Exactly.
60

61
00:05:29,910 --> 00:05:32,100
If it doesn't, then check the settings of the form.
61

62
00:05:32,100 --> 00:05:37,590
It's a flexbox and something might be up in there, or just change the button height manually,
62

63
00:05:37,620 --> 00:05:38,580
Just like the field.
63

64
00:05:38,580 --> 00:05:39,670
That should do the job.
64

65
00:05:39,690 --> 00:05:43,110
Next, we're going to set button to absolute position.
65

66
00:05:46,190 --> 00:05:48,110
And align it to the right.
66

67
00:05:51,530 --> 00:05:54,430
The moment you do this, the pattern might disappear.
67

68
00:05:54,440 --> 00:05:55,360
Now, why is that?
68

69
00:05:55,370 --> 00:05:57,540
Because position is relative to the body.
69

70
00:05:57,560 --> 00:06:01,990
We need the position to be relative to its direct parent element, which is the form.
70

71
00:06:02,180 --> 00:06:03,080
Remember the trick?
71

72
00:06:03,080 --> 00:06:09,260
If we change the position of the parent to relative or something else, then the button will position
72

73
00:06:09,260 --> 00:06:12,740
itself relative to the parent. And that will fix our issue.
73

74
00:06:12,920 --> 00:06:14,780
Let's move the arrow a little to the right.
74

75
00:06:26,900 --> 00:06:28,570
Now, let's give it a test in the preview.
75

76
00:06:34,460 --> 00:06:39,800
All is working fine, except one thing - for a very long email, the text is going to mix with the arrow.
76

77
00:06:39,860 --> 00:06:40,940
Fixing this is very easy.
77

78
00:06:40,940 --> 00:06:43,700
We just need to add extra padding to the field element. That way
78

79
00:06:43,700 --> 00:06:45,680
text will stop going underneath the arrow.
79

80
00:07:12,710 --> 00:07:14,240
There, now it's perfect.
80

81
00:07:17,010 --> 00:07:20,390
We also need to change the success message. To enable the success state,
81

82
00:07:20,400 --> 00:07:23,620
select form block and in the settings, click success tab.
82

83
00:07:23,670 --> 00:07:26,130
Make sure you've selected the form block and not the field.
83

84
00:07:26,130 --> 00:07:35,820
Selecting just the field will show different options in the settings.
84

85
00:07:35,860 --> 00:07:40,990
Make sure to duplicate the success message class, since this is the same class from the above form.
85

86
00:07:43,340 --> 00:07:48,240
Now the box grows wider compared to the form field and alters the entire structure of the footer.
86

87
00:07:48,240 --> 00:07:50,400
Not a good idea. To fix this,
87

88
00:07:50,400 --> 00:07:59,600
we can give our entire form block a fixed width. The same size as we have in designs, which is 267 pixels.
88

89
00:07:59,610 --> 00:08:04,040
This will keep the field, the success and error messages all the same size.
89

90
00:08:04,050 --> 00:08:08,610
Now, let's style the rest. The text size is too big compared to other footer content.
90

91
00:08:08,610 --> 00:08:12,060
We should match the font size, and maybe less padding.
91

92
00:08:18,090 --> 00:08:35,040
And we also need to update the content.
92

93
00:08:36,030 --> 00:08:40,030
As for error message, it seems fine as is. All right,
93

94
00:08:40,040 --> 00:08:40,760
check the responsiveness
94

95
00:08:40,770 --> 00:08:44,150
and see how it all looks inside the preview mode.
95

96
00:09:01,370 --> 00:09:06,470
Our home page is done. And in the next section, we're going to learn how to use Webflow's interaction
96

97
00:09:06,470 --> 00:09:10,990
tool. So we can create some animations for our page and bring it to life.
97

98
00:09:11,000 --> 00:09:11,500
Stick around.