0
1
00:00:02,660 --> 00:00:04,460
And we're back. In this video,
1

2
00:00:04,460 --> 00:00:09,000
we're going to do a small part of the following section, just the content.
2

3
00:00:09,080 --> 00:00:10,980
Remember what we did in the previous website?
3

4
00:00:10,990 --> 00:00:13,740
We have created a generic section block.
4

5
00:00:13,760 --> 00:00:19,550
We gave it some default paddings and that was it. Just like we did with the container element. Having
5

6
00:00:19,550 --> 00:00:23,810
such a generic section gives us a nice control over the website layout.
6

7
00:00:23,840 --> 00:00:32,460
So let's drop a new section, give it a class. Give it some padding both vertically and horizontally.
7

8
00:00:32,480 --> 00:00:40,170
We did 60 pixels on the sides, on the navbar, so let's repeat that. For the vertical padding,
8

9
00:00:40,170 --> 00:00:46,440
let's use 80, because in our designs we're often using 160 pixel spacing between the sections, and 80 pixels
9

10
00:00:46,440 --> 00:00:49,760
on top and bottom, will add up to 160.
10

11
00:00:49,770 --> 00:00:53,310
I don't have a strict rule on what sort of padding to use. Depending on a website,
11

12
00:00:53,310 --> 00:00:56,540
this can change and most of the time I'm just eyeing the thing.
12

13
00:00:56,580 --> 00:01:00,800
And now let's drop another div block inside and apply the existing class container.
13

14
00:01:06,560 --> 00:01:11,640
In the designs, we have off-white, a little blue greyish kind of background color on the page.
14

15
00:01:11,640 --> 00:01:16,270
We've done that, so we could have better contrast on white cards that we put on the page.
15

16
00:01:16,290 --> 00:01:35,690
Let's apply that background to the generic section.
16

17
00:01:36,640 --> 00:01:41,320
The headline is already in the right style, because we've styled the H1 tag previously.
17

18
00:01:41,500 --> 00:01:43,370
We haven't done that for the paragraphs.
18

19
00:01:43,400 --> 00:01:47,050
So let's do the same. Meaning let's style a paragraph tag,
19

20
00:01:47,290 --> 00:01:55,900
so all our generic paragraph texts are styled without adding any classes to it. To do this, first select
20

21
00:01:55,900 --> 00:02:01,780
the paragraph, then go to the selector field and select All Paragraphs.
21

22
00:02:01,780 --> 00:02:02,110
All right.
22

23
00:02:02,110 --> 00:02:09,550
Now let's just style it as usual. 18 pixels in size, 26 pixels in line-height and grab the color code from
23

24
00:02:09,550 --> 00:02:09,940
there.
24

25
00:02:13,510 --> 00:02:14,050
Excellent.
25

26
00:02:18,340 --> 00:02:19,740
Now for the Learn More link,
26

27
00:02:19,750 --> 00:02:22,920
there are two elements here. Text and the Arrow icon.
27

28
00:02:23,030 --> 00:02:28,270
There is a way to actually insert an arrow as a text, like a symbol. But I'm planning to animate this arrow
28

29
00:02:28,270 --> 00:02:32,690
in the future and in that case we'll need an arrow to be a separate object.
29

30
00:02:32,740 --> 00:02:36,520
So we have a text and an image element. Let's add a text link.
30

31
00:02:47,110 --> 00:02:48,850
Just like with heading and paragraph,
31

32
00:02:48,850 --> 00:02:51,370
we are also able to style the All Links tag.
32

33
00:02:51,400 --> 00:02:56,050
So instead of the generic blue, we're going to change it to our own blue.
33

34
00:02:59,140 --> 00:03:00,220
And all the links
34

35
00:03:00,220 --> 00:03:02,570
now will have that particular color.
35

36
00:03:02,590 --> 00:03:08,380
Now if we hyperlink text anywhere else, it will inherit the color from that links tag. But we cannot change
36

37
00:03:08,380 --> 00:03:15,130
too much on links tag. Like text size for example, because links live in other places like paragraphs
37

38
00:03:15,160 --> 00:03:16,450
buttons and so on.
38

39
00:03:16,510 --> 00:03:22,120
So if we style it and if we give it, all links to be like 16 pixels, then if we link something inside the
39

40
00:03:22,120 --> 00:03:28,750
headline, or inside a caption, or a different type of text, then all of them are gonna become 16.
40

41
00:03:28,750 --> 00:03:29,820
For example, like this:
41

42
00:03:33,100 --> 00:03:37,520
so everything else that we need to style with a link, let's style a class and not the tag.
42

43
00:03:40,740 --> 00:03:45,450
To remove the underline from the link, just go to text decoration and press on none.
43

44
00:03:49,240 --> 00:03:49,490
Okay.
44

45
00:03:49,500 --> 00:03:52,470
Now we need an arrow, which is just an image element.
45

46
00:03:52,470 --> 00:03:55,580
Let's export the arrow image from Figma and insert it here.
46

47
00:03:55,800 --> 00:03:56,970
Export as SVG.
47

48
00:03:56,970 --> 00:04:00,630
That's best for such images.
48

49
00:04:27,760 --> 00:04:32,690
There is a 4 pixel space before the arrow. And also it's not exactly aligned with the text.
49

50
00:04:32,690 --> 00:04:35,110
So let's add a negative margin on top.
50

51
00:04:39,970 --> 00:04:45,510
Minus 2 pixels seems enough.
51

52
00:05:05,300 --> 00:05:05,880
OK.
52

53
00:05:05,910 --> 00:05:07,680
That's all good, but there is one issue.
53

54
00:05:07,710 --> 00:05:11,090
If you check in the preview, you'll see that text is a link.
54

55
00:05:11,100 --> 00:05:16,720
You can see this by a cursor changing from a pointer arrow into a hand. But the arrow icon is not
55

56
00:05:16,730 --> 00:05:17,940
part of that link.
56

57
00:05:17,970 --> 00:05:20,460
It's separate object.
57

58
00:05:20,480 --> 00:05:22,040
This is not the best arrangement.
58

59
00:05:22,040 --> 00:05:28,250
Ideally, we want the arrow to be clickable and part of the link too. There is a very simple solution for
59

60
00:05:28,250 --> 00:05:28,720
this.
60

61
00:05:28,730 --> 00:05:34,480
We just need to place both of these elements inside a link block. To refresh your memory, we have 2
61

62
00:05:34,480 --> 00:05:35,900
link elements inside the panel.
62

63
00:05:35,900 --> 00:05:42,240
One is a regular text link and another one is a link block. A link block is like a div block, but it's a link.
63

64
00:05:42,290 --> 00:05:45,190
So anything we put inside will be part of that one link.
64

65
00:05:45,260 --> 00:05:50,840
So we add the link block and then drag those elements inside that block. But we can't actually drag the
65

66
00:05:50,840 --> 00:05:53,510
link element inside, because that's not allowed.
66

67
00:05:53,510 --> 00:05:56,390
Instead we need to add a regular text block.
67

68
00:06:01,140 --> 00:06:05,250
As you can see, the moment we put text inside the link block, it becomes blue.
68

69
00:06:05,250 --> 00:06:08,070
That's because that link block is part of that
69

70
00:06:08,250 --> 00:06:14,820
all links tag, that we just styled. And let's add that class to that text.
70

71
00:06:29,870 --> 00:06:32,410
The underline is supposed to disappear but it doesn't.
71

72
00:06:32,470 --> 00:06:35,380
We have to remove the undrline from the link block itself.
72

73
00:06:37,350 --> 00:06:43,350
I took a very weird route to demonstrate this implementation of the link. But the reason I did this way
73

74
00:06:43,350 --> 00:06:47,690
is, because it would have been a natural way for you to think,
74

75
00:06:47,760 --> 00:06:52,440
and it's going to be natural way for you to go through this process. Because when you want to add a new
75

76
00:06:52,440 --> 00:06:53,220
link, you're gonna go,
76

77
00:06:53,250 --> 00:06:55,290
"Okay let me add a text link". Right?
77

78
00:06:55,410 --> 00:07:00,970
And then you're gonna have to add maybe an icon to the button or whatever it is, and you're gonna think
78

79
00:07:00,990 --> 00:07:01,980
"Oh wait how do I do that?
79

80
00:07:01,980 --> 00:07:07,470
now, this icon isn't clickable." And you might get stuck, because, you know, you need to figure it out.
80

81
00:07:07,680 --> 00:07:10,550
So that's why I wanted to take that sort of mistaken route.
81

82
00:07:10,560 --> 00:07:14,090
So then we can understand exactly how to get...
82

83
00:07:14,130 --> 00:07:20,160
come back and redo everything in a way that we actually want to. Because you will come across to these
83

84
00:07:20,160 --> 00:07:25,890
sort of scenarios when you want to build something, you go with a natural way that you assume it's gonna
84

85
00:07:25,890 --> 00:07:30,420
work and then it doesn't, and you get stuck and you kind of go back and then redo somethings a little.
85

86
00:07:30,440 --> 00:07:35,010
This sort of trial and error and going through the bumpy roads of learning this, is going to be the
86

87
00:07:35,010 --> 00:07:36,810
best way for you to understand this concept.
87

88
00:07:36,810 --> 00:07:41,460
Now whenever you're doing this on your own and building websites on their own, there is one place you
88

89
00:07:41,460 --> 00:07:46,400
can always go to find answers and that's Webflow forum and their community.
89

90
00:07:46,410 --> 00:07:47,790
They are excellent community.
90

91
00:07:47,790 --> 00:07:54,240
People respond there, even Webflow has people who work for that community and for the forum. And they
91

92
00:07:54,240 --> 00:07:59,150
give answers there as well. But also other Webflow designers like me and everyone else, they are kinda
92

93
00:07:59,150 --> 00:08:01,390
contributing and answering questions.
93

94
00:08:01,410 --> 00:08:03,390
So if you are stuck somewhere,
94

95
00:08:03,390 --> 00:08:09,630
Google it and look on Webflow forums. Because often other people and other web designers had the
95

96
00:08:09,630 --> 00:08:10,740
same question as you.
96

97
00:08:10,770 --> 00:08:12,980
So you might find answers there already.
97

98
00:08:13,020 --> 00:08:18,390
If not, ask yourself, and you will definitely get somebody helping you out and gauging you through and
98

99
00:08:18,750 --> 00:08:23,460
giving you answers. And you will find the link to the webflow forum inside the resources page.
99

100
00:08:23,490 --> 00:08:24,720
So go check it out.
100

101
00:08:24,720 --> 00:08:25,050
All right.
101

102
00:08:25,050 --> 00:08:28,850
Lastly, we need to place these two elements side by side.
102

103
00:08:28,860 --> 00:08:33,840
We have two options. One is to use a flexbox, but second and easier option is to change the display property
103

104
00:08:33,840 --> 00:08:34,700
of the text.
104

105
00:08:34,710 --> 00:08:39,750
Right now it's block. Block means it will stretch and occupy the entire line of the parent.
105

106
00:08:39,750 --> 00:08:42,670
That's why arrow is forced to jump to the second line.
106

107
00:08:42,780 --> 00:08:47,250
But if we change it to inline block, or inline then arrow will come back up.
107

108
00:08:47,250 --> 00:08:51,550
The arrow is an image element and image elements by default are already set to inline block.
108

109
00:08:51,570 --> 00:08:53,160
So, that's why we don't need to change it.
109

110
00:08:53,160 --> 00:08:55,460
Let's add the space on top of this Learn more
110

111
00:08:55,460 --> 00:08:55,940
link.
111

112
00:09:01,150 --> 00:09:01,440
All right.
112

113
00:09:01,450 --> 00:09:08,010
Now if we check the preview mode, the arrow is going to be part of the link too. And that's exactly what
113

114
00:09:08,010 --> 00:09:08,670
we need.
114

115
00:09:08,670 --> 00:09:20,200
Finally, we need to give this content a maximum width, so it's not stretching through the entire container.
115

116
00:09:20,240 --> 00:09:25,310
We're not going to touch the container, of course. We'll drop another div block and move all the content
116

117
00:09:25,340 --> 00:09:26,060
inside that.
117

118
00:09:38,250 --> 00:09:44,520
Let's give it a maximum width of our 464 pixels, which is just like in our designs.
118

119
00:09:44,520 --> 00:09:45,360
And there you go.
119

120
00:09:45,390 --> 00:09:46,460
That's much better.
120

121
00:09:46,530 --> 00:09:47,310
That's all for now.
121

122
00:09:47,320 --> 00:09:48,960
We'll add the image in the next video.
122

123
00:09:48,970 --> 00:09:49,530
Stick around.