Video Summary

All right in this video we’re gonna we’re gonna brand start branding our color scheme a little bit more throughout the site and we’re gonna change these golden 10 colors into our actual logo colors. Now we have our nice logo up here, but that’s just black and white and we do have some color we do have we started doing our colors down here or at the button for like the intro of the website, but we haven’t really gotten into too much over here yet. So what we’re gonna want to do and I just saw that we might we’re gonna come back and we’re going to change this providers change this text to a blue but first of all, before we get into that I’ve already forgotten what exactly the hexadecimal colors are for here. And I don’t want to really have to go back into coolers, upload the photo breakdown, which one of them’s which each one of them are and copy and paste it over. And also to is roomy, roomy stylus, the rest of the site to the cars that we want. So I’m gonna I’m going to open up the slider revolution. I’m going to click on here and I’m gonna do the style. And what I’m gonna do is I’m gonna copy copy this, and I’m gonna go into our customizer I’m gonna paste this here, and I’m gonna enter down and I’m going to exit out of here, go to hover to get the hover color, click on BG copy.

Okay, I’m gonna come back to the customizer, I’m gonna paste this in. So I’m gonna since they kind of do like, red, I know it’s not quite red, but I’ll know the difference and I’m just gonna put this a space with this one as blue but what I’m gonna do is I’m gonna copy this, and if you do Command or Control and do the forward slash, you get or you can just type in the forward slash Astrix, force that and then Astrix forward slash at the end. And basically what this does is now we can have some code in here that allows us to that allows us to be able to access this without actually without it reading the code, right? Because if we didn’t, if we didn’t block this as a comment section, the interpreter the coding interpreter would try to make this an actual car trying to make sense of it, and it would break a lot any code, any CSS code we had below here, right? And that kind of remind while we’re here to us before we get too far, I always like to I’ll do I’ll do a forward slash. And we’re only doing one page for right now, but I’ll just do a homepage. And then what I’ll do is I’ll put in a couple extras right here. Just to know that this is the homepage section. And then I’ll just come down here. I’ll do the same thing. I’ll put in a comment. Put in service section that way, because like I build websites where I’ve had over like 1500 or 2000 lines of code, and when you you know, it’s easy, it’s harder. We want to make it easy on ourselves if we need to go back and check out this code later. And what I’m gonna do too, is I’m gonna cop I’m gonna cut this out. 

So we’ll come here and let’s go over here. Let’s refresh this. See how this looks. So now we got it’s a thumbnail. So it’s basically just a square. It’s a small square that forces you. And if we come back over here, and go back to the single image that we had right here we open this up, we get a medium, large, full and other side and you can actually do like 100 by 100 or 200 by 300. You don’t actually put the pixels here, you just do the actual 200x by you know 200x 100 plus 200 by 100. What I like to do is I just do full because if you think about it, and I’m gonna save this and update this is that the image is only going to be as wide as the column that’s in so I just have it be as large as it can be. I am 100% happy with that. Let’s let’s refresh this and see how that looks. Now I think that looks pretty awesome. I think we spaced out the colors very well. We got you know we got the kind of the red and Oh and here’s the thing too is we didn’t we forgot to do the hover. So what out so I think I’m gonna pause this video right here because we’ve done a lot, but what I’m going to do with our pauses here, and we’re gonna, we’re gonna make sure that our hovering is the colors that we want it to be. Alright, so with that being said, let’s just finish this up with the hover and we have finished our first section. Oh, and we will change this as well in the next section as well. we’ll change this to things just changing that to will work.