And we're back. In this video, 1
we're going to do a small part of the following section, just the content. 2
Remember what we did in the previous website? 3
We have created a generic section block. 4
We gave it some default paddings and that was it. Just like we did with the container element. Having 5
such a generic section gives us a nice control over the website layout. 6
So let's drop a new section, give it a class. Give it some padding both vertically and horizontally. 7
We did 60 pixels on the sides, on the navbar, so let's repeat that. For the vertical padding, 8
let's use 80, because in our designs we're often using 160 pixel spacing between the sections, and 80 pixels 9
on top and bottom, will add up to 160. 10
I don't have a strict rule on what sort of padding to use. Depending on a website, 11
this can change and most of the time I'm just eyeing the thing. 12
And now let's drop another div block inside and apply the existing class container. 13
In the designs, we have off-white, a little blue greyish kind of background color on the page. 14
We've done that, so we could have better contrast on white cards that we put on the page. 15
Let's apply that background to the generic section. 16
The headline is already in the right style, because we've styled the H1 tag previously. 17
We haven't done that for the paragraphs. 18
So let's do the same. Meaning let's style a paragraph tag, 19
so all our generic paragraph texts are styled without adding any classes to it. To do this, first select 20
the paragraph, then go to the selector field and select All Paragraphs. 21
All right. 22
Now let's just style it as usual. 18 pixels in size, 26 pixels in line-height and grab the color code from 23
there. 24
Excellent. 25
Now for the Learn More link, 26
there are two elements here. Text and the Arrow icon. 27
There is a way to actually insert an arrow as a text, like a symbol. But I'm planning to animate this arrow 28
in the future and in that case we'll need an arrow to be a separate object. 29
So we have a text and an image element. Let's add a text link. 30
Just like with heading and paragraph, 31
we are also able to style the All Links tag. 32
So instead of the generic blue, we're going to change it to our own blue. 33
And all the links 34
now will have that particular color. 35
Now if we hyperlink text anywhere else, it will inherit the color from that links tag. But we cannot change 36
too much on links tag. Like text size for example, because links live in other places like paragraphs 37
buttons and so on. 38
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
headline, or inside a caption, or a different type of text, then all of them are gonna become 16. 40
For example, like this: 41
so everything else that we need to style with a link, let's style a class and not the tag. 42
To remove the underline from the link, just go to text decoration and press on none. 43
Okay. 44
Now we need an arrow, which is just an image element. 45
Let's export the arrow image from Figma and insert it here. 46
Export as SVG. 47
That's best for such images. 48
There is a 4 pixel space before the arrow. And also it's not exactly aligned with the text. 49
So let's add a negative margin on top. 50
Minus 2 pixels seems enough. 51
OK. 52
That's all good, but there is one issue. 53
If you check in the preview, you'll see that text is a link. 54
You can see this by a cursor changing from a pointer arrow into a hand. But the arrow icon is not 55
part of that link. 56
It's separate object. 57
This is not the best arrangement. 58
Ideally, we want the arrow to be clickable and part of the link too. There is a very simple solution for 59
this. 60
We just need to place both of these elements inside a link block. To refresh your memory, we have 2 61
link elements inside the panel. 62
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
So anything we put inside will be part of that one link. 64
So we add the link block and then drag those elements inside that block. But we can't actually drag the 65
link element inside, because that's not allowed. 66
Instead we need to add a regular text block. 67
As you can see, the moment we put text inside the link block, it becomes blue. 68
That's because that link block is part of that 69
all links tag, that we just styled. And let's add that class to that text. 70
The underline is supposed to disappear but it doesn't. 71
We have to remove the undrline from the link block itself. 72
I took a very weird route to demonstrate this implementation of the link. But the reason I did this way 73
is, because it would have been a natural way for you to think, 74
and it's going to be natural way for you to go through this process. Because when you want to add a new 75
link, you're gonna go, 76
"Okay let me add a text link". Right? 77
And then you're gonna have to add maybe an icon to the button or whatever it is, and you're gonna think 78
"Oh wait how do I do that? 79
now, this icon isn't clickable." And you might get stuck, because, you know, you need to figure it out. 80
So that's why I wanted to take that sort of mistaken route. 81
So then we can understand exactly how to get... 82
come back and redo everything in a way that we actually want to. Because you will come across to these 83
sort of scenarios when you want to build something, you go with a natural way that you assume it's gonna 84
work and then it doesn't, and you get stuck and you kind of go back and then redo somethings a little. 85
This sort of trial and error and going through the bumpy roads of learning this, is going to be the 86
best way for you to understand this concept. 87
Now whenever you're doing this on your own and building websites on their own, there is one place you 88
can always go to find answers and that's Webflow forum and their community. 89
They are excellent community. 90
People respond there, even Webflow has people who work for that community and for the forum. And they 91
give answers there as well. But also other Webflow designers like me and everyone else, they are kinda 92
contributing and answering questions. 93
So if you are stuck somewhere, 94
Google it and look on Webflow forums. Because often other people and other web designers had the 95
same question as you. 96
So you might find answers there already. 97
If not, ask yourself, and you will definitely get somebody helping you out and gauging you through and 98
giving you answers. And you will find the link to the webflow forum inside the resources page. 99
So go check it out. 100
All right. 101
Lastly, we need to place these two elements side by side. 102
We have two options. One is to use a flexbox, but second and easier option is to change the display property 103
of the text. 104
Right now it's block. Block means it will stretch and occupy the entire line of the parent. 105
That's why arrow is forced to jump to the second line. 106
But if we change it to inline block, or inline then arrow will come back up. 107
The arrow is an image element and image elements by default are already set to inline block. 108
So, that's why we don't need to change it. 109
Let's add the space on top of this Learn more 110
link. 111
All right. 112
Now if we check the preview mode, the arrow is going to be part of the link too. And that's exactly what 113
we need. 114
Finally, we need to give this content a maximum width, so it's not stretching through the entire container. 115
We're not going to touch the container, of course. We'll drop another div block and move all the content 116
inside that. 117
Let's give it a maximum width of our 464 pixels, which is just like in our designs. 118
And there you go. 119
That's much better. 120
That's all for now. 121
We'll add the image in the next video. 122
Stick around.