That's what we're gonna do right now. And then, later on, we're gonna learn about things like bullet points and some of the other features that are on this page.

But, to get started, let's come into the code, and I'm gonna go and open the menu.html page here. I'll close off the index and I think it's easiest just to get rid of everything that is there, and we're gonna copy everything from the about us page and then we'll make a few changes.

So I'm going to get rid of that, the title here should be menu. And then, we're going to be using most of these elements, but not all of them. So we're not gonna be using the page container, so we can get rid of that. And I don't believe we're gonna be using the helpers, either, we can always bring them back in if we need to, though.

We are gonna be using this skewed header. So we're gonna have a new image to pull in, so let's switch back into the browser, and I'll include this link in the show notes. So we're gonna grab this menu jpeg image here. So if you click save image as, you want to put this in backgrounds. So click on save, and now we can actually use it. So we can bring it in, and it's going to replace it right here on the menu page. So let's come over where it says about us, and now it can just say menu.

So this just ... to kind of review, if you remember back when I said we were gonna use an inline style here, and it was because I wanted to be able to share the functionality of the class, this is why. Because if you want to have different images here, then you would have to go and create a different class for each one of those images.

Whereas with this approach, we can have one shared class, so that header background class, that has all of the core functionality, and then we can just update the background image each time that we want to call it. So I think that's a good approach, that's exactly what I would do in a real-life application.

So now, let's say that we want this to say contact. And you can say contact us, it's up to you. Just say contact. Everything else here is going to be the same. We're going to get rid of all of this page container content, though. We don't need that any longer, along with the spacer, which we may or may not need.

So let's just hit save and see what that looks like. So if I click on menu, you can see that that was a lot easier than some of the other pages.

You can see, it's pretty much all done. Let's duplicate this, we want to have four of these. Just ... not really for any reason except for the fact that I think it's nice to be able to test it out and to keep playing with it. Because the more that you use it, the more familiar it's gonna be to you.

So let's grab these squares, and also, let me make sure I'm picking up the right spot. So we want to have these squares and ending at that div tag and then there at the very bottom, then we can go and we can just clone that. So we'll just copy and paste.

Now if we hit refresh, you can see that that is working perfectly.

And also notice how the alignment is also working very nicely. So our CSS grid is scalable, this is the kind of thing where you can have as many of these stacked on top of each other as you want, and they will all work perfectly. So great job if you went through this. In less than five minutes, you were able to reuse the various tools that we've spent all of this time building and you're able to populate them on a brand-new page. So, very nice.

And I did realize I just ... I just realized I misspelled ... or not misspelled, I grabbed the wrong name. We do not want the heading to be contact. This is supposed to be menu. There we go, that looks better. That would've bothered me to leave that in the video.

So our menu page, for all intents and purposes, is done. What we're gonna learn about in the next few guides are how to work with lists of data, and then also, how to work with things that are called anchor tags, a very special type of link. So I will see you in the next guide.

Resources

• Source Image