Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.9 The Rest of the Layout

Hello, and welcome back. In the interest of time, I've already filled in the rest of the HTML for our page. The reason for that is, if we go to our Photoshop file, you can see that underneath the Stats section. Which is the last one we worked on, we've got several more sections, and a lot of it is just text. So I don't want to get too tedious with the HTML by making you watch me enter in a bunch of text. And also we need to move forward and get started on our CSS, so I do want to walk you through very quickly what we've done. So our first section underneath the last section that we worked on is this section that has a few separate panels on it. And Bootstrap actually has a very helpful panel class that we can use to achieve just that. And we're going to have to go in and customize it a little bit in CSS. But if we jump over to our browser, we can see by default what those panels are going to look like. So we can create a panel header, which is where we have this text up at the top. And, if we look at that in our HTML, we can see what those panels would look like in Bootstrap. So I'm gonna scroll up to the Choose section here. So just like always, we have a container, and this particular container has an id of choose. In that row, first we have the header, and then on the next row, we have four separate panels. And you'll notice that at medium sizes, there's just gonna be two different panels side by side. And they're gonna be stacked on top of each other. So we'll have two different columns, but then at large sizes and up, we'll have four separate columns. Because that 3 there is one-fourth of the 12 column layout system. But inside these columns, we have these panels. And so the outer div, the container div for that panel, has a class panel and panel-default. These two classes are Bootstrap specific classes that basically make our panels look like what we see here. However, since we need to customize these panels quite a bit, I've also added my own class called panel-products. And we can target that in our CSS to customize the look. This panel-heading class just inside the panel class, this is also a Bootstrap specific class, as is panel-title. Now we might override some of the Bootstrap styling for those two classes, but those are Bootstrap classes. Panel-body is also a Bootstrap class, which defines the main body of whatever panel you're working on. There is also a panel-footer class as well, which you'll see is not included here. Because we're not using a footer for these particular panels, so we have four identical panels. They have some slightly different text in them, but they're basically just different choices for these products. And you'll also notice in our Photoshop file that there are a couple of variations on these panels. The first variation is this one with the blue top here. The second variation is the one with this large drop shadow behind it. So I've also created a couple of extra classes, one of them called blue-top, which is on this panel div. And then another one called shadow, which is on this other panel div, so we can jump into those in CSS and tackle those as well. But that's the panel section. If we go back to our Photoshop file, below that, we have three columns with some testimonials in them. You can take a look at HTML for that yourself, there's nothing really special going on there. And then saying for our frequently asked questions section, we have four different questions and answers. And then we have another panel over here on the right. So if we go down to the FAQ section, you'll see that we have one column here, and then, let's see, down here is our second column. And inside that, we have another panel, and I've created my own class here called panel-subscribe. So that we can customize that one, give it the blue background, and change the button inside it as well. Below that, we have this featured section, where we just have a few different places where our product has been featured. We're gonna use the flexbox model again for this to line these up horizontally and space them out evenly. Below that, we have another one of these blue sections, so this blue background needs to be outside of a container. But the content inside it needs to be inside a container, so we can go back to our code and look at that. Here's the featured section, and here, we're just using placeholder images, if we jump into our browser here. We can see just these placeholder images that we're using for for those logos for all the places where our product has been featured. Again, below that, we have this SMART PEOPLE section, which, again, is this blue section here. So, again, we have this div that does not have a container class on it. Because that's gonna have the blue background that extends to the edges. And then inside that div, we have a container, because we want the content inside the blue background to be contained within that width. And then below that, we have our FOOTER NAV, which has four columns in it and some links and things like that. We can see all of those here. And then we have this extra footer down here at the bottom, which I've included inside this MAIN FOOTER section. So that's the rest of our HTML. Before we move forward with the CSS, I really want you to go in and become familiar with this HTML. Because you're going to need to understand all of the HTML in order to understand what we're going to do with it later in CSS. So thank you for watching, and I'll see you in the next lesson.

Back to the top