2.7 Append a Footer

Hello and welcome back to build a one page website with Froont, no coding required. We're almost finished with the layout portion of the site building process, the last piece that we need to add in is a footer. So once again, it's much the same process as we've been doing so far, we'll drag and drop in a container. Scroll down so we can have a better look at it, and we're going to rename this to footer. We're going to leave this one so it's 100% of the width of the site so it's all stretchy. We're going to give it a background color of 161616. We're going to give it a box shadow, just like the ones that we've been adding in so far, so change this to 2rim. The background color is going to be black with some opacity. And then we're going to change the actual amount of opacity, so that's this last value here to 0.47. And then we're going to give it a border, set that border to 1 pixel in width and the color will be 161616. All right, so that is the styling for the sort of wrap up that's going to go around the content of our footer. So we're going to need another container inside here so that we can center the content of our footer. So we'll drag and drop that in, now we are going to do the same thing here that we have done with our other content sections. We are going to change it to 940 pixels in width, up to a maximum of 95%. That is actually all we need to do with this container, it's just there purely to give us that centered area. And now we can add in a little content, we're going to use another text block. We'll drop this headline, we don't need a headline for this section. And we're just going to add in some text instead that just says, Copyright 2018. I'll include a link in the notes below the video to where you can copy and paste this little c with the circle sign in it, the copyright symbol. And we're just going to make sure it's not set to a heading, it should just be set to normal text. Now right now this normal text is pulling the style in from here, but we need this to be lightly colored. So we're going to create another new style, I'm going to call it footertext. So now that is ready for us, after it finishes processing, that's ready for us to re-style. So in the Typography section, we're going to change the font to Source Sans Pro again. We're going to give it a size of 0.9rim. We'll set the color to a5a5a5 and we're going to center, and we're just going to add a little bit of padding above and below this text. So we're going to set that to 0.75rim above and below. And now that we've got some content in here making space. We can remove these minimum heights here from the containers that are holding that text. So both of those, now I have no minimum height and that allows that footer to collapse down to its correct height. So that one was pretty straightforward. There's our footer with our copyright message in it. In the live site, you wouldn't see that Made with Froont there, so that will be our footer, nice and simple and straightforward. So that was the last piece that we needed to add in as far as putting together our layout. This is our central template but the next thing that we need to do is start making it responsive. So right now this layout will look just fine on a typical size monitor. But for example, if you wanted to look at it on a smaller mobile phone, things are going to start looking a little bit wacky. So what we are going to start doing is adding in responsive functionality. So we're going to make sure that, whether you're looking at it full width or any of these smaller sizes. The layout isn't going to break and it's all going to still look presentable. So in the next lesson, we're going to take a look at how you can use Froont to create responsive functionality in layout. We'll have an overview of how you can check on where your site is breaking in responsiveness. And we'll look a bit closer at how responsive functionality is built in Froont. So we'll go through all of that in the next lesson, I'll see you there.