All righty, so this section will be the most straightforward of any we've done so far. Section 10, the footer section. So basically, we're going to be copying the Font Awesome icons we had in our home section and we're going to make them smaller. And alongside that, we're going to add a small text area for our page author and the year it was made. Alright, let's get started. Alrighty, so the first thing we're going to do is we're going to minimize our contacts section.
Then we're going to go into our footer section, and we're going to create a div with the class footer dash icons. And inside of here, we're actually going to copy our social media icons from our home section. That makes it nice and easy. And we'll minimize this and less We're going to paste them in here. And we can fix the spacing by using Shift Tab. And below this, we're going to create a p elements p dot footer dash text.
And this is going to be where I'm going to put just my name, and then the year, but you can put whatever you want for your footer text. Alright, so we're pretty much done with the HTML for now. We're going to go into the CSS and we're actually going to change this footer. properties here we're going to add a display flex a justify content center. So again, that centers things horizontally and align items center will center things vertically. Next, we're going to target our icons themselves with the footer dash icons FA icon, only targeting FA icons that are the child of footer icons.
We're going to give that a font size of two RAM, a margin left of one v w so that there's some space between them. And we're also going to target the hover for this so that when we hover over our icons, we have a color change. So we're just going to add the hover pseudo class. And we're going to use our primary color. In my case, it's this red color. And lastly, we're going to target our footer text.
And we're going to give this a white that is just a little bit see through like we had previously for our card, I believe, and we're also going to make sure that the text is centered. All right, so let's check that out. Okay, that's looking pretty solid. And when we hover over them, we have our titles And we have a nice color change here. The one thing you might notice is that it's a little bit off center. That's because we have a margin left on the first one when we don't actually want one to be there.
So we can change this by going back to our HTML. And on the first one here, this FA icon after our title, we can actually give it an inline style, which will override our CSS file and we're going to give it a margin left of zero. Okay, so let's go back and check that out. And you can see that we have our four that are kind of centered over this text here. That looks great. Perfect.
So that's pretty much it. We are done with the main parts of our site. We have our homepage with our icons here. We have our menu, we have our about the next step is we're actually going to make a resume component that's going to be optional. And we have our projects here, and we have our contact page and our footer. Alright, that's it for now.
I'll see you in the next one.