So here's what I currently have. But notice, if I zoom out a couple clicks, our container is currently centered on the page, and I assume it's actually going to be a left-aligned website. Okay, I'm going to go back to Sublime, we'll go to our layout file, and on the container, I will remove the margin auto. Okay, that brings us to this. But now it looks like we do need some spacing. So let's toy around with this for a little bit. Maybe px-6? Yeah, I think we want about 30 pixels worth of heading.

So I'm going to set a text-base class on it, and that'll push it up to a full 16 pixels. Alright, so let's find our aside, and for each of the headings here, I'm going to add text-base to bump it up. There we go. Next up, I noticed that the sidebar is actually a little bit below the main content, or the primary content. So you'll see if I go to the top of the heading here, it's pushed down just a little bit. Okay, no problem. We can either do that directly on the aside, or even on the heading if we want. Okay, let's start with this, PT10, come back, refresh, maybe PT8.

So now I want to start working on the main content here. Now we're not going to do the primary section for all of these pages because this isn't necessarily a CSS series. But I do want to go through the basic workflow, and then it's just a matter of rinse and repeat in the background. Okay, so to start, I need the logo. Now we've already downloaded that up here so I can reuse it. But we also need the inverted or the negative logo, right? We could call that negativeLogo. And then I'll save that.

We could call that negative logo. And then I'll save that. Okay, so let's get started. It looks like I need a little card here. So what I'll do is I'm going to go into our Logo view component. We'll start by giving the heading some margin bottom. And again, this is probably a good candidate for a helper, since it looks like it's our default heading for every single page we create. Okay, so we're going to have a div here. And this will be the div for this entire section.

With white being bold. All right. What else? Well, we need this button here for the original logo. All right. So at least for now, that's going to take you to the logo.svg directly. And then we know that's going to be some kind of button class. But we also know that this should be to the left, and this should be to the right. So what I do in these cases is I wrap it within a div.

But we also know that this should be to the left, and this should be to the right. So what I do in these cases is I wrap it within a div. And then we set a class of flex, or even inline-flex. And then I will do justify-between. And then I'll make sure this is all the way to the left, and this is all the way to the right. Next, though, you can see I've added a second root element. And as you may know, view components require a single root element. So we'll do that. All right.

So we'll do that. All right. If I come back and give it a refresh, this is what we get. All right. So immediately, I can see this section right here needs to be a locked height. Let's see. 382 pixels. All right. So style. height.

Maybe my install of Tailwind doesn't set a block level class for picture elements. But I think the new version, the 1.0 version of Tailwind does do that. OK. So now we do have this big picture element, as you see there. Let's go ahead and give it a shadow. And I'm going to put it directly in the center. So display: flex, justify-content: center, and the align-items: center. Refresh and there we go. Next, we need some space below it. Let's see.

But now I can see that this section, it looks like it's 900 pixels wide on my machine. But it looks like we're going to have a maximum of about 640 pixels here. So let's figure out what our total website width should be. It's a small site. So let's see. I'm not going to do a really large layout. Yeah, like 920 pixels. So here's what we're going to do. I'm going to override the default container. So let's go to app.scss and we'll do it.

I'm going to override the default container. So let's go to app.scss and we'll do it. This could even go above, but we'll do this right here. And we'll set a maximum width of 920 pixels. But at this point, because I am using my own container, what I can do is turn off the container that Tailwind includes for us. So I'm going to get rid of that. So let's come back now and for a quick before and after. So here's our container. It has a maximum width of 1200 pixels, but if I give it a refresh, now it has a maximum

So we always know how much space that will be. And I assume it's something like 60 pixels. Okay. But next, if I come back, this will be the negative logo. And let's update these. All right. Come back to Chrome. Give it a refresh. But now I need the blue background here. So on the wrapper, I could say bg-blue, refresh.

So now if I come back to Chrome and we give it a refresh, yeah, it's tweaked just a little bit. You probably can't even tell on the video. It's just a little bit lighter. And this is what we get. And one thing I can see is at the very bottom of the page, the text is kind of locked there. Let's give it a little more breathing room by switching to app.blade.php. And we'll just push it down an arbitrary amount on that root container just so I can scroll down. And that looks good.