Adding final HTML for animation - CSS Tutorial

- [Instructor] So in order to continue this project, I have some more HTML code that I'm going to insert at the bottom of this page. So I've got this HTML code right here. And I'm going to copy this to my clipboard. So let's go ahead and choose it all right here, copy it to the clipboard, and I'm going to paste it. As you know I have the main header section. And then I have this article right here. So what I have that I'm pasting is going to be a series of additional article tags which is going to be three in total. So go ahead and save that. And I'm going to go back into my page so you can see what we have. We have this section right here with this parachute, which is going to be really cool to animate. And then we have these different monster types. And we have a little bit of additional code right here, that it's really there just to make the page longer. As we continue to work with this project you'll see that I'm going to show you a new library called ScrollMagic that's going to make animations a lot simpler. What I've given you so far is the tools to animate everything with pure JavaScript manually yourself but this library is pretty interesting. Let's take a peek at that HTML code just a little bit more so we can see what else we're getting. So we have these three additional sections. One of 'em is called meet so if you look at the navigation, we have the meet section, which is here at the top with these monsters, then we have types and types is actually going third. So let's fix the navigation. We'll just go ahead and put types from here to here. That way, we'll have it in the correct order. So friend is this one right here with the parachute, and then we have types. And then we have this higher section at the bottom, which is just there for additional height. Each one of those sections has a id and the id is what these links are tracking. And then if we take a look at the friend's section so we'll click on friend to get this little parachute fellow. And now let's open that up. So here, you're going to see that we just essentially have a section here with an image. This image has an id of parachute. And we're going to be animating that parachute. This is on this section called layout container. And we've got this in a Bootstrap grid here. So all these HTML tags are there just for the layout itself. And then this other section right here, is also part of the Bootstrap grid, but then it's got these two pieces of content that we're also going to animate and they both have the same class. So I'm going to show you how to animate these in different ways. But it's important that you notice that these two have the same class. Now if we take a look at the next section, it's a little bit different. It has an id of types and then we have a header. Traditionally, these layouts have headers. So this is kind of the header section for this one. So the monster types just really has this header right here. And then we have additional images inside columns. So we have this section right here is one of these images, which happens to be the monsters with the horns. That image has a specific id if I want to animate that separately, and then it also has a class of icon just for that section. And all the monsters in this section have a class of icon. And the ids for each monster, as well as this common icon class is what I can use to animate those either together or separately. And as I mentioned, we're going to be using this fantastic library called ScrollMagic that is going to make everything a little bit easier. It's up to you what you choose whether you want to go sort of with pure JavaScript, which as you can tell is a little verbose. I think you may like this additional way of animating. So this is all you need to do to set up the HTML to prepare for that.