Homepage: footer

Okay, we built out the rest of the homepage, but we want to quickly add a footer that we can reuse at the bottom of every page for navigation. Now, could we just add the Navbar we already created to the bottom of the homepage? 

[Sara] No. 

[McGuire] But yes. 

[Sara] See, this is why I was worried. 

[McGuire] No need to worry. Now, if we wanted to add the Navbar at the bottom--

[Sara] What? 

[McGuire] You’re texting me. 

[Sara] Yeah. 

[McGuire] We’re filming. 

[Sara] Read what it says. 

[McGuire] No. 

[Sara] Read what it says. 

[McGuire, reading] Follow the design. 

[Sara] Now, continue. 

We’ll set up our footer structure, we’ll design our new footer, and of course we’ll make it a Symbol. And let’s look at our current structure. We have four main parts inside our page body. We have the navigation, we have the first section, we have the second section (which is our selected projects), and of course we have our third major section, which is the contact form. We’re going to add, you guessed it, another section. Let’s drag in a section element. We’ll do that under all of the existing sections, and let’s add, like we’ve gotten used to doing, our section class, and of course, we’ll put a container inside that element. Of course, we’ll add our container class, and now everything’s the way we need it to be. So that’s our structure. 

Let’s add the footer elements. So, there’s a few here. One, we might want to just add a logo, just a logo on the top right here. If we want all of our elements inside the container to be centered, we can do that. Let’s just use a Div block for this. Let’s add a Div block inside the container. We’ll call it footer holder, and let’s start putting things like this inside of that. Let’s just resize this to be a little bit smaller, a little smaller than that. And, with our footer holder, let’s use flex box. We want these things to stack vertically when we put stuff inside of our footer. We want it to stack vertically. Let’s choose vertical. And we want to align everything to the center. So, let’s add additional elements. Let’s add our paragraph underneath the image, underneath the logo. Maybe we want some space, let’s select that logo, add some space underneath. Let’s add maybe thirty pixels. We can set a constraint on the footer holder itself, we can say the maximum width is only fifty percent of the parent element it’s in, inside of the container. And, that could work. That’s one way to do it. We could also undo that, and instead add padding on the sides. Now if we don’t want all of this to go as wide as it’s going, we could select the paragraph and we could center it. Maybe add a maximum width of six hundred pixels, and that looks okay. Maybe we don’t need all that text. We’ll use placeholder text for now, but we could replace this later. That looks a little bit better. And let’s add a Collection list. Let’s add some lower navigation here. So we’ll add a Collection list. Put that inside the footer holder, and by default, we want to link to our projects. And this time we only want a link for each of them. Let’s use a link block. A link block is like a Div block, except it’s a clickable link. Let’s add it inside of each Collection item, so we have a clickable link. And then inside of each of those, we want to add a text block. So let’s use this, let’s place it inside the link block, with that text block in the link block. Right now it has that kind of hideous, terrible contrast, blue underline. 

And we can change this. With our link block selected, we can go in and edit 'All links'. Let's do that. We can scroll down and turn off that underline, we don't want that. And let's choose a color for this. Any color we want, maybe white is okay for right now. And let’s select that text block inside, and link it. We’ll link it to the project name. So in the dropdown, let’s choose project name. And now we have a list of all our projects. Let’s go back into the Collection list itself, and here’s where we can use grid again. Let’s go back up, with the Collection list selected, let’s press grid. And by default it’s giving us a two by two, but let’s see what happens if we remove one of those rows and add two more columns. Now we have this sort of grid-based layout, with each of our items inside. And, with our grid controls here we can align each of the children, we can justify and align to the center. And now, we have a list of each of our items. Let’s add some more margin here, let’s do thirty pixels. We have a list of each of our projects at the bottom. Now, one more thing here. This footer holder is the parent element of quite a number of things. But the section itself, we can use what we learned earlier, with a combo class. In fact, let’s go and add to the right section, let’s say, footer. So we’re using all of the style properties of section, but we’re adding on using this footer combo class. Let’s change the background color to our main brand color. That looks pretty good. 

Let’s add one more thing to this, and this is a list of three. Let’s use a Div block for this. We’re going to add our social media buttons. So, let’s close this Collection list wrapper. Let’s add this Div block, move it underneath, and we’ll call this social wrapper. And we’ll put three link blocks inside. One for each of the social buttons we’re going to have. So, we’ll have one, that’s copy and paste. Actually, before we do that, let’s add an image. Let’s add Twitter first, let’s add that inside the link block. We’ll use that default size, that’s fine. And then right before we copy and paste, let’s add a class to this link block. Let's call it social link, and then, with the social link selected, let's copy and paste, twice. So we’ll double-click and change this, we’ll replace this second image with the instagram logo. We’ll do the same thing, double-click, replace the third logo. This time with LinkedIn. Now, remember we added the class social link. So with social link selected, you can scroll up and add some margin on both sides, holding down Shift to space these out really evenly. Let’s do ten pixels on each side. So, with these social links, we can click this cog icon here to open the link block's settings where we can link out to each of our social channels. Let's close out of that for now. Our social wrapper here could use some space, so let's add some margin. Maybe 30 pixels of margin on the top there. That looks pretty good. Maybe we want to select that Collection list, maybe this grid-based Collection list, and instead of Inter four hundred, let’s switch it’s children to Inter six hundred. 

And of course, we can keep building, we can keep designing. But let’s make this a Symbol so we can reuse it elsewhere. Again with the section selected, let’s create Symbol, we’ll call this footer. And that’s the last section. This is the last part of the homepage, the last thing we’re adding for now. We did the footer structure, we configured and styled everything inside, and we made it a Symbol. Up next, we’ll take everything we’ve built here and we’ll check responsiveness and fluidity to make sure our homepage works on tablets, mobile devices, and even much larger displays. But remember, at any time you can clone each stage of this build to dig in and follow along with exactly what we’ve done along the way. Or even use any cloneable project as a starting point for anything you're looking to build. 

[Grimur] Share your work. We’ll share our favorites. Now cut to black.