Hello. So today I'm gonna go over um one of the final steps that we're going to do in the portfolio and that's just gonna be adding in the connectivity of everything. So right now one of our links work at all. They're all completely empty. Um I'm not going to spend the time doing like intense adding every single one of all of the socials and everything in because it will be so time consuming. So I'm gonna do I'll do all of the novel and I'm gonna kind of do one of each, one of the other ones to show adding it in and then the rest of them will follow the exact same style. So if you recall we went through and we added in um and I. D. To each of the sections like socials. Oh this is in the Bronx. I wonder if there is another word container. No wonder if we have a CSS for that. We might have changed that style and moved that and then never. Perfect. Okay so can I have two ideas um so if you want to change this to works actually while I'm remembering, what we're gonna do is we're gonna go through and we're gonna put the hash in front of each of the sections with the I. D. That matches the section name because we kept that I'd be consistent. So now when we click on them it will bring us down to the section that we want one thing I do want to do is change the hover here to be this this text color there. So we're gonna go over here and we're gonna do. And a dot I'm sorry got colon and we're gonna do a color. Let's go find the apple. Do this one here. Oh you have her. It might have been not working. Is not a class or let's find out. Mm hmm. Traveling color. Okay, so let's click on so you can go here and you can force a style strike this up so you can see this more and we're going to focus hover and now public focus in dot Navin cover. We're seeing it right there and that's from bootstrap. So what we need to do is we need to override that. And so we will do, we'll set it for our normal a as well. But we're also gonna do that. Nab excuse me, nah, blink however and we will just copy this here. So now when we have over any of these, they should be the correct color there. So Perfect. So what we're gonna do as well um is we're going to go back to these are our sociales here. I'll just take twitter because it's nice and easy there um to profile perfect and but in a match, twitter doesn't have a hover color there because the image doesn't have a hover on it but I'm actually fine with that. I don't really feel like it needs it, I think it's it's intuitive, what we could do is maybe just drop the opacity a little bit. So this has a class of logo, so we can go ahead and do let's see where our logo is. Mhm Will do dot logo hover we'll do a capacity. Mhm. Type uh 75%. Perfect. I think 75 is a bit low. Maybe we'll do 85%. I just wanted to be very slight perfect. Those ones are done now for these, we didn't set these up to be clickable. Um Well I did it, I seem to lapse in that. So what we're gonna do because we used to defer a button there, we're just gonna wrap the dip in an a tag. Um while it might not be the it seems to me to do it it is completely acceptable. Um html It will work for the exact intention that we wanted to. So what we're gonna do is we're going to add in the trivia game there um The trivia game we can find, I'm serious about it and we're just gonna do copy link address, there's a draft. Um But something we actually want to do for both this and all of the other external links, so are sociales and everything like that is we want to accept the target to blank so that it opens in an external link because right now if we click on twitter it's gonna move us in the same window or when you click on this now it'll open a separate link which is what we want, so we're gonna make sure that anywhere we add in a link we're going to be adding in that target and we'll do the targets like there so the buttons are gonna be done in the exact same style there. Um We have our bottom socials here um which brings us back to the top because they just have the hash there. Um The bottom socials will work in the exact same way and then we have the male. So the mail here I believe it's mail too but um well too you know Male two. Yeah. Okay I was right the first time it's been a while since I've done this so we're gonna do mail too and we'll say amy at code cast dot io so when you click on that and it opened it up in in my other screen but it opens it up with the correct ones there. Um We can also change the example there to be the correct thing so we'll just say amy at code cast Ohio and now all of this should be equally applicable so yeah it's all it's all clickable there which is perfect and that's just our basic functionality that we've added for connections there. Um We have two more things that I want to do before we deploy. One is stopping it from auto scrolling here. Um It's this it's because of the I. Frame it out across the I. Frame so this is a common issue that happens, so we're gonna work on stopping that from happening. Um And then I want to just add in um and talk a little bit about how we can add its animation. I'm gonna do a very simple example and um just probably do a typing effect for my name here and then we will deploy so I will see you guys in the next test.