All righty, so we're gonna move on to the CSS for our project section. We can start by splitting our editor here, so that we still can see the structure of our HTML. And we're going to scroll down to the project section. The first thing we're going to do is we're going to change the color of our section to black. So I like using black a lot because on OLED screens, Black will actually save battery power because those pixels are turned off. That will also allow colors to be more vibrant in comparison.
Okay, so moving on. We're going to target the project's class and we're going to give this a display flex and flex wrap rap, this will need to be applied to our projects groups as well. So that we have three images on one line. And lastly a justify content center and a margin, zero on the top and bottom and 10% on the left and right. Okay, next we're going to be targeting our projects, dash title class. So you can see we're going in order of our HTML, and we're going to give that a color of white, a font size of 2.5 RAM and a font weight of 500.
So remember, that's bold. Next, we're going to need to fill out for our project groups. So we'll do one and then copy it to the other. So we're going to also have a display flex Flex wrap, wrap, justify content center. And we're gonna copy this now and just change the number here. Scroll down a bit.
Alright, so the next one we're going to do is we're going to target our project image image. So this is targeting any image element that is the child of project dash image class. And we're going to give this a height of 325 pixels and a width of 325 pixels. You can change this sizing depending on how big of a how big of a image you can maintain within your grid or depending on how you want to lay out the grid but this is going to work for me because I want to have Three of them in one row and then another row with the other three. All right, so let's check that out. Okay, so we have our first row of three, our second row of three.
That's looking pretty good, pretty good start, but we're going to need to fix our titles, we want them to be centered, we want them to be a little bit bigger. And even at the bottom here, we actually probably want a little more margin, we don't want the next section to start right away there. So let's go back and quickly add our margin bottom. So we're going to add that to our project group to give it a margin bottom of 10 v H. Okay, so we can check that. Alright, so now we have a little bit of a space between our next section. Now we can focus on all of our titles here.
Okay. So we are going to start by targeting our Project dash, item class. And we're going to just give this a text align center, very simple. This will center everything that's within our project item class. And now we're going to target our project title. And we're going to give this a font size of 1.4 REM, a font weight of 500.
Again, that's bold. And actually, I think that's it, and we're going to then target our GitHub dash link class, and we're going to give it a slightly smaller size so 1.1 Ram, but we want that to be bold as well. Alright, so let's, let's check that out. Okay, so we have a nice difference between our titles here, but we can see that we still have too much space between them, we want to kind of bring that all a little bit closer together. So let's work on that. So let's go back.
And we can give the project title, a margin, zero and auto. So that's removing the top and bottom margins. By default, any h element is going to have a margin all the way around it. So we are adjusting that one. And we're also going to adjust this one we're going to make or sorry, we're going to give this a margin top of only one v h. So that's smaller than what it was. So that should bring them closer together.
Alright, so that's looking a lot better. But there's a few more refinements I think we can make to our project. Next page to make it feel a little bit more interactive. So we want when we hover over this to give us some kind of feedback and same with our links. So what we can do is we're going to target our project image, hover pseudo class. And we're going to give this a transform of scale 0.97 so that means it's getting 3% smaller as we hover over it.
We're also going to add a transition or 0.3 seconds and ease in and out. This is going to make it seem like it's in motion rather than abruptly changing size and next we are going to add this class to our Project image class as well so that it transitions both ways. Okay, now we're going to look at our project title, we're going to do our project title. And we're actually going to be targeting the eighth element with the pseudo class hover. And we're going to use our primary color again. So for me, that is a red color that you can see that it remembers all the colors we're using, which is very handy.
And we're actually going to copy this transition so that the text is not just changing color in a split second, it's a little bit more of a delay, and we can copy this for our GitHub link. We're just going to change project title here to GitHub link. And yeah, I think that's all we needed there. So we can see that when we hover over this, it gets a little bit smaller. So it's more interactive shows that we can click on it. And same with these these change, you can see that we have our title here view GitHub repository.
And yeah, I think we're looking pretty good. I think we're done with our project section for now. And I think it's looking pretty great. Next we'll look at the contacts section. All right, so I'll see you in that one. Bye for now.