 Hello, my friend and friends and welcome back to the final installment in the series where I'm building out of this front end mentor project. We just have a little bit of last stuff to do primarily in the footer. So let's jump right into the code and finish this up. So this is what we're going to be working on and yeah, overall I'm pretty happy with how it's come together. So let's fix the footer and we'll sort of then go through and see if there's anything else that does need to be fixed up. So let's open up Figma and see the big problem that I ran into and let's just do like an overall comparison of what we're at. So this looks pretty good. I don't know if we have the right hover effect up here, but that's looking pretty good here. I think we're okay. I'm happy with everything there. This area is looking pretty good. This looks like it was bigger. But again, I know I'm in Figma here and they're showing it diving into there. I didn't set mine up exactly the same, but I'm pretty happy. It's close as we saw in the last video. We could play with that a little bit more here. Obviously ideally we'd be more centered than what we are, but we're close enough. I think it's working well. It's not like an infinite scroller. There's other limitations to how this is set up. Overall, I think it's okay and follows the idea of this and it's using the scroll snap and stuff. Get started is fine. We could have more spacing here. So let's do that one really fast. This looks okay and then we have the footer. So really we just have the footer. I'm not going to worry too much about the form validation on that, but for the rest of it, I do want to try and get it a little bit closer. Getting the order in order, which I didn't realize was busted on this, but we're going to refactor basically the footer organization, though it won't be like a big, big refactor. So let's start with that spacing because I think what I originally had done, let's go to my CTI. I changed the padding block to 900 here, but I never changed what it was on the section above that where it was still 700. So I think 900 gives us that extra space. The actual design, it has it a little bit bigger than that actually, or quite a bit bigger, but I don't want to overdo the spacing either. I think we're okay. Cool. So, you know, that is one, I guess we could look into increasing that or you know what we could do. I know what we could do because basically here it's like double the size. So the reason for that margin top 900, I don't know if I have a class for that, but then we could come to here dot margin bottom 700. Perfect. 900 block start. So that's the top becomes 900 and then that should give us more space on the top. Oh, top. That would help. There we go. That's probably more in line with the design. So now is the footer. So the issue I ran into originally with the footer was how I'd organized it. In that, let's turn off responsive mode for a minute. When I set this up, oh, my icons are disappearing too. We're going to fix that all. I didn't even realize that happened. Whoops. Oh, wait, oh, I forked the wrong code. No, I didn't. Okay. I thought I was working off the wrong code base. So we have to fix some stuff down here. I didn't even realize how bad it was. So I think what we're going to do is actually pull all the pieces out. So originally we had the wrapper, which is fine. I'm going to keep the wrapper. Then we have my social social. So that div primary footer logo social we're going to get rid of. We're going to have my logo. Yep, we're going to have my social list. That's the closing so we can get rid of that. Then I had this div of primary footer nav, which I'm scared. Actually, we can keep that primary footer nav is fine because all of that is just this and then we have the form. So I'm actually going to delete this which might break some stuff. I'm going to comment it out just in case it breaks things and we're going to comment this out. So that means we have my form and we have the paragraph and all of them are individual separate pieces. Then let's go find my form. So the primary footer wrapper, which is what we were working on, I have the design here. I'm going to keep it off screen and we're going to start with mobile. I guess because it's mobile, we can keep it on screen. Okay, this is what we're trying to do and then this is what we have right now. The advantage with changing it. So grid template areas, we have our form at the top. So we're going to form nav social. So we're just going to call this one social, social, logo and copyright, copyright, right. It's not a copyright or it's the copyright. Okay, so by doing that, we got rid primary footer logo social. We got rid of that, didn't we? Yes, this is doing nothing anymore. It's commented out just in case. And let's save. So here we have, let's just make sure my my social list primary footer. Hey, this is the one I want area labels home. So let's give this a class is equal to footer logo primary primary footer logo. I guess primary footer logo. And the only reason I want to do that is because here then we do my primary footer logo. That's the grid area of logo. Nice. Let's undo that for a sec. Yeah, okay, it worked. I knew something moved. I just wasn't sure what. So logo and then it moves the logo down. Next, we have my form. So the form right now, we're just going to go with a very consistent div. That's my navigation form. We'll do a class is equal to primary footer form. You know what, I'm going to double underscore and we'll fix the other one too while we're here. I didn't have like that too. See, I'm mixing things up throughout this project. Primary footer wrapper logo and wrapper. We'll do it too. We'll do things. I've been using them in other spots, I think, or maybe when I started using them, I hadn't been using it from the beginning. Primary footer logo. The new one we got was the form. So that one gets the grid area of my form. Now we double underscore that one. I already had the primary footer form. Oh, that's the one I took out. Okay, which that grid might be broken now, but we'll get there. Okay, and this would be class equals primary footer copy. So then we come back here and primary footer form. This actually can all go on this now, which means this, yeah, we're going to have broken a couple of things here, I think, but that's okay. Primary footer form gets the grid area of form, display flex, so that's working. It looks like we need to fix something on there, but that's okay. The other thing on this entire grid, I'm going to do in a line, no, justify justify content of center. Better. Better. Which surprises me that it's not. Oh, it's because we have the link inside the image. So here is the link and we have the SVG class logo, MX auto. There we go. So the only thing is sort of the width of this now and the color of the copyright. So the color of the copyright is easy enough. We're going to have that now. Copy right. Did we not make, oh, we didn't even have to position it. I'm going to anyway. So let's do that here. Primary footer copy right. I keep spilling it with a W copyright grid area. Copy right. And the reason that I'm doing this is so when we reposition the grid, it's going to follow it. And we also need to do an opacity of like 0.5, which seems a little bit low. So I talked about this when we originally did it, but I'm going to make it a little brighter than the original, the original layout. So that looks pretty good. The spacing actually looks pretty good. It's just the width of this that actually looks kind of weird. But let's go to big screens now. And this I think should be a little wider too, actually, but let's get to that's okay that it stays like that. Oh, I have I broke everything right. So here's where. Oh, I don't have anything. Okay, here, primary footer wrap. Oh, that's what I was using for my margin in lines originally. Instead of doing this, which broke everything. Nice. But I think it's because my grids were a little different too. Okay, so we're going to keep that one on. Refactoring socks, by the way. So let's call I'm commenting stuff out just in case I do find that I need it again. So actually on my social list, those. I will fix that after we'll don't get distracted Kevin here. We have my. So here is originally wrappers we don't this is doing nothing. Logo social we got rid of. Just get rid of all of that. And what we're going to do is my primary footer wrapper. Grid template areas. And let's see what we're going to do here. So on my grid template areas. I really thought the groupings of this were better, which is why I did it the way I originally had, but then if it wasn't for this copyright repositioning completely, I wouldn't change this to be honest, but now we're going to get. Nav nav. Or no, just one nav because it's one div nav and then form. And then we're just going to create another row, which is a social nav and copy. Right. Without a W. Boom. There's obviously issues, but the MX auto is going to break that, so I'm going to have to turn that off. And we'll find another way to replicate that. That's fine. So there, there we go. Not too bad. If you remember the icon size was actually smaller at larger screens, and I had done something in the CSS to address that, which I might have deleted or it might be floating around in here doing nothing gap. Logo social. So I think let's. Okay, let's go. It was a while ago that I did this. Where's my social links footer nav. So that was this social icon. Do I have anything for social icon find dot social icon right there. Size 600, which was the original one. And then we must have another social icon. We do. And that's it. Oh, I must have deleted the other one then. Social icon at media min width of 47 m. So when it changes the dot social icon width is a var size. 400. I must I thought I had this and I must have deleted it at one point. Because if I hadn't, that would prevent them. That should prevent them. Oh, because they have the max width and max width. So I'm going to say that. And we're also going to say max width is. Inherit. Is revert. Basically, I don't want them like I'd rather like it's causing overflow now, but I'd rather that we're going to fix up other things that might be able to fix that or change the break point. Instead of it. Actually getting smaller and this should be a size five maybe they look small. And we want to shrink the gap. What is causing the gap here, Kevin? The gap here. So we just come into my dev tools. We find this. The gap 600 there. So that was on my social list. So social list half right in front of me. So let's do that here. Social list. Gap is bar size. Maybe that was the one that I wanted 300 on. So they get quite a bit closer together, but I think that actually looks pretty good. Now part of the problem is they're all centered, which we don't actually want. I'm trying to think if there's because ideally what we're actually getting. These two are kind of like as small as like they're just sort of stuck at the sides and this is taking up as much room as possible. So when we switch to this, what we might want to do is is a grid template columns of min content. One if our min content, which might break stuff when you use min content, but that sort of worked. Sort of worked on the two sides. I'm happy with how that's working. This looks like I thought that was styled a little differently, to be honest. So we'll fix that up. I feel like I missed. I feel like it's not cool. I feel like I made a mistake somewhere here. Let's find that. That's my input order padding size. I'm going to put 200 on the top because I find it's a little too tall. Oh, that broke stuff. Oh, is this getting stretched? Yeah, it must be. I didn't realize the go wasn't there input is there. So let's just come back up to my grid justify content and align items start. That looks better. That's what I thought. Okay. So that's good. With my dev tools still opened. I just want to find, see this. I want that, like actually let's turn on this grid grid. I want the grid I actually am kind of happy with. It's this is too close to here. So what I might do is set that's my navigation footer nav max width of 30 rem. See, I've got a little smaller there. Let's put an outline on that outline. Let's put an outline here. Outline of three pixels solid line. Perfect. So when I didn't have that max width on there, it's going to fill up the whole space by doing this. Let's put an outline of auto. I can get it. Ooh, that changes this as well though. That's okay though, maybe. And then it's more based on the gap that's on that because that one, if you remember when I made that use columns. Oh, so we can't visualize that. But the nav here, we were using the columns to exactly. And then we had the gap that's coming in between them. I'm going to refresh. I think we're okay. That scared me. So let's turn off that outline because we definitely don't need that anymore. Footer nav. We only have it once. Find columns to footer nav footer navigation. I'm going to take all of this and put it somewhere that makes more sense footer wrapper logo form copyright nav. So we have a footer nav and a footer nav, which is kind of weird. So I feel like this should be footer nav wrapper or something like that. And then that would be inside of it. So here the clamp, the smallest to the biggest. I remember I was struggling a lot with this last time. If you weren't here. So we're going to figure this clamp. Okay. So let's just say it's 10 viewport width, which I don't want, but oops. I'm saying I don't want to watch it work perfectly. So I don't really want that, but then we're going to clamp that. So let's say clamp of four rim, 10 viewport width, seven rim. And then let's do our inspect and then let's do responsive mode. And let's see. That looks okay. So we're running into that where everything is banging into each other. And then we sort of get better and even now because of the gap look, this is actually working out better. The only problem is the logo, which I think we can fix easily. Perfect. I should have done it like this from the very beginning. So we have two choices. We can use a different breakpoint, which isn't the end of the world because I also want to make it this bigger, which is my input input. I'm going to, I don't want to increase this padding too much, even though a little bit does make sense. And that that's okay. Actually, maybe I'll do a 500. You could set a minimum width on this too. So like min width, just in case you ended up needing a long one, but min width of 30 rim, which is going to be way too big. This is something like that probably fits more with the design. This gap is still, it's just, there's not enough room for all this stuff to go next to each other. So at large screen sizes, we're here at large screen sizes. The problem now is the copyright needs to be text align right. So we could do my primary footer copy right is going to be a text align right. And then when that gets to there, it goes away. So that's okay. Which means it should actually be centered and this needs to be centered form. I am going to refactor, I'm going to keep refactoring my whole footer here in a second. So this, we definitely don't need that anymore. Okay. So this is working just by content centers putting everything in the middle. But the problem is some of these things are nested within other things, which is why they're not in the middle or they're just, we have a paragraph, which could be longer. So we're going to say that the copyright is a text align center or yeah, that's perfect. Text align center and that gets overwritten. Then we have the logo, which we could do display flex. No. The margin in line auto didn't work right. Oh, but then it caused us a problem here, which is still there. That sucks. Oh, and by doing that, I've realized everything is off. Another thing we could try. This is what we sort of did last time. But the nesting of everything changed it. But I'm noticing not everything's actually centered right now. So we could say this is what we did originally. Star margin in line auto and it's no. Okay. We'll just leave that then. We took that off. Maybe I had a typo or something. Okay. And then here. So we just want this and that originally do we have that again or did I delete it? I think I deleted it. Min width. It was this one. Why? Okay. Whatever. I don't. It's everything's okay now. There we go. Oh, know what I did. I put a min width without thinking. You don't want a min width. We want this to be. Okay. I'm going to say width 100% and make this a max width. So it can shrink. No, we won't. Max width 100% and a width of 14. So it's 14. But then if we run out of room, it should shrink. It doesn't want to. So let's try this. Choose the smaller between 100% and 14. Ram. There we go. Oh, because it's choosing the smaller. Choose the smaller or the bigger. Choose the bigger should be a max function. Max. What's. Oh, but we have the min content here. So it's shrinking everything down. And then here it doesn't have the min content. So it's able to fill up the space it needs to fill up. Choose the bigger of the two, but shouldn't, if it's using a max value, shouldn't the max value there be 14 rim? And then so it should be using that. It's right here. What if instead of min content, I put auto? Probably the same thing, but apparently not. Okay. That was a happy fix. I thought auto and min content were basically the same, but you learn something every day. Cool. There we go. It breaks at a better point too. Are we getting overflow or the text is wrapping and this is actually shrinking down now a little bit. It's kind of awkward here to put your email address in. So I mean, the break point could be adjusted for that, but not bad. Not bad. I'm pretty happy. A little refactor on that. So the last thing I'm going to do on this, we got it all working. It's just a bit of a mess with our footer nav and footer nav. I mean, this is saying nav. I'm going to put nav wrapper. So it's just, and then we have the footer nav, which is fine. Copy this. Find. Do I have it anywhere else? No. It's the only place in here. I have it. Okay. So let's save that. It's going to break some stuff. And then footer wrapper. That should make it a little bit more sense in there. So let's go through and see footer nav. A. I just want to make it a little bit more sense. Let's go through and see footer nav. A. I just want to make sure there's nothing really funky in here. Socialists. Social icons. Okay. I think we're okay. The naming of stuff isn't too bad. We have it. And it's done. And I'm super happy. Cool. Nice. So there, the site is basically done. I think everything is looking pretty good. There's probably a few things that we can improve on. Feel free to put in a pull request on the finished repo that is down below. If there's anything, I won't bring it into this version, but I might make an extra version that has the changes that people have suggested if they're big enough. And if they're little, little tweaks, I might just pull them into the final repo. I really hope that you enjoyed this series. It's not often I do longer series like this. So I hope you really did enjoy it. And if you'd like to see more of them, please let me know in the comments below. And with that, a very big thank you to Jan Johnny, Lucas, Mr. Dave, Patrick Simon, Steven and Tim for all being my enablers of awesome, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.