Alrighty, so we're gonna start working on the CSS for our about section. First, we can actually just clean up our editor a little bit. And we can also split our editor again. So we can have a look at our HTML at the same time. Again, we can work wrap this shortcut is alt, z. Okay, so we're just going to have this as our whole ABOUT SECTION HTML here.

And, Alright, so now I think we're ready to work on, we can make this a little wider, or kind of our CSS. Okay, so we're going to start with our card, which is a parent. And so we're going to go card and we're going to give it a position relative A top of five u Ford height. In order to separate it a little bit from the top of the section and height of auto. We're gonna give it a width of 40 viewport width because we want it to kind of be in the middle of the page, but we want to have a fair margin on either side. We're going to give it a margin of zero, and auto.

So we don't want to top and bottom margin, but we want to automatically have the left and right side margins. We're going to give it a background color RGBA but this time we're going to go white, so 255-250-5255 and then point eight. So we want it to be mostly white, but just a little bit see through and we're gonna give it a padding Three RAM and 1.5 Ram. So again, more padding on the top and bottom less on the left and right. We're going to give it a display flex. So we're going to use Flexbox on this and flex direction column.

And this allows us to make sure that our elements are all going top to bottom. Okay, so we're also going to take this moment as a time to switch our section to having a specific font all the time. And so we're going to give this a font family of signal I UI comma, son saref. So I'm setting every section to have this default font. And if we want to override it, we can do that in our individual elements. Okay, so let's check that out.

Okay, so that's looking more like a card. You can see we have the white here, but you can see that we can kind of see the background a little bit better. And everything else the title, the text and the V resume link is all in the card. But we still have some work to do. So we're going to start working on our image. Now it can definitely be a little bit smaller than that.

And we want to make it circular as well. Okay, so let's go back down here. And we're going to target our about dash image and we're gonna give it a height Have 35 v h, a margin, zero auto Same as before, a border radius of 50%. So this is what's going to make our square picture into a circle. And then we're going to give it a box shadow of two pixels, five pixels, 10 pixels, four pixels and then we're going to set the color as an RGBA. And we're going to use actually point two five instead of point five.

And this will give it a nice smooth, subtle shadow border. Okay, so let's check that out. All right, so our, our image looks a lot better. It's a nice circle. We have a nice smooth, subtle shadow there. Okay.

That's good. So now we're going to start working on our card body class, we are going to go back to our code and card body. We're going to give it a little bit more padding. So padding zero, none and the top and bottom and then 1.2 REM on the left and right. And on to the card title. We're going to see center it and we're going to do a text align center which is a great thing to use.

We use that a lot, especially with mobile stuff when we want to center our titles. We're going to give it a font whoops font weight of 500, which is the same as bold renaming a font Size of 2.5 Ram. And then we're actually going to add a line that is going to separate our title and our body text. So we're going to give this a width, a width of 100%. So that means it's only going to be 100% of the width of the card itself. So 100% of the width of its parent.

And we're going to give it a padding bottom of 25 pixels to separate the line from the title. And then we're going to give it a border, bottom one pixel solid black for creating our line. And moving on. We're going to make our card text bigger than it was because we have lots of space on the page. So we're gonna give that a font size 1.3 RAM and a margin top zero to bring it closer to our line. And we're going to give it a another text align.

This time I'm going to go with justified or justify, I should say. You could use center if you like. But I do feel like the text align center is better for titles and not good for chunks of text. So let's see how that's looking so far. All right, cool. So we have our, our title here, we have kind of an even space in our line here.

And we have our texas a little bit bigger and you can see it's justified. So there's a little bit of a space extra space between these, but it means that the left and right corners are lining up. Alright, so last time We'll need to deal with our our button here. Alright, so let's go back to the code. We actually don't need to target our list here. But we actually want to instead of the color being blue or purple, so you could see that our button was currently blue.

We're going to give this a color white instead. So we go back and we can see, well, it's white. Now, but because our backgrounds white, we can't see it. So we're gonna actually need to obviously make the button a different color. And then the white will look good on top of that button. All right, so let's, let's target our card button class.

And again, we're going to give it a text align center, because it's kind of a it's not a chunk of body text. It's, it's like a title inside the button. And we'll give it a font size. Have 20 pixels, a font weight of bold a background background color of RGB bracket to one, comma two, two comma two, two tu. And that's like a darkish red color, deep red color. So this is going to become the primary color in this project.

So you don't have to use this red you can use any color you want. Just keep in mind that you're going to want to use this primary color over and over again. And we're going to give it a padding of point five rim, a margin top of three VH. So we're going to separate the text from the button and we're going to have a border radius five pixels. And this will give us nice subtle rounded corners on the button. And lastly, we're going to give it a box, Shadow 00 point three REM so very subtle orange GPA.

And we're going to go with point six, five this time, so a little bit more. And this will help with the illusion of the button getting pressed down. You'll see we're about to do the active part of that now. And you'll see what I mean when we go back to it. So next to complete this illusion, we're going to target this pseudo class active for our card button. And we're going to give this a transform, translate of zero, comma point three REM so you can see the same amount lips point three REM same amount as the box shadow that we have on it.

And that just means that we're moving the x axis of the button down point three rim. And we're actually going to copy our previous box shadow. But instead of point three Ram 0.3 Ram, we'll make it 0.1. Okay, let's check that out. All right, so that looks good. We have a nice, nicer looking button here.

It's the full width, and the text looks good. And when we press the button, you can see that it actually looks like a real button it engages and that's simply by moving everything down and then reducing the amount of box shadow. All right, so I think that looks pretty great for about section. And yeah, we're ready to move on to our Project section. I'll see you in that one. Bye for now.