All right, so far, it doesn't look like a whole lot, and that's because we've got to play a little
bit of styling to prepare and then we're going to add the JavaScript, add the functionality, the styling,
what it's going to do, it's going to hide the body content.
And also we're going to create another class that we don't have yet.
And that's going to be the act of class and that's going to show.
So the body is going to be displaying none and the octave is going to be displayed block.
So when we using JavaScript add octave to the element it's going to show and when it's not added, it's
going to display Nunc, it's going to hide the element and then also a little bit of styling to make
the head look different than the body.
So it stands out a little bit more and you can, of course, apply your own styling as needed.
The most important part is creating a class of octave with the display block and a class of body with
the display.
None.
And I'm going to do it on the same page, just using the style tags as is going to be a relatively short
project.
So we'll select the main container and selecting any class of a body under me and then have padding,
give it five picks and I'm going to give the border a fairly light color.
And as you can see, as I'm typing it in, it's available on the right hand side.
And I'm going to add in the display done afterwards.
So let's create a new class and this one is going to be active.
And we'll also apply only in the body because we're containing the body that is going to display none.
And then this one's going to display.
And then lastly, let's do a little bit of styling for the head.
So main a head.
And I want to spend too much time on the styling, but I do want to separate it so it stands out, make
the font size a little bit bigger and then margin for this as well.
And that should be it.
So we're ready to move on to the next lesson.
We're going to get into the JavaScript part of the project.