This is actually the second time I've filmed this. I filmed the entire episode and finished out the rest of the homepage only to discover that the microphone was not plugged in, so that wasn't a fun discovery. Anyway, we are back here.

Now that we have everything that we need, let's go and let's start adding the next section, or the styles for the next section. That's going to be for the footer-phone-hours, and if you look at the HTML here, you'll see we have a class of footer-phone-hours and then we have two spans inside of it.

I want to create some styles that are going to apply to both of these elements, and then we're going to add some more specific styles. Hopefully, they'll also illustrate, once again, how the specificity works with CSS.

Remember, the more specific the selector, that is going to override any less specific selector. If we select footer-phone-hours-span class and apply anything, if we then go and say, footer-phone-hours and then grab the hours class, that is going to be more specific. It's going to override any of the other styles that we may want to apply.

I'm going to come down here, and grab the footer. From there, I want to grab the footer-phone-hours, and then the span tag. Inside of here, I want to add some space on the right and left-hand side. I'll say, margin-left, and we'll go with 10px, duplicate that and say, margin-right at 10px.

common.css

.footer > .footer-phone-hours span {
    margin-left: 10px;
    margin-right: 10px;
}

Then I want to use a font-size of 1em. This is going to give me a baseline font size and then we're going to override this for the hours. I'm going to do that and then I also want to spread out the letters a little bit. I can say, letter-spacing: 2px.

common.css

.footer > .footer-phone-hours span {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1em;
    letter-spacing: 2px;
}

That'll just kind of add a little bit of a unique look and feel for those words. Now, if you hit refresh, you can see that that worked nicely. We have letter spacing, and now, these two items are spread out.

Let's keep moving down. Now what we want to do is add a selector that's even a little bit more specific. Instead of just footer, and then the class name and then the span tag, we're going to go one more level deep, and we want to grab the hours.

What we want to override here, in the hours, is going to be the font-size. I want to make this a little bit smaller than the phone number. Let's say, 0.8em, and then from there let's add a color of that kind of goldish color, so #cea135.

common.css

.footer > .footer-phone-hours > .hours {
    font-size: 0.8em;
    color: #cea135;
}

Now if I hit refresh, you can see that that's working. Now, you may notice, if you compare this with the finished site, you may notice here that, where it says "MIDNIGHT" and also "AM," you may notice that those are all in caps. Well, we do not have that here.

Your first thought may be to just go and change the HTML, and that's perfectly fine. You could go into the HTML and make this in all uppercase. With CSS we actually have the ability to control this.

If you inspect this and grab that element. You can go and use the text-transform property. Now, this is one that we've not used before, and so you can use uppercase. You see how that has translated it into uppercase.

You also have a few other options. You could do capitalize. What capitalize does is, it will take each word and it will capitalize the first word there. You could also do lowercase, and they have a few other options, but I typically use it mainly just for uppercase.

It's a really nice way of being able to format this using CSS without even having to touch the HTML. I'm going to copy this and add it as one more rule, and that's all we need to do for the hours.

common.css

.footer > .footer-phone-hours > .hours {
    font-size: 0.8em;
    color: #cea135;
    text-transform: uppercase;
}

Now let's come to our links-wrapper. Now, right here we have these links. If you're curious on how this is still working, you may have noticed that even though we haven't applied any styles, we still have the same type of behavior that we have up here in the navbar.

It's because we used a generic links wrapper class, and we did that on purpose. We also have the ability to override and to add to that class. So, let's see how we can do that here. I can say, footer and then links-wrapper, and now inside here, any new styles that we want to add on top of the links-wrapper will only get applied when this is in the footer.

common.css

.footer > .links-wrapper {

}

This is nice because we can apply different styles to the links-wrapper without affecting the one that is in the top nav or on any of the other pages. What I can do here is, I want to add some margin to the top and bottom, so I'll say, margin-top and we'll go with 40px, and margin-bottom: 40px.

common.css

.footer > .links-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
}

Let's also add a width here, so that we can control how wide the wrapper is going to be. For this, we'll go with, let's just say, 400px. Have it nice and wide.

common.css

.footer > .links-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 400px;
}

Let's just see what that gives us, so hit refresh. You can see that spaced it out nicely. This is all looking really good, and we still have all of our cool other effects.

This is fantastic, I love the way this is coming along, and notice how much faster this is because we created a lot of general, more abstract styles up here, and we're able to reuse these.

If you're also curious, and it still isn't making perfect sense to you, let's highlight this, and I'm going to grab the links wrapper here. Now notice that we can trace the linage of all of these styles.

So when a links wrapper is inside of the footer, we have the margin-top, bottom, and then the width. These things are only going to be applied when the links wrapper is living inside of the footer, but if you scroll down, you see where we also have the generic links wrapper. This has FlexBox and justify-content, and the align-items.

What this means is that you can create a class with some baseline styles and then reuse that throughout the application, which is very helpful. You can see that even though we have quite a few components here, we're going to be able to apply all of the same types of styles that we spent hours here building in this navbar at the top.

Because we're able to reuse a lot of the things that we've already done, then it's much faster down here. We're going to be able to do the same task in minutes.

Now that we have that, let's move down to the social media icons. We have the footer, and now with the footer, we can go grab the inside of there, the social-media-icons-wrapper, and let's add the same kind of margins.

I'm going to add the margin and, for the top and bottom, and we're also going to add a width, but this one I want to be a little bit more narrow. So I'm going to say here, 300px, and we also want to make this a Flexbox container and I'm going to show you why here.

common.css

.footer > .social-media-icons-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 300px;
}

I'm going to hit refresh, and do you see how it moves all of the links all the way to the left. Well, that is the natural HTML behavior.

If you select the social media wrapper here, and if you want to make this a flex container. If I say display: flex, and then justify-content: space-around. Do you see how that places them in the exact spot we're looking for? That's just another example of how powerful Flexbox is. Without using a tool like that, it would take a lot of time.

You'd have to tweak all of the margins very specifically in order to get this type of behavior that we're able to get in just two lines of code. So, let's add this in. Hit save and refresh. Everything there is working and looks quite nice.

common.css

.footer > .social-media-icons-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 300px;
    display: flex;
    justify-content: space-around;
}

Now let's update these styles, so that they have the correct links and also the link color, and then we add our hover effect. I'm going to grab everything here, copy it, and now we want to select just the link. So just that a-tag.

Then here, we'll get rid of the content, and now we can add our custom styles. I want these to be a little bit larger, so I'm going to say, font-size of 1.5em and then we want to have a color of, kind of that off-white. We're going to go with that CB hexadecimal color.

common.css

.footer > .social-media-icons-wrapper a {
    font-size: 1.5em;
    color: #cbcbcb;
}

I don't believe that they have a text-decoration. I don't believe that they have an underline, it doesn't look like it. So, we shouldn't even have to override that.

Now the transition, because we want to have our hover effects. This should be 0.5s.

common.css

.footer > .social-media-icons-wrapper a {
    font-size: 1.5em;
    color: #cbcbcb;
    transition: 0.5s;
}

Hit save. Hit refresh, and there we go. Now, this is looking much better. Now we just need to add our hover effects, with our pseudo-state.

Copy that, and now if you come back to the very end, we don't want to grab just the a. We want to work with that hover state. Then update the color. We want to go with that, our gold color of #cea135.

common.css

.footer > .social-media-icons-wrapper a:hover {
    color: #cea135;
}

Hit save and refresh. Now if you hover over, you can see we have that nice gold color. This is working perfectly, and we're just about done.

The last element is going to be this copyright here, and let's take a look and see. It's supposed to look like this. Now this may be a little bit small for your taste, it is for mine, but the designer sent it over like this.

I like to try to be pixel-perfect whenever I'm working with a designer because I assume that they know exactly what they're talking about. If you want yours to be a little larger, that's perfectly fine. It's up to you.

Let's get the copyright footer, and let me make sure the class name, this is going to be ... Scrolling down. Okay. It's just called copyright-wrapper. The way we can select that is by saying .footer and then copyright-wrapper.

What we're going to have to do here is, I don't want it flush against the very bottom of the page, so I'm going to say I want to add a margin to the bottom of 43px. I want the font-size to be quite small, 0.7em, so about 70% of it's normal size. I want the color to be that kind of darker, muted gray, which is #858585.

common.css

.footer > .copyright-wrapper {
    margin-bottom: 42px;
    font-size: 0.7em;
    color: #858585;
}

Hit save, and if you hit refresh, you can see that that is matched perfectly to the design.

If you have any desire to, feel free to change any of these elements. If you want to have maybe some more margin or less margin, anything like that, I definitely want you to be able to explore it. That is how you're going to learn when you make changes, how they are rendered on the page. That is what we need to do to finish out the footer.

Now, not only did we just finish out the footer, we finished off the entire homepage. Fantastic job, and I know that that took a while, but I can tell you from experience that when I was originally starting to build websites, years and years ago, even just building out a homepage like this, would have taken a much longer time then it just took us.

It may have seemed like it took a while to build all this out, but in all reality, it really only took a few hours. When I was originally building out websites like this, before there were tools like Flexbox and CSS Grid, this would've taken hours and hours and hours, and even days.

I just want you to understand that using these modern types of technologies really helps to make the entire development process much more efficient. As you saw here, when we got down to the footer, we're using the same type of tools and skills that we used here in the navbar, but we're able to do it much faster.

Because you've already learned a lot of these skill sets you need, in order to align items on the page, and so, the more you do this, it's going to really go quite quickly for you.

Now that we have all of this done, it is time to move on to the about page. Right now, there's nothing on the about page. If you want to see what it's going to look like, in the final version, we are going to have a cool interface here.

Where we're going to be able to work with these kinds of boxes, layout items, and we're going to be able to see how we can also implement a navbar that looks a little bit different but still has the same behavior.

One of my favorite new little design tools is working with the clip-path, so you're going to see how you can slice images, and do all of that in CSS. I will see you in the next section when we start building this out.