[SOUND] Okay, so we made pretty nice progress with our homepage.
We've coded up the header.
The jumbo tron and our main tiles that will let us have navigation.
As well as a map showing where the restaurant is.
And letting the user click on it and get directions directly to the restaurant.
So the last thing we're going to be coding on this particular page is the footer.
So basically we need to code up this piece right here.
And the way we're going to do it is we're going to make sure that it stays this way,
in other words, in these three columns through the small screen size.
And as soon as it goes down below this small screen size,
we want them to stack one upon the other, maybe even give them a horizontal line in
between them just to give it a visual distinction.
Okay, so let's go back to our code editor, and I already have some code prepared for
this lecture.
So I'll copy and paste it in a second and we'll go over it.
However first let me give you a quick tip.
It's very convenient sometimes to end the div, especially in a page that goes on for
a while, has a nice amount of content, to end it with a HTML comment that will
basically say it's the end of whatever the div it is, that you're pointing towards.
In this case, it's the div with an ID home tile.
So if I actually scroll up, my ID or
my editor is going to help me out say, this is the div that I'm actually on.
The closing div I'm on is corresponding to this one.
But however, visually sometimes it's hard to tell what's going on.
So it's helpful to put these type of notes in.
Okay, moving on to the footer.
Well, if it's the footer I guess we should use the semantic tag footer.
And we're going to give it a class called panel footer.
And what panel footer class does is sets some default background, some padding, and
things like that.
So this is a convenient class.
Inside that panel, we're going to a panel footer.
We're going to have a div that is a container.
And, the container is going to nicely correspond to
our container in every single section.
So, in the main section, we also had a container that basically had, I believe,
the whole main content in it.
And, in the top,
in the header of the site of our website we also had a container as well.
So, they should all very nicely line up.
And of course since we're going to be subdividing this into these three cells,
or three grids then we're definitely going to need the container in order to place
the next div in here that's called the row class div.
So, here we go.
So this is the row class.
And, the way we're going to divide it,
as I told you, is we're going to have these three sections.
One, two, one section's going to be just
announcing what hours the restaurant is going to be open.
The second is going to give us some address information.
And the third is going to show the testimonials meaning just
give a couple of quotes from customers.
So again the way we're going to divide that is we want three grids or
three cells across the screen, and
we want them to stack as soon as it gets to be smaller than the small screen size.
because as you remember this means this will stack
as soon as it gets to be smaller than the small screen size.
Which is I believe about 768 pixels, so around 767 pixels you'll be become
extra small and, all these sections, will start stacking one upon the other.
And since we have, four, as our column, identifier,
it means that we're going to have four, four, and four, that's twelve, so,
we're going to have, three different sections visible across the screen.
