0
1
00:00:02,760 --> 00:00:07,230
In this video, we're going to start building our blog post page. To access this page,
1

2
00:00:07,240 --> 00:00:11,970
you go to the pages panel and on the bottom, you have this page with the purple icon.
2

3
00:00:11,970 --> 00:00:17,800
That's the one. I've previously added all this content here, but I'm gonna completely get rid of it
3

4
00:00:17,800 --> 00:00:18,900
and start from scratch.
4

5
00:00:21,610 --> 00:00:24,820
So based on our designs, first thing we need is a navigation bar.
5

6
00:00:24,820 --> 00:00:26,350
We're not going to build it from scratch
6

7
00:00:26,350 --> 00:00:30,190
obviously. We will copy it from our home page and take it from there.
7

8
00:00:30,400 --> 00:00:34,290
So, switch back to the home page, select the entire navbar element.
8

9
00:00:34,360 --> 00:00:39,550
Make sure you're selecting the whole thing and not just the container. Click CTRL+C. Then go back to the
9

10
00:00:39,550 --> 00:00:46,140
blog page. And paste it there. When you paste an object click on the canvas first or you'll get this
10

11
00:00:46,140 --> 00:00:52,300
error message. Webflow needs to know where exactly are you pasting your element.
11

12
00:00:52,300 --> 00:00:52,900
There we go.
12

13
00:00:52,900 --> 00:00:55,930
Well, nothing's visible right now. Because our navbar is white.
13

14
00:00:55,930 --> 00:01:01,150
So let's just style the elements inside our navbar, just like in our designs. Starting with links. Right
14

15
00:01:01,180 --> 00:01:02,040
now they're white.
15

16
00:01:02,050 --> 00:01:07,730
So, we need to have them dark. To do so, we need to apply a combo class first and then style it.
16

17
00:01:07,750 --> 00:01:10,980
Otherwise, it's going to change the original too on the home page.
17

18
00:01:21,280 --> 00:01:28,790
And then apply the combo class to the rest of the links.
18

19
00:01:28,820 --> 00:01:31,730
Same for the nav button, we need an extra combo class.
19

20
00:01:31,730 --> 00:01:35,510
I know, I usually recommend to not have more than one, but it's okay
20

21
00:01:35,510 --> 00:01:39,050
every once in a while. From technological standpoint, there is nothing wrong with it.
21

22
00:01:39,050 --> 00:01:44,180
It's just for us, so that things don't get confusing and cluttered. The button's background is our primary
22

23
00:01:44,180 --> 00:02:03,070
blue with 15% opacity, you can see that in Figma.
23

24
00:02:05,410 --> 00:02:08,830
Lastly the logo. Which we need to export from Figma.
24

25
00:02:36,320 --> 00:02:41,800
Let's check the responsiveness. It's glued to the edges. On our home page
25

26
00:02:41,810 --> 00:02:47,540
navbar is sitting inside the hero section, which has padding. That's why it's not glued to the edges there.
26

27
00:02:47,570 --> 00:02:49,630
But here it's outside of the section.
27

28
00:02:49,700 --> 00:02:54,800
We could put it inside the section here too, but a better option is to just create a combo class for
28

29
00:02:54,800 --> 00:02:56,900
the navbar and add padding directly on it.
29

30
00:03:03,360 --> 00:03:05,460
And that's all, the navigation bar is ready.
30

31
00:03:08,330 --> 00:03:10,250
Moving on to the rest of the block page.
31

32
00:03:10,250 --> 00:03:13,030
We have a headline, image, the content.
32

33
00:03:13,430 --> 00:03:16,370
As usual, we're going to start with a section and a container.
33

34
00:03:29,570 --> 00:03:30,690
The section is gray.
34

35
00:03:30,700 --> 00:03:32,790
That's what we are using on a home page.
35

36
00:03:32,800 --> 00:03:35,800
But for the blog post, we've decided to go with plain white.
36

37
00:03:35,800 --> 00:03:38,970
The thing with the blog post is that you want maximum readability.
37

38
00:03:39,040 --> 00:03:40,200
It's a lengthy content.
38

39
00:03:40,210 --> 00:03:45,400
And if the contrast isn't enough or there is some sort of decreased readability for some other reason,
39

40
00:03:45,400 --> 00:03:50,830
is really going to hurt us. Making a white section is simple, just a new combo class and that's all.
40

41
00:03:50,830 --> 00:03:56,590
Make sure to use some other name, preferably something specific to the base class, like "white section".
41

42
00:03:56,710 --> 00:04:06,930
That says a lot more than just "white". And we make sure it doesn't conflict with any other class.
42

43
00:04:07,110 --> 00:04:11,710
All right now let's add a headline.
43

44
00:04:11,860 --> 00:04:13,720
We already know what to do with this headline, right?
44

45
00:04:13,720 --> 00:04:18,830
We're going to bind it to the CMS item. Excellent.
45

46
00:04:19,210 --> 00:04:22,320
The boundaries of our blog posts in the designs is a little different.
46

47
00:04:22,330 --> 00:04:28,690
We're using a more narrow layout. With a maximum width of 700 pixels. And the maximum width of our generic
47

48
00:04:28,690 --> 00:04:32,140
container here is 1160 pixels.
48

49
00:04:32,140 --> 00:04:35,680
That means, we need to create a different container for our blog post.
49

50
00:04:35,680 --> 00:04:49,180
So, let's give it a combo class or maybe even duplicate the class and give it a maximum width of 700 pixels.
50

51
00:04:49,190 --> 00:04:49,510
All right.
51

52
00:04:49,520 --> 00:04:50,390
That's looking good.
52

53
00:04:50,390 --> 00:04:54,590
Next, we have author and date segment. But we're going to do that in the next video.
53

54
00:04:54,590 --> 00:04:55,190
Stick around.