4.12 CSS: Footer
In this lesson we'll style the footer.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.12 CSS: Footer
Welcome back. In the previous video, I styled the main area for all three pages. Now, the only thing left to style is the footer. So, jumping back here, I'm gonna import my footer dot less file. Okay, let's take a look at the footer. So we have a footer with a class of main footer, and then it's followed by an i with a class of fancy-box and the envelope icon. So, let's do this. Main footer, and inside, fancy box. Now, the fancy box envelope needs to be a bit bigger. So, what I'm going to do is set a font size of 55 pixels. There we go. Now, I got to alter the padding a little bit. So, I'm going to do padding. I'm gonna do baseline and see how that looks. Okay, pretty good, except on the PSD, it is a bit wider. So, I'm gonna actually put baseline divided by two for top and bottom, and a simple baseline for left and right. So, something like that, that looks much better. Let's move on to this dark area, right here. And that is the subscribe section. So subscribe section, I'm going to do a background color, color dark bg. Then I'm going to put some padding, like baseline, let's do a times two and zero for left and right. Let's target the paragraphs and set the color to white. Just like that, and what else? The envelope icon overlaps this dark background, so let's do, let's do it right here on the subscribe section. I'm gonna move it up by 25 pixels. So, margin top minus the baseline. Okay, great. And I'm also gonna increase the padding. Okay, now about this form here, we need a little bit of padding along the input on the left and right, and also, we need to distance the button from the actual input because that's how it's done in the PSD. So, I'm gonna open up forms dot less. I'm gonna add padding zero, and baseline left and right. That's a bit too much, so I'm gonna cut it in half. Okay, that's better. And also, I remembered there is a specific width to this, 300 pixels, so, I need to set that as well. So I'm gonna put, let's see, a minimum width of 300 pixels. And why not actually work with AMS? So, 300 divided by 18, let's put about 15 AMS. Okay. Now, to distance these two, I need to target the input type submit that follows an input type email. So, I can easily do that by saying input type email plus input type submit, and I'm gonna put a margin left baseline. And that's a bit too much, so again, divide by two. Okay, great. Now, the only thing left to do here is the copyright area. And first of all, we need to push it down, so I'll go to my subscribe section here, and I'm going to say margin bottom, theme margin. Okay, and that's will push the copyright area down. Now, this right here, container list inline with a class of social. So let's style these. List inline, first of all, should display the items on the same line. So first of all, get rid of the bullets, and then target each list item, and set the display to inline. Okay. And then, I'm going to target the social list, anchor tech. Yeah, because each list item from the social list has an anchor tag inside of it. And once I do that, I'm going to increase the font size to base line, and I'm gonna add a margin bottom of baseline. And also to do that, I'm gonna set the display to inline block because anchor tags are inline elements by default so you cannot apply margins and paddings to them. And, finally, some space between this element and the bottom of the page. And to do that, I'm simply gonna target the main footer, and I'm gonna set padding, bottom. Let's do a baseline times two. Okay, so now we have equal distance from the top and from the bottom. And that is the footer. Let's see it in the other pages, portfolio, about. Okay. Nice. Now, there is one more thing that I just noticed on the slider. The image here kind of makes the image scroll horizontally, and that's because it needs to have the maximum width. So, what I'm gonna do is open banner dot less and then target the images inside each banner, and set the max width to 100% and the height to auto. So this will force the images to scale to their parent element, not over it. So, now that scroll bar is gone. And that also works for the home page if we would have images inside it. All right, now, the styling part of our website is complete. The only thing that's left to do is make it responsive. That's coming up next.