3.4 Styling the Facts Section
In this lesson, we’ll review some CSS that has already been written, and then we’ll tackle a particularly tricky bit of layout by using CSS gradients.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
3.4 Styling the Facts Section
In our last lesson, we ended with the SITE013 folder. But again, I've already created some more of the styles for the next couple of sections, and you can open those up and view them in the SITE014 folder. And then, all of the changes we make in this lesson will be saved in the SITE015 folder. So, SITE014 will be your starting point and then we'll end up with SITE15 at the end of this lesson. So if we look in our Photoshop file, we just finished this video section. And in the SITE14 folder, you'll notice that the following sections, including these two columns here and in this wave section as well as this benefit section, those have all been completed now. And you can look through that CSS to see how it was all done. These two sections here in fact, let's go over to our browser so we can see it a little bit better there. We'll scroll past our video section here, zoom out a little bit. But these were created not using Bootstrap containers, but using Flexbox. And the reason for that is, we wanted the images to be vertically centered with the text next to it. So Flexbox was the easiest way to do that. So each of these rows is a flex container with two items in it. So you can look through the CSS and see how that was done, and then the next section here you'll see we have some different text styles. We've got this background here which as you can see is different from the background in the Photoshop file. I've made my own background for this that you're welcome to use however you want. But if we look in our code for that section, we've got SITE15 open up here. And we're gonna over to SITECSS, we're gonna scroll down all the way to this, not the more info section, it is the download section. So immediately under the download section is the wave section. This the div that spans the full width of the browser window. In here you can see there's a background which is inside the images folder here, and that's how that was setup. And then we have this all heading class on the h4, and then we have some special styles for the header and the button there in that section. And then under that we have our news section which you'll notice we're using the after pseudo-class here for, let's jump over to, Our site for this little item over here on the left. You can actually use the before or after pseudo class, I don't know why it chose after, but either way it would work because it's all being absolutely positioned within those parent items. And then under that we have the benefits section here as well, so welcome to look those over. But now we're gonna move on to one of the trickier sections of the site, which is this bar right here. And again, the reason it's tricky and when we talked about this one with HTML, it's because we have this background that changes color half way across or two-thirds of the way across, and those colors extend all the way to the end. Now if the background ended right here where the container ended, then it wouldn't be much of an issue. But since those backgrounds extend all the way to the end, we're gonna have to do something a little trickier with it. But for this left column here, you'll notice we've got this four items lined side by side, we're gonna use the Flexbox module to align those up. And as far as the rest of the text it's pretty straightforward, the tricky part it's just the background. So let's jump into our code and let's see how we're gonna do this. So this is a new section, we're gonna call it the FACTS Section. And that particular section has an ID of facts and it does not have a class of container on it cuz, again, that background needs to extend all of the way across. So, all the text in here needs to be white, so we're gonna go ahead and set the text color to #fff. And then for the background we're gonna use a linear gradient. And I'm just going to copy and paste this linear gradient over here because there's a lot of text there. So we've got linear gradient, and we're going to the right and at the left, at 0%, this is our background color, 0084FF. We've got the same background color at 66% of the way across, which is two-thirds of the way across, and then also at 66%, excuse me. We've got this new background color the lighter color which extends all the way over to a 100%. The problem is, and we'll see it in just a second is that 66% doesn't line up perfectly with our Bootstrap columns. And we'll see that in a second first, I want to add a couple other simple styles to this FACT section, I want to set the font size, To a value of 12px, it's gonna be a little bit smaller than the rest of our fonts, then we're gonna put a margin around the top and bottom of this. So our top/bottom margin is gonna be 60px, left/right margin is gonna be 0. So let's save that, jump back into our page and refresh, and here we go. So we can see that two-thirds of the way across the page should be right here where these Bootstrap columns line up. So the way we're gonna get it to line up is we've already got the left edge and the right edge where we want it. Now what I wanna do is I wanna take this second column here and just give it the ending background color. And that should extend this background color over here to the left, just left of where the text is. So let's jump back into our code and if we go to our html, and go down to that FACTS section which should be almost halfway down. You see we have the facts section, then we have a class of container, excuse me. And then we have a row, and this row has bootstrap columns in it one is two-thirds of the width, one is one-third of the width. And it is this second column here that we wanna give that second background color to and it has a class of facts-description. So let's go back to site.css and just to save some time, I'm going to just paste that rule there. So we're setting the background color to blue and I'm also adding some padding to that section. So let's save that, jump back into our browser and refresh, and there we go. Now that background color extends all the way over here as far as we need it. So now we've got the colors setup like we need them, all that's left to do here is to setup our text. And since that's pretty straight forward, we're going to copy and paste the text, which is just a couple of rules here. And you're welcome to look through those rules, to see how all of that is setup, but I'm gonna save that and refresh our page and there we go. Now again this is probably a section that you're gonna need to go in and make some tweaks to at different browser sizes, because I'm not sure how these over here on the left are gonna look. But again, I'm gonna leave that up to you as a personal challenge. So thank you for watching and I'll see you in the next lesson.