Alrighty, so for both the video background and the image background in our contact section, we're going to need to create a link element with a mail to. So let's get started in our HTML. First, we can minimize our project section because we're done with that for now, we're going to go into our contact section, and we're going to create a mail to link commented out title. And below that we're going to start with a element. And we're going to give this a mail to have your email dot address. Then we're going to give it a class of contact mail and then a target underscore blank.

So that it opens in a new tab, and real no opener for security. And then of course, inside the ailment, you're actually going to write your email address because that's what users will actually see. The next thing we're going to do is we're going to actually go back into our home section. And we're going to copy this video background element we had here. And we're going to minimize that. And we're going to paste this below here.

We're going to fix the spacing here. And we're going to change the video source to our second video, which is the video game background mp4. And we're going to change our ID to video dash background dash two because we want them to be unique now Ready for the CSS. So we're going to start by changing our background color to black, just in case even though we shouldn't be seeing it. And we're going to target our contact mail. And we're going to give it a position of absolute color, white height 100 pixels.

This is so that we limit the error that can be clicked to follow the link. And we're going to give it a font family of Alex brush, which was our custom Google Font. You could use different Google Fonts if you want of course, and we're going to give it a font size four REM, a margin top 10 Vh to give it some space above a z index of two to make sure that it stays on top of the video or image and net I'm actually going to modify the contact ID properties. And we're also going to give this a display flex, as well as a justify content center. That'll justify everything in the middle of the page, the last thing we need to change is we want our email to be underlined when users hover over it to show that it is something that they can click on.

So we're going to target the contact mail class, but we're going to target the hover pseudo class, and we're just going to give it a text decoration of underline. We're also going to give it a transition to make it more of a smooth animation. point five seconds and ease in and out. And then we're going to copy that transition back So that it's smooth both ways. All right, and we can actually copy our video background ID properties from before. And we're gonna just change adding the two there.

And instead of position fixed, we're gonna give it a position of absolute, because we don't want it to be at the top there. And we can also change the width to 100%. All right, so let's check that out. All right, that's looking pretty, pretty awesome. So we have our, our nice video here. And see we have our project section here.

Navigation scrolls down to this position. And as we go over our email, it's underlined. Very, very cool. guess the last thing we could maybe do is we could add a splash of color to this. It's it's very white. So maybe we'll add our primary color here.

So back in the code to do this, we're going to start by modifying our HTML, we're actually going to create a span here. And we're going to have our at symbol inside of that. And we're also going to give this a class of red. And now we're going to go over to the CSS. And we're going to give put at the bottom here, red, and color. And then our red color.

Again, automatically filled in by Visual Studio code. Very helpful. And yeah, let's check that out. All right, cool. A nice little splash color. There.

We have our video background going. I think that looks pretty great. Now, if you wanted to switch this out for an image, it's actually a very simple process. So first, of course, make sure the image is in your asset folder, and that you optimize it with tiny PNG. Next, we're going to go back into our HTML. And we're going to comment out our video background.

And then we're going to go into our CSS. And we're going to comment out our background color here. And instead, we're going to give a background URL. And then we're going to autocomplete the path to our image folder and our mountain background. And that's it. So we can add the semicolon there, of course, to make that valid.

And now we can check that out. All right, so our pictures a little bit big. We probably need to fix that so we can give that a background. Background size of cover and background. Position center and background. Repeat.

No repeat. We just want it one time. All right, let's check that out. All right, perfect. That's looking a lot better. And yeah, so that's it for adding a video or an image to your contact section and just having an h1 link in there.

Alright, so in the next one, I'm going to show you how to use a business card mock up instead for your contact section. All right, I'll see you in that one. Bye for now.