1
00:00:00,180 --> 00:00:04,050
All right, so far, it doesn't look like a whole lot, and that's because we've got to play a little

2
00:00:04,050 --> 00:00:10,770
bit of styling to prepare and then we're going to add the JavaScript, add the functionality, the styling,

3
00:00:10,770 --> 00:00:14,430
what it's going to do, it's going to hide the body content.

4
00:00:14,790 --> 00:00:19,740
And also we're going to create another class that we don't have yet.

5
00:00:19,740 --> 00:00:22,610
And that's going to be the act of class and that's going to show.

6
00:00:22,620 --> 00:00:28,350
So the body is going to be displaying none and the octave is going to be displayed block.

7
00:00:28,530 --> 00:00:36,060
So when we using JavaScript add octave to the element it's going to show and when it's not added, it's

8
00:00:36,060 --> 00:00:41,190
going to display Nunc, it's going to hide the element and then also a little bit of styling to make

9
00:00:41,190 --> 00:00:44,130
the head look different than the body.

10
00:00:44,140 --> 00:00:49,260
So it stands out a little bit more and you can, of course, apply your own styling as needed.

11
00:00:49,440 --> 00:00:56,640
The most important part is creating a class of octave with the display block and a class of body with

12
00:00:56,640 --> 00:00:57,360
the display.

13
00:00:57,360 --> 00:00:57,740
None.

14
00:00:57,780 --> 00:01:03,960
And I'm going to do it on the same page, just using the style tags as is going to be a relatively short

15
00:01:03,960 --> 00:01:04,650
project.

16
00:01:04,650 --> 00:01:12,690
So we'll select the main container and selecting any class of a body under me and then have padding,

17
00:01:13,320 --> 00:01:17,430
give it five picks and I'm going to give the border a fairly light color.

18
00:01:17,730 --> 00:01:21,240
And as you can see, as I'm typing it in, it's available on the right hand side.

19
00:01:21,330 --> 00:01:24,180
And I'm going to add in the display done afterwards.

20
00:01:24,820 --> 00:01:28,950
So let's create a new class and this one is going to be active.

21
00:01:28,950 --> 00:01:36,020
And we'll also apply only in the body because we're containing the body that is going to display none.

22
00:01:36,120 --> 00:01:37,940
And then this one's going to display.

23
00:01:38,220 --> 00:01:41,340
And then lastly, let's do a little bit of styling for the head.

24
00:01:41,700 --> 00:01:42,930
So main a head.

25
00:01:42,930 --> 00:01:47,880
And I want to spend too much time on the styling, but I do want to separate it so it stands out, make

26
00:01:47,880 --> 00:01:52,440
the font size a little bit bigger and then margin for this as well.

27
00:01:52,650 --> 00:01:53,470
And that should be it.

28
00:01:53,490 --> 00:01:55,410
So we're ready to move on to the next lesson.

29
00:01:55,620 --> 00:01:59,220
We're going to get into the JavaScript part of the project.