0
1
00:00:02,720 --> 00:00:05,350
And we're back to build the content of the hero section.
1

2
00:00:05,370 --> 00:00:06,960
For starters, we need a container right?
2

3
00:00:07,490 --> 00:00:09,560
But not the default container from Webflow.
3

4
00:00:09,560 --> 00:00:10,710
That one is no good.
4

5
00:00:10,710 --> 00:00:12,050
Not very flexible.
5

6
00:00:12,050 --> 00:00:16,760
Instead, we're going to drop a regular div block and give it a container class which we already created
6

7
00:00:16,760 --> 00:00:18,200
last time inside the navbar.
7

8
00:00:19,240 --> 00:00:23,910
Now as you can see this container did take a maximum width, but it didn't center in the middle,
8

9
00:00:23,920 --> 00:00:28,960
unlike the navbar. The reason it didn't center is because we haven't given it any properties that would
9

10
00:00:28,960 --> 00:00:35,410
make it centered. One inside the navbar is centered because Webflow is centering that particular one by using
10

11
00:00:35,410 --> 00:00:36,810
some default settings.
11

12
00:00:36,820 --> 00:00:38,310
So let's center this container.
12

13
00:00:38,320 --> 00:00:44,230
If you remember, this happens by giving auto margin on both sides, auto margins work like a spring.
13

14
00:00:44,320 --> 00:00:51,030
Not the season, but that little iron device. It fills the space and pushes the box to the middle.
14

15
00:00:51,100 --> 00:00:52,240
There is a shortcut to this.
15

16
00:00:52,240 --> 00:00:57,010
You can press this button. And it will center the element in the middle, meaning it will apply auto margin
16

17
00:00:57,010 --> 00:01:02,380
on the sides. But remember, to center something in this way, it has to have a fixed width or max width. If it
17

18
00:01:02,380 --> 00:01:03,610
has no width,
18

19
00:01:03,610 --> 00:01:07,810
the box is going to stretch from edge to edge. So centering won't do anything.
19

20
00:01:08,110 --> 00:01:11,110
All right. Let's put our content inside the container.
20

21
00:01:11,110 --> 00:01:16,150
We've got a heading, a paragraph and a form. We'll style the heading in the paragraph in this video, but
21

22
00:01:16,150 --> 00:01:21,370
we'll do the form in the next. So we can cover forms more in-depth, as we haven't touched them yet.
22

23
00:01:24,210 --> 00:01:33,520
Let's style the heading. Size is 55 and the weight is regular. This is same with other instances of a headline.
23

24
00:01:33,590 --> 00:01:34,860
Everywhere in our design.
24

25
00:01:34,860 --> 00:01:40,260
So it's going to be a good idea, to style this headline as an h1 tag and not just a class.
25

26
00:01:40,340 --> 00:01:45,290
Remember what's the difference between a class and a tag? The tag is a basic HTML element.
26

27
00:01:45,320 --> 00:01:50,020
It's how you tell browser that something is a headline, a paragaph or a div block.
27

28
00:01:50,180 --> 00:01:57,440
If we style an H1 tag directly, we will be able to control all H1 tags on our website without applying
28

29
00:01:57,530 --> 00:01:59,450
any classes to them. To style a tag,
29

30
00:01:59,450 --> 00:02:01,330
make sure no class is selected.
30

31
00:02:01,610 --> 00:02:04,040
So the selector field needs to be empty.
31

32
00:02:04,100 --> 00:02:08,870
Sometimes you'll forget and will style a headline directly. That will automatically create a new class.
32

33
00:02:08,870 --> 00:02:12,170
So any changes will apply only to that class.
33

34
00:02:12,200 --> 00:02:15,260
To fix this, just remove the class and start over.
34

35
00:02:15,260 --> 00:02:18,410
Then select all H1 headings from the dropdown.
35

36
00:02:18,410 --> 00:02:20,070
Now you're styling the H1 tag.
36

37
00:02:20,150 --> 00:02:21,430
That's exactly what we want.
37

38
00:02:25,580 --> 00:02:27,310
We need the line height value.
38

39
00:02:27,320 --> 00:02:32,460
We have a little trick for this. Do you remember? We can see the line-height inside the code tab in Figma.
39

40
00:02:32,660 --> 00:02:34,310
Which is 67 pixels.
40

41
00:02:39,810 --> 00:02:40,190
All right.
41

42
00:02:40,220 --> 00:02:42,420
I'm not going to set this to white color.
42

43
00:02:42,440 --> 00:02:42,980
Do you know why?
43

44
00:02:43,310 --> 00:02:45,940
Because most of our headlines are not going to be white.
44

45
00:02:45,950 --> 00:02:49,040
They are going to be that dark blue color.
45

46
00:02:49,040 --> 00:02:54,950
So instead, let's set that dark blue color here and then we'll find another way to change this particular
46

47
00:02:54,950 --> 00:02:56,240
one to white.
47

48
00:02:56,270 --> 00:02:58,840
I'm going to copy the color code from the codes tab.
48

49
00:02:58,910 --> 00:02:59,770
It's easier that way.
49

50
00:02:59,770 --> 00:03:03,530
Otherwise, it doesn't show right of the bat, as we've set this color as a style.
50

51
00:03:09,470 --> 00:03:09,950
Excellent.
51

52
00:03:09,950 --> 00:03:13,250
I'm also going to save this blue as a global color.
52

53
00:03:13,250 --> 00:03:18,920
Global colors work sort of like tags, so we can control and edit them from one single instance.
53

54
00:03:22,250 --> 00:03:24,910
The H1 tag is ready. If we add a new headline,
54

55
00:03:24,940 --> 00:03:26,980
now it will carry the headline styles.
55

56
00:03:30,210 --> 00:03:34,860
So how about that white color for the hero headline? That one we can simply add a new class to it and
56

57
00:03:34,890 --> 00:03:36,720
then style it into white.
57

58
00:03:36,720 --> 00:03:38,310
I'd like to add a class name white
58

59
00:03:38,310 --> 00:03:44,010
in this case. If the color is only thing I'm changing. That way the class is clear what it does and I
59

60
00:03:44,010 --> 00:03:49,580
can reuse this class every time I need a white headline. Or any other white text for that matter.
60

61
00:03:49,620 --> 00:03:55,140
By the way, many common color names work inside this field, so you can just type them out. Like white, or
61

62
00:03:55,140 --> 00:03:58,170
black, pink and so on.
62

63
00:04:01,480 --> 00:04:06,790
One more thing I'd like to change is the top margin. There is a default top margin of 20 pixels on H1
63

64
00:04:06,800 --> 00:04:07,650
tags.
64

65
00:04:07,720 --> 00:04:11,560
That's going to add extra space to our spacing between sections.
65

66
00:04:11,680 --> 00:04:13,170
So, let's just get rid of it.
66

67
00:04:13,210 --> 00:04:14,050
If we ever need it,
67

68
00:04:14,050 --> 00:04:22,660
we can always add it to the particular headline.
68

69
00:04:22,710 --> 00:04:27,450
As for the paragraph, we're not going to style the tag, we're going to style the class instead. Because
69

70
00:04:27,450 --> 00:04:32,400
the paragraph in the Heroe section is different, compared to other paragraphs elsewhere on the
70

71
00:04:32,400 --> 00:04:33,370
page.
71

72
00:05:06,810 --> 00:05:10,260
Lastly, let's position the hero content properly in the middle.
72

73
00:05:10,260 --> 00:05:15,370
That's as simple as adding a margin on top. But we don't want to add a margin on the container.
73

74
00:05:15,360 --> 00:05:20,070
We're going to reuse that container class across our page and we already have it in the navbar.
74

75
00:05:20,070 --> 00:05:24,050
So adding a margin on top will alter all the instances of this container.
75

76
00:05:24,060 --> 00:05:26,150
There are two ways we can go about this.
76

77
00:05:26,190 --> 00:05:29,920
We could add a combo class to the container and then add the margin.
77

78
00:05:29,940 --> 00:05:34,980
This way our base container will be intact. But a little better option is to add an extra box and put
78

79
00:05:34,980 --> 00:05:36,540
the container in inside.
79

80
00:05:36,540 --> 00:05:38,850
Then we can style that box as we want.
80

81
00:05:38,850 --> 00:05:43,810
I prefer this option because it's a little cleaner and offers more flexibility down the line. Add a new
81

82
00:05:43,920 --> 00:05:48,750
div block and just drag the elements inside. You might find it easier to do this from the navigator.
82

83
00:05:54,830 --> 00:06:00,590
Let's name this div block something like hero content. And add a similar margin that we have in the designs.
83

84
00:06:13,890 --> 00:06:18,510
And let's give it a max-width, so it's contained nicely like in our designs.
84

85
00:06:25,720 --> 00:06:29,740
See, using the separate div block already gave us more flexibility, what we can do with it.
85

86
00:06:32,570 --> 00:06:32,980
Excellent.
86

87
00:06:32,990 --> 00:06:35,950
Let's check the responsiveness. Oopsie.
87

88
00:06:35,960 --> 00:06:39,090
We need some space on the sides. Just like we did with the navbar.
88

89
00:06:39,200 --> 00:06:41,030
We can add the padding to the hero box.
89

90
00:06:45,140 --> 00:06:45,920
But wait a second.
90

91
00:06:45,920 --> 00:06:50,130
This doesn't look right. The navbar now has moved even tighter inside.
91

92
00:06:50,150 --> 00:06:55,430
That's because we have a padding on the navbar. And navigation bar is sitting inside the hero block.
92

93
00:06:55,760 --> 00:07:00,760
So there is double the amount of padding. Making it total of 120 pixels.
93

94
00:07:00,800 --> 00:07:05,220
So, let's remove the padding from the navigation bar, because we don't need it anymore.
94

95
00:07:05,240 --> 00:07:07,420
The one from the hero will take care of it.
95

96
00:07:07,460 --> 00:07:11,110
You can easily reset any of the styles by clicking here.
96

97
00:07:11,120 --> 00:07:15,140
I usually use a shortcut which is Option+Click.
97

98
00:07:15,140 --> 00:07:18,290
I think it should be Alt+Click for the windows.
98

99
00:07:18,320 --> 00:07:19,790
Perfect now it's all looking sharp.
99

100
00:07:19,790 --> 00:07:22,130
We just have a forum left. Which we're going to do.
100

101
00:07:22,130 --> 00:07:22,600
Up next.