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

2.8 A Tricky Layout

Hello and welcome back. In this lesson, we're going to touch on a tricky little section. And it looks like a really really simple section. And the tricky part isn't really gonna be the HTML, but we're gonna have to plan ahead for how we're gonna handle this in CSS. Now one thing I want to be able to rely on is the width of the Bootstrap container here. And what makes this tricky, is that we have a darker shade of blue on the left and a lighter shade of blue on the right. Which on the surface doesn't seem like it should really be that tricky. Except that the colors are extending all the way to the edges of the screen. Now, I'm sure there are a dozen or more ways to accomplish what we're trying to do here, but I've chosen my own particular way to do it. So again what makes this tricky, is that we have these two separate colors for our background. That need to extend all the way to the edges, but we still wanna be able to rely on the Bootstrap container to limit the width of our content inside this section. So we're gonna have the background outside the container and the content inside the container. But we still need to figure out how to make those two different shades of blue work. And the method that I settled on for accomplishing this is to use a CSS gradient. And with that gradient, we're gonna keep the same color through two-thirds of the width, and then we're very quickly going to switch to the second color. And that won't give us quite the effect that we're going for. But it will get us close enough to be able to finish off using a second method on top of that, which we'll get to when we jump into the CSS. But for now we need to build out the HTML for this. So I've created a new folder called site008. Our starting files will be in site007, but all the changes we make in this lesson will be saved in the site008 folder. And we can take a look at our site so far. And what we're gonna do next comes after this benefits section. So, let's open up whatever code editor we're using, in my case, Visual Studio code and let's open up index.html. So, I'm gonna scroll down past or I guess towards the very bottom of our page, just after this last section we created. And this new section highlights a few facts or statistics about whatever this product is that we're advertising, so I'm just gonna call this facts. And we're gonna put all of this in a div with an ID of facts. And remember, this is not inside Bootstrap container here because we need those blue edges to extend all the way to the ends of the browser. All the way to the left and right edge. But inside this facts div we do need a container because we want the content inside the div to be inside that fixed width. So inside facts we're gonna create a div, excuse me, with a class of container and then the rest of this HTML is really straightforward. We're gonna have a row. In fact, let me just go ahead and copy this. We're gonna have a row here and inside that row, we have a div with a class of colsm8, which will take up two-thirds of the width. And then another div with a class of colsm4, which will take up the other one-third. And we've given each of these their own class name here, just so that we can jump into them in CSS and style them appropriately. Now this first column over here on the left, let's jump back into our Photoshop file. And you'll see that we have a few facts here lined up next to each other. The easiest way to accomplish this if we're aligning something along one axis is gonna be using the Flexbox model. We'll be able to space those evenly very easily using Flexbox. And then on the right we just have a little bit of text we don't have to worry about anything special for that text. But for the most part that's really all we need as far as the CSS is concerned. Let me save that file and as always, we're gonna see right now, when we refresh the page that we don't have exactly what we're looking for yet. Here are those statistics and then over here on the right is the text that's gonna be on the lighter color blue background. So, we see that one does take up two-thirds of the width, the other one takes up one-third of the width. And then later on, when we jump into the CSS, we'll see how to make it look like what we're going for. But that wraps it up for this section, so we'll move onto the next. Thank you for watching.

Back to the top