Right. So let's go and create all the different bands. So let's go and create a band for the who we are. So I'm gonna be on my main CSS, I wanna make a selector called. Band and this one's gonna be called Who We Are, who we ah into. I'm gonna go through and pick a background color for it. Now I've got some colors ready to go if you wanna copy me.
You can pick your own colors though if you want to. On the files that we've downloaded on the desktop, I've got my DW exercise files, I'm gonna open 'em up and I've got this one called Colors and there's a bit of text in the colors folder. Okay? And there's my hero color. I'm gonna use the who we are color. So, um, remember to grab the whole thing, including the hash.
I'm gonna copy it and I'm gonna jump into Dreamweaver. And in down here I'm gonna go to my background, color, background color. Click on this and you'll notice I can just type it in down here. Or what I'm gonna do is copy and paste it or you can just slide around and pick your own colors. Great. There's my background color.
Now you notice it hasn't applied over here. Why not? Ah, you say you haven't applied that class. We've made the class. It exists, but we haven't actually applied it to this container fluid. So let's go u call this one band and this one's gonna be called who we are.
Lovely. Same thing in terms of the padding. Okay? Now in terms of how much padding, I'm gonna kind of just guess from my Photoshop document. I want a bit of padding, that sort of size. Okay?
So, um, we can always, it's good when you're throwing it in there just to pick any size and you can go and finalize it later on. So I'm gonna go up to padding. Okay, there he is. And I'll put, I'm just gonna keep it consistent and use 100 and 100. Great. All right, next one is, we're gonna go and do this again for another container fluid.
So insert, now I've got this one here called Who we are. So if I insert another container fluid, I want it to be, which one do I want it to be? Wrap Nest after. Before. I want it to be after. Okay, so down if I scroll down a little bit, there he is there, there's my little container fluid.
So I'm gonna go CSS designer and I'm gonna get a main CSS who we are. I'm gonna add, uh, one called band and this one was called Services Great. And I'm gonna give it a background color. I've got my background colors here. Don't forget the hash. Okay.
And background color pop in him. And I'm gonna go up to padding. I'm gonna use 100. Enter, click in here, 100. You know, notice I'm not typing in pixels, it just, if I had return, it assumes pixels, okay? And it's still not applied over here because I haven't done this Okay.
Band. And we'll use the services. Great. Okay, so we've got our purple and we're gonna do the next ones. Now, uh, that can get quite repetitive using that. If you prefer To do it in code view, that's totally fine.
The first thing we need to do is we need to go to our, um, make sure you're on source code. Now you can keep doing it that way, just so you know, but I'm gonna show you this extra way that you could do if you prefer. Okay, so I'm gonna go to Code View. And you can see here it's pretty easy. I can, there's my opening and close, so I've gotta make sure I grab all of that, copy it, paste. And I might call this one band.
Uh, what is this one? Portfolio? Portfolio. So spelling is pre you gotta make sure you've spelled it right here when you do your class. And we'll do the last one, which is gonna be the footer. So you can see, even though ah, co view can be scary, it's actually sometimes a lot easier just to do things in co view.
So, um, I've got my, uh, different ones here. If I go to Live View, you'll notice I've got a whole bunch of bands down here, okay? Um, I've got my, uh, was it portfolio and I've got my footer. Now notice though, they've got no styling. So what I'm gonna do is I'm gonna go from source code, which is all H TM L over to my CSS. So I go to CSS.
There's my bad hero who we are services. So the exact same principle applies. You just gotta make sure that these names match up perfectly. So I've copied and pasted services and this one was called Portfolio. Okay? And hopefully if you hit File Saveable, you'll have this one here that is actually this exact same color.
So it's two purple ones. So what I wanna do is change this color portfolio to where is it this portfolio color. Great. So I've got portfolio there. So style, the last one, which is the footer, copy him. And here's called Footer.
And I'm gonna go find my footer color, copy and paste, and you can turn it into a bit more of a production line by using code view. So I'm gonna go back to Live View and you can see I've got my hair box, I've got my who we are, my portfolio, my services, and my footer. Great. And whether you prefer to do it in co view or whether you prefer to do it in design view, it's totally up to you. When I'm finished, file save all just to make sure everything is saved and we can move on to the next video.