1
00:00:01,000 --> 00:00:04,000
So let's continue working on our layout,

2
00:00:04,000 --> 00:00:06,000
the navigation, the logo.

3
00:00:06,000 --> 00:00:09,000
And for that, let's add some styling.

4
00:00:09,000 --> 00:00:11,000
Again for this, attached,

5
00:00:11,000 --> 00:00:14,000
you find a couple of CSS files.

6
00:00:14,000 --> 00:00:17,000
You find a logo.module.CSS file,

7
00:00:17,000 --> 00:00:21,000
and a main navigation.module.CSS file.

8
00:00:21,000 --> 00:00:23,000
And you should download those,

9
00:00:23,000 --> 00:00:25,000
and add them in your layout folder,

10
00:00:25,000 --> 00:00:27,000
next to the logo JS

11
00:00:27,000 --> 00:00:30,000
and main navigation JS file.

12
00:00:31,000 --> 00:00:34,000
Again, there I'd find some CSS styles for you,

13
00:00:34,000 --> 00:00:37,000
which you can of course, tweak and override.

14
00:00:37,000 --> 00:00:40,000
And in the main navigation JS file,

15
00:00:40,000 --> 00:00:44,000
we can now utilize these CSS files.

16
00:00:44,000 --> 00:00:46,000
We can import classes,

17
00:00:46,000 --> 00:00:51,000
from main dash navigation.module.CSS

18
00:00:51,000 --> 00:00:54,000
to take advantage of CSS modules,

19
00:00:54,000 --> 00:00:56,000
and import the classes that belong

20
00:00:56,000 --> 00:00:59,000
to this component, from the CSS file.

21
00:01:00,000 --> 00:01:02,000
And then, we can add them,

22
00:01:02,000 --> 00:01:04,000
for example, on the header,

23
00:01:04,000 --> 00:01:08,000
we should add a class name of classes.header,

24
00:01:08,000 --> 00:01:10,000
which sets up the styling for this header.

25
00:01:10,000 --> 00:01:13,000
And that is actually the only class we have

26
00:01:13,000 --> 00:01:15,000
to add in the main navigation component,

27
00:01:15,000 --> 00:01:19,000
because, all the Abra selectors are just,

28
00:01:19,000 --> 00:01:22,000
nested selectors then, so to say.

29
00:01:23,000 --> 00:01:26,000
That then allows us to work on the logo.

30
00:01:26,000 --> 00:01:27,000
We can already import it.

31
00:01:27,000 --> 00:01:30,000
So let's add an import to,

32
00:01:30,000 --> 00:01:33,000
of logo, from the logo file,

33
00:01:33,000 --> 00:01:34,000
and then let's work

34
00:01:34,000 --> 00:01:37,000
on that logo file, a little bit.

35
00:01:37,000 --> 00:01:39,000
Now the logo component,

36
00:01:39,000 --> 00:01:42,000
will be a fairly trivial component.

37
00:01:42,000 --> 00:01:46,000
Again, created and export it as we always do.

38
00:01:46,000 --> 00:01:47,000
We will need some styles in here.

39
00:01:47,000 --> 00:01:50,000
So we should import classes,

40
00:01:50,000 --> 00:01:55,000
from logo.module.CSS.

41
00:01:56,000 --> 00:01:58,000
So this CSS file we just added.

42
00:01:58,000 --> 00:02:00,000
And then the logo here for me,

43
00:02:00,000 --> 00:02:03,000
is a simple text-based logo.

44
00:02:03,000 --> 00:02:05,000
I'll just set up a div,

45
00:02:05,000 --> 00:02:08,000
with a text of Max Next Blog.

46
00:02:08,000 --> 00:02:11,000
Of course, again, use your name here,

47
00:02:11,000 --> 00:02:13,000
and then I'll add a class name here of,

48
00:02:13,000 --> 00:02:18,000
classes.logo, using one of the CSS classes

49
00:02:18,000 --> 00:02:21,000
or the only CSS class defined in here.

50
00:02:23,000 --> 00:02:25,000
That will style that logo.

51
00:02:25,000 --> 00:02:28,000
Now we add that logo to main navigation,

52
00:02:28,000 --> 00:02:31,000
and we use main navigation and the layout.

53
00:02:31,000 --> 00:02:34,000
And the layout is then wrapped around,

54
00:02:34,000 --> 00:02:35,000
our rendered component

55
00:02:35,000 --> 00:02:37,000
and underscored app JS.

56
00:02:37,000 --> 00:02:39,000
So that should be everything now.

57
00:02:39,000 --> 00:02:41,000
And if we now go back to our page,

58
00:02:41,000 --> 00:02:43,000
we should see this header here,

59
00:02:43,000 --> 00:02:47,000
which blends into the hero section here, on purpose,

60
00:02:47,000 --> 00:02:50,000
where we have the, logo,

61
00:02:50,000 --> 00:02:51,000
which is clickable,

62
00:02:51,000 --> 00:02:53,000
and takes us to the starting page.

63
00:02:53,000 --> 00:02:55,000
And then our two links here,

64
00:02:55,000 --> 00:02:57,000
which are all the clickable,

65
00:02:57,000 --> 00:02:59,000
but we haven't added any content

66
00:02:59,000 --> 00:03:01,000
for those pages yet.

67
00:03:01,000 --> 00:03:02,000
So at the moment,

68
00:03:02,000 --> 00:03:03,000
they won't do anything.

69
00:03:04,000 --> 00:03:06,000
But that is now the layout added,

70
00:03:06,000 --> 00:03:07,000
and the navigation added.

71
00:03:07,000 --> 00:03:09,000
And with that, let's come back

72
00:03:09,000 --> 00:03:12,000
to the starting page and complete it,

73
00:03:12,000 --> 00:03:14,000
by adding the featured posts below,

74
00:03:14,000 --> 00:03:16,000
the hero section here.