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

2.6 Laying Out the Video Section

In our last lesson, we laid out the first couple of major sections of our page. And again, they don't really look like what we're going for just yet. But we're just trying to get the HTML out of the way before we start styling everything. I like to take care of the structure of my document before I start worrying about the styling. So I'm going to jump back into Photoshop here and we'll take another look at our page at what it's going to end up looking like. And if we scroll down to our next section, as we've mentioned before this section is going have to be handled a little bit differently. Trying to lay out this section using Bootstrap is gonna be a little bit tricky because of the way the background works. Now, there are certain ways that it could be done, but I would rather just keep it simple. We've got two major sections here, a section on the left which is going to have a video. And what I wanna do with is, is I wanna put a background image on this particular section that spans the whole width and height here. So we're not gonna see a grey background. Instead, we're gonna see what would be a thumbnail of a video. And then when we click on the Play button maybe the user would have a modal that pops up and plays the video. Now we're not gonna actually build that video functionality in this course. We're just gonna layout the basic page. But then on the right section that's obviously very simple. We're just gonna have a blue background and some text. So let's jump into our code. You'll notice we have a new folder in the project files folder site006. So all the changes we make in this lesson will be saved there. And I've got that site006 folder opened up in Visual Studio code. So I'm gonna scroll down a little bit. We have our main section, our awesome feature section. And then after that, we're gonna have our video section. So remember this Video section is not gonna be inside a Bootstrap container. We're not gonna use any Bootstrap for this particular section. Instead we're gonna lay this out in a little bit of a different way. We're gonna have two columns but we're going to create those columns ourself and we're gonna do that using the flexbox model in CSS. So for now we really just need to worry about getting the HTML done. So I'm gonna create a div here. And again, we're not creating a Bootstrap container here. So I'm just gonna give this an ID of a video-section. And inside that video-section div, we're gonna have two separate divs that are gonna represent out two columns, the video column and the text column. So our first column is gonna be a div as well. And I am gonna give it an ID of video-contain, not to be confused with the Bootstrap container. And then after that closing tag for that div, we're gonna create another div and this one's gonna have ID of video-description. So those are gonna be our two columns and then inside those columns we're just gonna have some basic content. So for our first column, all I really want, I'm gonna jump back into Photoshop here, all I really want is this play button. And we're not gonna use an image for that. We're actually gonna do that using HTML and CSS. And the way I'm gonna do that, let me just paste this code, is I'm gonna create a link, an anchor tag, and inside that link, I'm gonna use this HTML character here which is ampersand pound x25b6 semi-colon. And that's actually gonna give us the play button. And you can do a search online for HTML special characters to see all of the options for that. But that will give us a play button. If we save this right now and jump into our browser. And refresh and scroll down a little bit, you can see down here in the lower left hand corner we have a little play button there. Now eventually that's gonna be bigger and we're gonna put a circle around it, but for now that is all we need in the HTML. And then in our second column, we're just gonna have some text. So again, I'm just gonna copy and paste that text. We just have an H2 and a paragraph. So I'm gonna piece that here and there we go. So now we can save that again, jump back into our browser and refresh. And now we see our play button here and then our text down below it. Now obviously, once we get into our CSS we're going to lay this out a little bit differently. But as far as the HTML goes, that's really all we need for that section. So with everything saved, we'll move on to the next lesson. Thank you for watching.

Back to the top