Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
143577 gravit designer landing page 400x277 v3 110717
  • Overview
  • Transcript

3.3 Styling the Video Section

This section of the page needs to be handled a little differently than the others. For this lesson, we’ll venture outside of the Bootstrap grid layout for something a little more custom.

3.3 Styling the Video Section

In our last lesson, we ended up in the site011 folder. Now I've added some more CSS to our page, and so our starting point for this lesson will be the site012 folder. But all the changes that we make in this lesson will be saved in the site013 folder. So if you want to see the changes I've already made, I've basically styled up the next section here, this three column section. And you're welcome to go into the CSS for this awesome Features section, to see everything that was done there. The only thing I will point out is that these bullet points over here on this right column, those were created using a before pseudo element. So you can take a look at that to see how it was done. But since all of that is mostly text, and pretty straightforward, I want to move on to this next section, which is this video section. Now the video section here is going to be done differently, let's take a look at our Photoshop file. Remember we've got two columns here that are gonna take up the full width of the browser window. And so there's no real easy way to use a bootstrap container class to create this. So what I'm gonna do is I'm gonna use the flexbox model to set these two columns side by side. So if you've never used the flexbox model in CSS, then I would advise checking out one of our flexbox courses on Tuts+. But let's jump in and create this. So, if we look at our HTML, we can see this video section here, and we have the containing div, which is just called video-section. And then two divs inside it, video-container, which just has the play button in it, and video-description, which has the text. So let's line those up side by side using the flexbox model. I'm gonna jump into site.css, scroll down to the very bottom, and then create a new section called VIDEO. And then that parent container, again, is called video, and it's an id, so it's called video-section. And what I'm going to do here is, first, I'm going to set the height to 600 pixels. And then we're gonna set our display here to a value of flex. Now, by default, our flex items will be lined up horizontally, which is what we want. And so we don't have to set the flex direction or anything like that. But I do want to set a margin, a top and bottom margin on this section so that we have a little space around it. So our top, bottom margin is gonna be 80 pixels, left and right is gonna be 0. So then we have our left and right columns. Our left column has an ID of video-container, and our right column has an ID of video-description. So we're gonna set the flex basis for both of these, which is basically just one way of setting the width, to a value of 50%. And I'm gonna do that for both of them. And then for our left column, just so we can see a little better, I'm going to give it a background color of 999. Now we're eventually going to put a background image over that, but for now, I'll just put that. And then I'm also going to give it a margin-right of 10 pixels, just to put a little bit of a gutter in between the two columns there. And then our video-description column, we're gonna give a background-color, with that same blue that we've been using, 0090ff. We'll save that, and jump back into our page and refresh, there we go. Now, we've got our two columns, and we still have some work to do. Now, at this point, I would go back and forth a lot between your page and the Photoshop file. In order to tweak everything and get it just how we want, so let's see what we're gonna end up with here. So, as I've mentioned, for the video-container, we're going to give it a background image. But I'm going to keep that background-color there, just in case the image doesn't load for some reason. And so, we're just using this lorempixel.com placeholder service. And I've just selected a particular image out of that placeholder service to place there. And then I've set it to center center no-repeat, so that it will be centered within that container. And then I set the background size to cover, so that no matter what, it would cover the full width and height. So let's save that and refresh our page, and there we go, now we have an image loading inside of it. Now, another thing I need to do, since this is overriding this, I also want to put that 999 right here. And then we'll just get rid of the background-color on that line. And that should get us where we need to be. So that when we refresh it, yeah, we see that gray background before the image loads in on top of it. Now we still have our play button up here in the top left, so let's fix that. And that's basically just an anchor tag inside the video-container. So let's just copy this, paste it here and then add an a to the end, and there we go. So for that anchor tag, I'm gonna give it a display of block, because by default, an anchor tag is an inline element. I'm gonna give it a margin of 0 auto, so that it will be centered. I'm gonna give it a color of white, so that we can see it a little bit better. And then I'm gonna give it a pretty large font size, let's give it a font size of 70 pixels, and let's go ahead and save that and take a look. And there we go, so it's still in the upper left hand corner, and when we hover over it, we're getting that underline. So we probably want to get rid of that as well, let's jump back into our code. And let's go ahead, and while we're thinking about it, add the hover rule here, where we're setting text-decoration to none. And then I want to put a circle around this video-container or around this play button. So I'm going to give it a border of, let's make it 4 pixels thick, solid, and we're gonna make this white, as well, same color as the text. And then I'm gonna give it a border-radius of 100 pixels. Then we're gonna set the width and height to 100 pixels as well, and that will give us the shape that we need. We might need to tweak it a little bit, but that should get us a good starting point. Let's refresh and there we go, so yeah, that's a good starting point. We need to center align the text, so let's go ahead and do that, text-align, we'll set that to center. And it's still not perfectly centered in there, we can tweak that a little bit more. I'm gonna give it some left padding in order to make that happen. So let's do padding-left, and set that to about 10 pixels, and see if that centers it a little bit better inside the circle. Yeah, that looks a little bit better. And I also want to change the line-height, bring it down a little bit, so that it's vertically centered a little bit better. And this is just a value I had to experiment with a little bit until I found the right value, but I ended up with 94 pixels. And there we go, that looks pretty good. So now I want to vertically center it inside the container, so what I'm gonna do is I'm gonna set the container as a flex container. And then we'll align the items vertically to the center, so that it will be vertically centered. So, let's go into the video-container here, and I'm just gonna paste those properties, display of flex, and then align-items of center. When you set align-items to center, it will do the cross axis. So by default, our flex is horizontally situated, so our cross axis is going to be a vertical axis. So our align-items is going to center things vertically. So I'm going to save that, and refresh, and there we go, so now we have our left column looking like we want it. And since our right column is just some basic text, I'm not gonna go into a whole lot of detail on that one. I'm just gonna take what I've got here and I am gonna paste the finished version of it. We will save that and refresh, and that's not exactly what we're looking for, and let me explain why. So in our CSS, you'll notice I've set the display here to flex as well and align-items to center. And the reason I wanted to do that is because I want the heading and the paragraph under it to be vertically centered. But right now the heading and the paragraph under it are both separate items inside the flex container. If we go back into our index.html, you can see that video-description is what we set our flex container to. But instead of just one item that we're vertically centering, we have two separate items that it's aligning side by side. So the way I'm going to combat that is I'm simply going to create a div element. And wrap the h2 and paragraph tag inside it, so now there's only one item inside this video-description. And this video-description has been given a display of flex and an align-items value of center. So now this entire div will be vertically centered within that video description instead of each one of these items separately. So if we save that now, and jump back into our browser and refresh, there we go. Now we have a heading and a paragraph and that entire section of content is vertically centered. So that wraps it up for our video section, I'll see you in the next lesson.

Back to the top