Just as a quick refresher, we want them to look something like this.

Now, I'm not going to implement the shadow because I'm going to do that in a dedicated guide. Because working with box shadows is not as easy as you may think, especially if it's the first time you've done it, so I want to spend an entire section just dedicated to that. So we're just going to implement the styles, we're going to use Flexbox, and we're going to see how we can align these all and style them properly.

Now, the background image here is an image that you have access to in the show notes. So, if you go to this link and then images, backgrounds, and then this one is called fries-multiply-bg.jpg, if you go to that and just click Save Image As, I'm going to put it inside the project, inside images, and then backgrounds. Hit Save, and that is all we need to do. It's just a very small jpeg image, and we want it to be the background.

Now, if you remember back to the parallax section, do you remember how I told you we did not want this image to repeat but that the default nature of background images was actually to repeat? That is what we're going to do here, we're going to use that default and have this background image multiplied throughout the page.

Now that we have access to that, let's start going and building these styles. So I'm in the homepage, this was the hero section styles. Let's come down here, and I want to now add a new comment, this is going to be the features section styles.

Now let's start with that class of features-section. We want this to have a hard-coated height, kind of like we did with the parallax. So I want this to be 400 pixels, and then we want to get access to that background image, so I'll say background image URL, and then we want to go, if you remember, we need to jump back into the previous directory, then go to images, backgrounds, and we want the fries-multiply.bg, and then from here we also want to have a background color.

Part of the reason for this is we want to have something around those borders, and we want to have something that is there in case the image does not load. So for that, I want to go with that kind of goldish color we've been using up to this point.

homepage.css

/* Features section styles */
.features-section {
    height: 400px;
    background-image: url(../images/backgrounds/fries-multiply-bg.jpg);
    background-color: #cea135;
}

Then let's go see what this does for us. Let's switch back here, hit refresh, and there you go, that was pretty easy.

You can see that that background image is now multiplying, and it's looking really nice.

Now, I also want to have a border here. Do you notice how this parallax works, but I kind of like the idea of having some way of separating the two besides just going and jumping right into this background image, so I want to add a border. Now, we've not used borders up until this point so this will be a nice little introduction to them, but we will get into them more later on as well.

So here, I want to give a border-top property, and here you can pass in a number of values to the border. I want it to be pretty thick, so I'm going to say 10 pixels, and then from there I want it to be solid. You could do things like dash lines or anything like that, but I want this one to be solid, and I want it to be pure white. I'm going to have it just like that,

border-top: 10px solid white;

and now if you hit refresh, you can see we have this nice little separator,

and that also shows how well that parallax feature is working, so that is looking nice.

Now, moving down the line, let's give ourselves a little more room, I want to have that dark blue for the font color, not columns, color. For that, if you remember, we have it up there, it's that hex color of #11122b. That's going to give all of our fonts and all the text that nice dark blue color.

It's kind of hard to tell the difference between that and black, especially on a screen, but I think that especially when we make the images or the icons larger, that's going to make a difference. So we have that color, and now let's turn this into a flex container.

So I'm going to say display flex and then from there, I want to justify content. Now, remember how we added a single div inside of this flex container, so these styles are only going to be applying to that one wrapper div. I'm going to say justify content, and this is going to be center, because I want it to be centered horizontally, and then align items because I want it to be centered vertically.

So that's going to be centered, just like that, and then let's go with our font family. This one's going to have the Ubuntu Condensed. I wish we had code completion for this one because I do spell condensed wrong quite a bit. I believe that's right, condensed, and then this is going to be sans-serif.

homepage.css

/* Features section styles */
.features-section {
    height: 400px;
    background-image: url(../images/backgrounds/fries-multiply-bg.jpg);
    background-color: #cea135;
    border-top: 10px solid white;
    color: #11122b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Ubuntu Condensed", sans-serif;
}

We'll find out in a moment if I have a typo there. Hit Refresh, and there we go.

The font is getting pulled in properly. That is looking good, and that's all of the styles that we're going to add to this feature section. Later on, we'll come back, and we'll add a box shadow to it, but for right now, that's all that we need.

Now that we have that, now let's go and let's grab the columns wrapper. If you reference back to the HTML, you remember that we have the feature section. That's going to be a Flexbox container, then we have columns wrapper, which is the only element inside of the feature's container. This is what's going to do all the magic for us and get us those columns.

You could use grid for it, but I personally like Flexbox for this because it has the space between and space around properties, and I like using those. So let's come here, and let's grab the features section, and then we want to go with the columns wrapper.

Now, I want to display a hard-coded width here, so I want to say that this is always going to be a 1000 pixels wide, and then it's going to be a flex container by itself, and then we'll use justify content here, and this one is going to be space between.

homepage.css

.features-section > .columns-wrapper {
    width: 1000px;
    display: flex;
    justify-content: space-between;
}

Let's hit save, and let's see if that did what we're asking it to do. Hit refresh and there you go, that is looking much better.

Notice how much easier it was that we've done this now a few times. We've used Flexbox for the nav bar, for nav elements, and we've done it so many times that now you can just go through it, and it starts to become a habit. And I've been doing this, and I've been using Flexbox and CSS grid for a while now.

And I can tell you, I had to constantly look up all the property names when I was first learning it. So don't feel intimidated if you don't have everything memorized, that's perfectly normal. The more times you do it, it's just going to become second nature, it's just like any other skill, so let's now move on. Those are all the styles that we need for the columns wrapper.

Now let's move to the elements themselves, and we have that column class, and let's do something a little bit different than we've done before. I want to show you how you can add all of these values here and how you can do it right in the inspector so that you can test out to see how these are going to look.

Right here, we have this column class, and inside the column class, if we wanted to add, say, padding of 20 pixels, you can see that that affects all of them just like that, that's working.

One thing to note, this is only getting applied to this first column specifically, so it's going to throw off these other two, but that's perfectly fine.

Now we're going to say we want the margin, just the margin itself to be at 42 pixels. So far so good. Then I want the text align property to be centered. I want all the content to be centered, and then I want the border bottom, and this is going to sound really weird to you, but there is a method to the madness, I promise. It's going to be solid and transparent. You're like, "Why in the world did we just a put a transparent border there?" Well, I will explain in a second, so don't worry.

Now, a border radius of 10 pixels, and then let's have a transition, so this is going to have a nice little animation of one second. That is everything that we need.

Now, obviously, there's still a lot other things we need to do there, but for right now, those are all the values. And this is something that I do quite a bit when I'm building out interfaces where if I want to see what the code is doing in real time, I can type it all right here into the little element style dialogue box, and I can then afterwards just copy it and then come over and paste it directly into the code.

So I can come here, and say I want my column class, and then from there, just paste it all in and hit save.

homepage.css

.column {
    padding: 20px;
    margin: 42px;
    text-align: center;
    border-bottom: 5px solid transparent;
    border-radius: 10px;
    transition: 1s;
}

Now, if I hit refresh, you can see that that has now been applied to all of the values, so that is looking really good.

Now, before we take a break and we finish out some of these different styles in the feature section, I want to show you why I added that weird, transparent border. So that may look really weird, but if you remove it, you may notice it makes it jump a little bit, and here, you can see a hint of what we're looking to do, but you can't actually see anything on the screen, but I'm going to show you exactly why it's needed here.

If we switch back, and I'm also going to be a little bit more specific with the column because if I ever want to use column for anything else, I do not want these values overwriting that. So I'm going to go with the features section, and then the columns wrapper, and then the column.

Then below this, what I want to do is I'm going to add a new pseudo listener, I'm going to add column : and then hover. Up to this point, the only thing we've used a pseudo selector for has been for the link tags, but you can use these types of hover listeners and these pseudo selectors for anything on the page.

So right here, I'm saying that if you ever hover over one of these columns, I want you to perform this task, and so the task that I want to do is going to be to add a bottom border, except now it's not going to be transparent. Now we're going to grab that dark blue color here.

homepage.css

.features-section > .columns-wrapper > .column:hover {
    border-bottom: 5px solid #11122b;
}

Now I'm going to hit save and hit refresh. Now, if I hover over here, do you see how we have that cool little black border?

What I was going for with the design was I wanted it to look like a restaurant tray. Since this is a fry restaurant, they have trays, and I thought it'd be cool if the features looked like they're being held up on trays. You can see that's working perfectly.

Now, if you're curious on why we needed the transparent border, watch what happens if I remove the transparent border rule right here. If I hover over it, do you see how all of the code gets lifted up? That is really ... That does not look good. That is ... You do not want to go and give this to a client or to a boss or anything, that is really is bad.

What we did by having a transparent border, what we did was we told the page to always have the border there, but for it to be transparent, so that means that that 5 pixels on the bottom, that's already there in place right now. It's reserved, and then all that happens when we hover is it changes the color. So that is a really nice way of removing those annoying types of jumps, so that is how you can add a dynamic and animated border to an element in CSS.

Link for the fries-multiply-bg image;

https://github.com/jordanhudgens/digital-literacy-html-css/blob/master/images/backgrounds/fries-multiply-bg.jpg