0
1
00:00:00,360 --> 00:00:00,900
All right.
1

2
00:00:00,930 --> 00:00:04,210
We're gonna build our call to action section in this video.
2

3
00:00:04,230 --> 00:00:05,100
What do we need here?
3

4
00:00:05,250 --> 00:00:07,440
Let's do a quick planning in our head.
4

5
00:00:07,530 --> 00:00:11,040
So we've got image on the left, content on the side.
5

6
00:00:11,040 --> 00:00:14,010
Pretty much same as our hero section.
6

7
00:00:14,070 --> 00:00:15,540
Let's start with the basics.
7

8
00:00:15,540 --> 00:00:19,950
We're going to add a new section and give it a class Section that we created.
8

9
00:00:20,340 --> 00:00:24,240
Then we're going to put a div block inside and give it a class container.
9

10
00:00:25,710 --> 00:00:27,030
And then we'll take it from there.
10

11
00:00:36,700 --> 00:00:39,080
We need a background color for this section.
11

12
00:00:39,090 --> 00:00:43,260
It's actually the same blue, but we have it at 10% opacity.
12

13
00:00:43,390 --> 00:00:45,030
We'll do the same thing in Webflow.
13

14
00:00:45,040 --> 00:00:50,710
But the question is, how are we going to edit our sections background without altering same sections
14

15
00:00:50,710 --> 00:00:51,910
on our page?
15

16
00:00:51,910 --> 00:00:57,130
Well, if you paid attention to the previous lesson, then you'll know that we can apply a combo class to
16

17
00:00:57,130 --> 00:00:59,770
the section without needing to duplicate it.
17

18
00:01:02,560 --> 00:01:02,860
There.
18

19
00:01:02,860 --> 00:01:05,710
Now the change is only reflected on this new section.
19

20
00:01:16,700 --> 00:01:21,050
Since we have the similar layout as the hero section, maybe we can do the same thing?
20

21
00:01:21,080 --> 00:01:21,760
Let's have a look.
21

22
00:01:22,950 --> 00:01:28,380
We have a flexbox inside a container. And this flexbox has two blocks - left and right, that sit next
22

23
00:01:28,380 --> 00:01:28,980
to each other.
23

24
00:01:29,310 --> 00:01:31,050
Let's build this out in a similar way.
24

25
00:01:53,620 --> 00:01:59,740
So, we've added a div block and applied the flexbox class to it. And put another boxes inside, that are
25

26
00:02:00,010 --> 00:02:01,360
glued to the edges.
26

27
00:02:01,360 --> 00:02:02,090
Why?
27

28
00:02:02,110 --> 00:02:09,070
Because if you check the properties of the Flexbox, you'll see that it has Justify: "Space between" applied.
28

29
00:02:09,250 --> 00:02:11,540
This pushes those children boxes to the side.
29

30
00:02:11,560 --> 00:02:14,610
So whatever we put inside them, will be pushed as well.
30

31
00:02:17,350 --> 00:02:19,320
Okay on the left, let's put the image.
31

32
00:02:19,370 --> 00:02:20,630
We need to export it first.
32

33
00:02:43,060 --> 00:02:47,520
The thing with this image, is that it's too big. And 2X export,
33

34
00:02:47,590 --> 00:02:51,420
even after a compression is too large of the file.
34

35
00:02:51,430 --> 00:02:58,270
Ideally, we would want to export a JPEG in such a case, but let's try one 1.5X and see if it's
35

36
00:02:58,270 --> 00:02:59,350
going to be small enough.
36

37
00:03:09,180 --> 00:03:09,480
Okay.
37

38
00:03:09,480 --> 00:03:10,650
It's still a bit large.
38

39
00:03:10,650 --> 00:03:13,200
We could go 1X, but it's all right.
39

40
00:03:13,210 --> 00:03:18,720
Also, it's not in the top part of the page, which means it's going to load in the background until
40

41
00:03:18,720 --> 00:03:19,800
user scrolls down.
41

42
00:03:36,790 --> 00:03:42,800
Now, because we exported it in one 1,5X, the HiDPI option doesn't do a good job.
42

43
00:03:42,820 --> 00:03:46,090
This means we need to set the width manually.
43

44
00:03:46,110 --> 00:04:01,030
So, we just need to check the width in Figma and apply that exact width here.
44

45
00:04:01,170 --> 00:04:06,450
We're going to need to find a way how to make this image stick on the left edge, like we have it in our
45

46
00:04:06,450 --> 00:04:07,320
designs.
46

47
00:04:07,320 --> 00:04:10,590
But let's first put some content inside the right block.
47

48
00:04:16,080 --> 00:04:19,920
Okay, so what's happening here? The left and right boxes are flex children.
48

49
00:04:19,920 --> 00:04:24,140
So they have a flexibility to shrink and grow to make space for each other.
49

50
00:04:24,150 --> 00:04:29,390
So in this case, paragraph is pushing things and making the left block shrink.
50

51
00:04:29,400 --> 00:04:33,980
What we can do here is to apply a maximum width to the right block, so it doesn't go wild.
51

52
00:04:39,800 --> 00:04:48,830
We can check the width in Figma and put that as max width, which is 467 pixels. Now, do you wonder why not
52

53
00:04:48,830 --> 00:04:54,260
fixed width instead of maximum width? Because on smaller screens we want it to shrink.
53

54
00:04:54,260 --> 00:04:56,500
We want to design responsively.
54

55
00:04:56,610 --> 00:04:59,170
Is that a word? There is responsibly.
55

56
00:04:59,330 --> 00:04:59,840
Well both,
56

57
00:04:59,840 --> 00:05:03,200
we want to design responsibly and responsively.
57

58
00:05:03,470 --> 00:05:08,480
So mostly consider using max and min sizes instead of exact sizes.
58

59
00:05:08,480 --> 00:05:14,540
I have to point out here. Because this block is a flex child, it would still shrink even if we gave it
59

60
00:05:14,540 --> 00:05:15,810
in an exact width.
60

61
00:05:15,890 --> 00:05:19,140
This happens because that's what flexbox does. It rules
61

62
00:05:19,170 --> 00:05:20,600
their children as it wants.
62

63
00:05:20,600 --> 00:05:26,600
They don't get a lot of say. Let's give this block some margin on the left, so it's not so close to the
63

64
00:05:26,600 --> 00:05:27,050
image.
64

65
00:05:30,630 --> 00:05:30,900
OK.
65

66
00:05:30,900 --> 00:05:32,330
Now, what to do with our image?
66

67
00:05:32,340 --> 00:05:35,190
How do we push it onto the side?
67

68
00:05:35,190 --> 00:05:38,290
I know, we can add a negative margin. Yep.
68

69
00:05:38,340 --> 00:05:39,080
That's the thing.
69

70
00:05:39,090 --> 00:05:46,650
Negative margins.
70

71
00:05:46,700 --> 00:05:47,450
And there you go.
71

72
00:05:47,780 --> 00:05:53,030
But this has a small issue, on a wider screen the negative margin that we have added, is not going to
72

73
00:05:53,030 --> 00:05:54,980
be enough. To fix this issue,
73

74
00:05:54,980 --> 00:05:56,460
we can do two things. First,
74

75
00:05:56,480 --> 00:06:00,380
we can use the VW units instead of pixel units.
75

76
00:06:00,380 --> 00:06:02,710
Remember what VW stands for?
76

77
00:06:02,720 --> 00:06:03,320
That's right.
77

78
00:06:03,320 --> 00:06:04,000
Volkswagen.
78

79
00:06:04,610 --> 00:06:06,810
But it also stands for Viewport Width.
79

80
00:06:06,860 --> 00:06:12,920
So when we put something like 10 VW, it means the margin will be 10% of the browsers width.
80

81
00:06:13,070 --> 00:06:16,370
So as browser increases, this will increase too.
81

82
00:06:16,730 --> 00:06:17,720
It's still not enough.
82

83
00:06:17,750 --> 00:06:22,220
We could add a few extra points and crop the image on smaller screens.
83

84
00:06:22,280 --> 00:06:29,090
But there is one more thing we can do, is that we can widen the image itself. Which means we can export
84

85
00:06:29,090 --> 00:06:31,910
more of the image. When we made this graphic,
85

86
00:06:31,910 --> 00:06:37,800
we have actually cropped the image. So we can reveal more of it and export the wider version.
86

87
00:06:37,850 --> 00:06:42,670
This way we will have more flexibility. Move the image in the middle, so the entire thing is visible and
87

88
00:06:42,670 --> 00:06:43,840
frame isn't cropping it.
88

89
00:06:43,880 --> 00:06:49,010
Otherwise, if we export it, then it's going to clip the content, based on the frame. And enlarge the image
89

90
00:06:49,040 --> 00:06:53,170
or basically reveal more of it.
90

91
00:06:53,270 --> 00:06:57,550
Then again we go through the same export and compression and all that stuff.
91

92
00:07:10,220 --> 00:07:13,060
Just make sure to adjust the width one more time.
92

93
00:07:13,070 --> 00:07:17,000
It's not 660 pixel wide anymore, it's 816 instead.
93

94
00:07:20,290 --> 00:07:31,400
And now we have more flexibility on how much of the image we can clip from the page.
94

95
00:07:31,480 --> 00:07:32,830
By the way this is not a hack,
95

96
00:07:32,830 --> 00:07:35,590
this is a valid way of doing things in web design.
96

97
00:07:35,620 --> 00:07:44,670
What matters at the end of the day is not the method, but the result.
97

98
00:07:44,670 --> 00:07:46,710
All right let's finish up the content.
98

99
00:07:46,710 --> 00:07:50,020
Remember, what we did with the button when playing with a combo classes?
99

100
00:07:50,070 --> 00:07:52,950
We'll give this button a combo class of blue and style it.
100

101
00:08:08,480 --> 00:08:10,190
The same thing we can do with a ghost button.
101

102
00:08:30,650 --> 00:08:33,080
And let's use our paragraph to add spacing.
102

103
00:08:40,980 --> 00:08:44,050
30 pixel on top and 60 pixel bottom.
103

104
00:08:44,220 --> 00:08:46,680
It actually doesn't matter where you add your spacing.
104

105
00:08:46,680 --> 00:08:52,320
You could even use headline and buttons, but that would need me to add edit two elements. By using a
105

106
00:08:52,320 --> 00:08:54,690
middle guy, I can add space on top and bottom.
106

107
00:08:54,750 --> 00:08:59,630
It's less work and less amount of classes.
107

108
00:08:59,690 --> 00:09:00,800
So, what do we have here?
108

109
00:09:00,800 --> 00:09:05,730
There is a line and then there is image of stars and text next to it.
109

110
00:09:05,990 --> 00:09:11,060
Based on this side by side layout, we know that we're going to need an extra div block, just for those
110

111
00:09:11,060 --> 00:09:11,670
two.
111

112
00:09:11,690 --> 00:09:17,580
This time we're going to export stars in SVG format. Because they don't have any photography inside, they are
112

113
00:09:17,630 --> 00:09:20,310
vector based, so perfect for SVG.
113

114
00:09:20,480 --> 00:09:25,040
As I mentioned before, SVGs usually don't need to be compressed, they are quite small already.
114

115
00:09:50,730 --> 00:09:56,490
Also, SVGs don't need to have HiDPI option checked, because they export from Figma 1X size,
115

116
00:09:56,730 --> 00:09:58,380
so there is no need to shrink them.
116

117
00:09:58,380 --> 00:10:01,810
They will look perfectly crisp in their original 1X size.
117

118
00:10:01,950 --> 00:10:18,110
And even if you enlarge them as much as you want.
118

119
00:10:18,230 --> 00:10:18,500
OK.
119

120
00:10:18,510 --> 00:10:24,390
So, how do we put these stars and text side by side? Every time you want to put something side by side,
120

121
00:10:24,390 --> 00:10:25,770
start with flexbox.
121

122
00:10:25,770 --> 00:10:30,580
There are other options too, but flexbox will give you the most flexibility most of the time.
122

123
00:10:30,660 --> 00:10:35,410
This flexbox that we created in the hero section, has a center alignment.
123

124
00:10:35,610 --> 00:10:41,550
In our case, we want it to have a top alignment, like our design. But we can't change it here, because that's
124

125
00:10:41,550 --> 00:10:48,270
gonna mess up the original flexbox. And it's going to mess up all the other instances of this same
125

126
00:10:48,290 --> 00:10:49,220
flexbox.
126

127
00:10:49,230 --> 00:10:49,470
Okay.
127

128
00:10:49,470 --> 00:10:55,440
So, we can create a combo class and name it CTA or whatever you want. And then change the alignment
128

129
00:10:55,440 --> 00:10:56,100
to the top.
129

130
00:10:59,650 --> 00:11:04,450
Two things still need to be fixed: the spacing between them and also it's still not nicely aligned
130

131
00:11:04,450 --> 00:11:05,210
on the top.
131

132
00:11:05,260 --> 00:11:10,360
The text is sitting a little too low. So let's take the paragraph and style it a bit. 20 pixel
132

133
00:11:10,360 --> 00:11:15,370
margin on the side, just like we have it in the design. And some negative margin on the top, to move it
133

134
00:11:15,370 --> 00:11:17,890
up and align it nicely with the stars.
134

135
00:11:22,580 --> 00:11:29,850
And also let's give it a maximum width, so the text jumps and cuts where we want. Oops, what happened
135

136
00:11:29,850 --> 00:11:31,770
here? Check the flexbox.
136

137
00:11:31,800 --> 00:11:37,470
Of course, it has Justify applied that pushes them to the sides. To switch it to left align and that's
137

138
00:11:37,470 --> 00:11:37,720
it.
138

139
00:11:48,710 --> 00:11:48,980
Okay.
139

140
00:11:48,990 --> 00:11:53,510
Now, let's add that horizontal divider. Oh wait,
140

141
00:11:53,530 --> 00:11:58,290
there is no such thing as a line in Webflow. Lines in web are made of... as usual...
141

142
00:11:58,420 --> 00:12:07,340
div blocks. Line is just a div that has a 1-pixel height or something small like that. Add a background,
142

143
00:12:10,720 --> 00:12:22,810
black with 15% opacity.
143

144
00:12:23,050 --> 00:12:23,770
Give it a width.
144

145
00:12:32,800 --> 00:12:52,120
And let's add top-bottom margins to space out the content.
145

146
00:12:52,370 --> 00:12:53,100
Easy-peezy!
146

147
00:13:14,620 --> 00:13:19,390
One thing you might have noticed, that sometimes I name classes myself and sometimes I just let
147

148
00:13:19,390 --> 00:13:22,130
Webflow automatically create a class for me.
148

149
00:13:22,320 --> 00:13:27,680
The thing is, we should always name our own classes, but in the beginning that's OK.
149

150
00:13:27,690 --> 00:13:30,990
Right now we're just practising and we're learning Webflow.
150

151
00:13:31,230 --> 00:13:38,550
So we don't want to torture ourselves by new extra decisions that we have to make, on how to name classes
151

152
00:13:38,550 --> 00:13:39,480
and all of that.
152

153
00:13:39,510 --> 00:13:45,420
For now, we're just gonna name important classes like flexbox, or container, or section, something
153

154
00:13:45,420 --> 00:13:50,820
that we're definitely going to use and we need to know what we are naming them. And everything else like
154

155
00:13:50,820 --> 00:13:56,190
these small paragraphs so whatever, we can just let the Webflow automatically decide it for us.
155

156
00:13:56,190 --> 00:13:56,460
OK.
156

157
00:13:56,490 --> 00:13:57,510
So to recap.
157

158
00:13:57,510 --> 00:14:02,850
Actually, there is nothing to recap as we haven't learned new concepts in this video. But we have learned
158

159
00:14:02,850 --> 00:14:08,580
how to use what we already know in different ways. Like adding a negative margin on the image to push
159

160
00:14:08,580 --> 00:14:14,750
it to the side. Or using a 1 pixel height div block to create a line. And a little more practice with
160

161
00:14:14,750 --> 00:14:15,180
flexbox.