And we're back to build the content of the hero section. 1
For starters, we need a container right? 2
But not the default container from Webflow. 3
That one is no good. 4
Not very flexible. 5
Instead, we're going to drop a regular div block and give it a container class which we already created 6
last time inside the navbar. 7
Now as you can see this container did take a maximum width, but it didn't center in the middle, 8
unlike the navbar. The reason it didn't center is because we haven't given it any properties that would 9
make it centered. One inside the navbar is centered because Webflow is centering that particular one by using 10
some default settings. 11
So let's center this container. 12
If you remember, this happens by giving auto margin on both sides, auto margins work like a spring. 13
Not the season, but that little iron device. It fills the space and pushes the box to the middle. 14
There is a shortcut to this. 15
You can press this button. And it will center the element in the middle, meaning it will apply auto margin 16
on the sides. But remember, to center something in this way, it has to have a fixed width or max width. If it 17
has no width, 18
the box is going to stretch from edge to edge. So centering won't do anything. 19
All right. Let's put our content inside the container. 20
We've got a heading, a paragraph and a form. We'll style the heading in the paragraph in this video, but 21
we'll do the form in the next. So we can cover forms more in-depth, as we haven't touched them yet. 22
Let's style the heading. Size is 55 and the weight is regular. This is same with other instances of a headline. 23
Everywhere in our design. 24
So it's going to be a good idea, to style this headline as an h1 tag and not just a class. 25
Remember what's the difference between a class and a tag? The tag is a basic HTML element. 26
It's how you tell browser that something is a headline, a paragaph or a div block. 27
If we style an H1 tag directly, we will be able to control all H1 tags on our website without applying 28
any classes to them. To style a tag, 29
make sure no class is selected. 30
So the selector field needs to be empty. 31
Sometimes you'll forget and will style a headline directly. That will automatically create a new class. 32
So any changes will apply only to that class. 33
To fix this, just remove the class and start over. 34
Then select all H1 headings from the dropdown. 35
Now you're styling the H1 tag. 36
That's exactly what we want. 37
We need the line height value. 38
We have a little trick for this. Do you remember? We can see the line-height inside the code tab in Figma. 39
Which is 67 pixels. 40
All right. 41
I'm not going to set this to white color. 42
Do you know why? 43
Because most of our headlines are not going to be white. 44
They are going to be that dark blue color. 45
So instead, let's set that dark blue color here and then we'll find another way to change this particular 46
one to white. 47
I'm going to copy the color code from the codes tab. 48
It's easier that way. 49
Otherwise, it doesn't show right of the bat, as we've set this color as a style. 50
Excellent. 51
I'm also going to save this blue as a global color. 52
Global colors work sort of like tags, so we can control and edit them from one single instance. 53
The H1 tag is ready. If we add a new headline, 54
now it will carry the headline styles. 55
So how about that white color for the hero headline? That one we can simply add a new class to it and 56
then style it into white. 57
I'd like to add a class name white 58
in this case. If the color is only thing I'm changing. That way the class is clear what it does and I 59
can reuse this class every time I need a white headline. Or any other white text for that matter. 60
By the way, many common color names work inside this field, so you can just type them out. Like white, or 61
black, pink and so on. 62
One more thing I'd like to change is the top margin. There is a default top margin of 20 pixels on H1 63
tags. 64
That's going to add extra space to our spacing between sections. 65
So, let's just get rid of it. 66
If we ever need it, 67
we can always add it to the particular headline. 68
As for the paragraph, we're not going to style the tag, we're going to style the class instead. Because 69
the paragraph in the Heroe section is different, compared to other paragraphs elsewhere on the 70
page. 71
Lastly, let's position the hero content properly in the middle. 72
That's as simple as adding a margin on top. But we don't want to add a margin on the container. 73
We're going to reuse that container class across our page and we already have it in the navbar. 74
So adding a margin on top will alter all the instances of this container. 75
There are two ways we can go about this. 76
We could add a combo class to the container and then add the margin. 77
This way our base container will be intact. But a little better option is to add an extra box and put 78
the container in inside. 79
Then we can style that box as we want. 80
I prefer this option because it's a little cleaner and offers more flexibility down the line. Add a new 81
div block and just drag the elements inside. You might find it easier to do this from the navigator. 82
Let's name this div block something like hero content. And add a similar margin that we have in the designs. 83
And let's give it a max-width, so it's contained nicely like in our designs. 84
See, using the separate div block already gave us more flexibility, what we can do with it. 85
Excellent. 86
Let's check the responsiveness. Oopsie. 87
We need some space on the sides. Just like we did with the navbar. 88
We can add the padding to the hero box. 89
But wait a second. 90
This doesn't look right. The navbar now has moved even tighter inside. 91
That's because we have a padding on the navbar. And navigation bar is sitting inside the hero block. 92
So there is double the amount of padding. Making it total of 120 pixels. 93
So, let's remove the padding from the navigation bar, because we don't need it anymore. 94
The one from the hero will take care of it. 95
You can easily reset any of the styles by clicking here. 96
I usually use a shortcut which is Option+Click. 97
I think it should be Alt+Click for the windows. 98
Perfect now it's all looking sharp. 99
We just have a forum left. Which we're going to do. 100
Up next.