So we have a start on our product page and let's make that a little bit better, first of all, we need
to add a form, but there's one other thing I'd like to do as well.
So if I go back to my Web browser right now, we have this page by one widget and we also have our virtual
terminal.
Let's make a menu at the top, some kind of navigation thing.
And I think the easiest way to do that is to take advantage of bootstraps.
And I'm on get bootstrap dotcom.
And I clicked on docs to scroll down to the number.
I think that would be a really easy way to do it.
So what I'm going to do is just copy this, the starter code, so I'll copy that and I'll go back to
my idea and open up base layer.
And right after the opening body tag, I'll give myself a few blank lines and I'll just paste in that
starter code and we'll modify it as necessary.
So there's a lot of stuff in here that I don't need.
I do want to dropdown and I do want a home page.
So let's get started here.
I'll get rid of this.
I'll just make the map or at the very top, that little bit of text.
I'll just make that a non breaking space.
We can change it later if we want to.
And then down here, we'll leave the home page the way that it is.
We'll make a link to a page that doesn't exist yet.
Just slash the home page.
OK, then I'll make the second one virtual terminal and we'll make that link to the virtual terminal.
Then I'll use a dropdown here.
OK, I'll just call this product's.
And we'll give it to items.
And we'll call the first one by
one with a phone call the second one.
Subscription.
OK, and this one by one widget willing to this page, the one we're working on right now over here,
which is called Charge once S.A.G., OSCE, and the second one will leave alone for right now because
we're going to build that a little bit later on.
And I'll get rid of this extra link because we don't need that.
And I'll get rid of this form as well, because we don't need that.
We might put it back later, but for now, that is sufficient.
OK, let me have this all over so it's properly formatted and save that, see if it recompile.
Looks like it did OK.
We'll find out in a moment.
Let's reload the page that looks like it didn't.
So we'll stop this and run Aragón.
There it is.
Let's reload that page and see what it looks like.
So we have our home virtual terminal and products, and this will take us to buy one widget and this
should take us back to here.
So products buy one widget and a virtual terminal takes us there.
Perfect.
OK, so let's get back on this page right here.
Buy one widget.
Well, obviously, it's going to have a form and the form will be remarkably similar to the one that
we worked on last time.
So let's use that as a starting point.
So I'll hide my terminal and I'll open up the buy once page.
Now open up the terminal page there is and we'll leave the JavaScript alone for right now.
Let's just copy this form as a starting place.
Copy that and we'll on the alert too.
So we'll copy that and we'll go back to the buy once page and I'll put that right here and see how that
looks and reload this.
And there so we don't have our stripe JavaScript hooked up yet, but we have a good start now, there's
a couple of other fields we're going to want as well.
It's great that someone can buy this, but they shouldn't be able to choose their own price.
So I don't have to go away.
And we also need to have a little bit more information to ship to them.
And we might take care of that and we might not.
We're just trying to show how to buy something that has a fixed price.
But this is a good start.
So when the next lecture will take that JavaScript, which is currently embedded right in the virtual
terminal page, I will make that a partial so we can reuse it anywhere we want to.
And we'll get started on that in the next lecture.