Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)

Key Takeaways

hey everybody this is the final part part 7 of our series building a responsive website from scratch if you've made it all the way through congratulations let me know down in the comments if you found this helpful as well as any other videos that you'd like to see here on the channel in the future in this video we're gonna build the footer out using CSS grid if you want to watch the whole series from the beginning click up here to see part 1 otherwise let's get into it [Music] so before we get in to actually building the footer I wanted to point out a mistake I'd made in a previous video that I just now notice in the issue that some of you may have noticed already is that there's horizontal scroll bars appearing and this is caused because the hero content the images that we had sort of made offset have forced the container to be wider than the viewport width and that's what is causing these horizontal scroll bars to display all the content so the way to fix that is in our code if we go down into our global SAS file to the body selector we can add overflow X hidden so what this is gonna do is it's going to trim or cut off any extra content outside the viewport width so now when we go back to the website there's no more horizontal scroll bars which is good but we can still scroll vertically because we only did overflow X hid not overflow hidden which would cut off anything extra and prevent me from scrolling vertically or horizontally so this is one way to fix issues when you do things like I did like moving things kind of offset from the viewport or if you have an off canvas menu you might need to add overflow:hidden to some of the properties so I hope this helps any of you who may have noticed this if you're coding along with me and let's get back now to the rest of our website alright so first things first let's check out our design so we have here the mobile design and then the desktop design open in Adobe XD let's take a bit closer look at the mobile version first so in the mobile version we have all the content stacked to one column looks like everything's also centered and the different parts of the footer are the easy Bank logo there's some social media icon links then we have some text links a CTA button and then at the bottom the copyright info for the desktop version if we go over to that it has the same content however instead of just being in one column the content is split out into four columns so the first column is going to have a logo in social media then we have two columns of the text links and the last column all the way on the right is the CTA button and the copyright info all right so now how are we actually gonna build out this footer well as in most things we can use multiple different approaches we could use flexbox if we wanted to I think that would be a perfectly fine solution to build out the footer I think I'm gonna use CSS grid and the reason for that is I want to show you all different ways that you can use you know flexbox CSS grid to do layouts and we did use grade the last time with the articles section but for the footer I'm going to try to use a feature of CSS grid called grid template areas and it's a really cool feature it is a little weird with the syntax until you get used to it but I promise it'll end up being more intuitive as you get along into it so how grid temple areas works is you still sort of designate the template meaning the rows and columns in your grid layout but you can use named areas for each of the different areas in your layout and you can use those names to assign where in the grid you want those areas to take up but first let's just get the basic styles in place and I'm actually not even gonna use CSS grid for the mobile design because everything is simply stacked in one column and then centered then we're going to do the desktop design we will use CSS grid as well as the grid template areas but the first thing we want to do is you want to create our HTML markup so I do want to keep in mind what I eventually want to be building for the desktop version so for example I can't just have you know individual social media icons or individual text links just in the footer tag itself I'm probably have to group them together so we can layout them a bit more easily when we do use grid later on so for example I would probably have to group the logo or I'd have to group these social media icons together and one div same thing with these text links I might group them into two different groups and then at the end I could group the CTA button with the copyright info we'll see more as we get into it but we're sort of keeping that in mind as we're building out a little little layout even though we don't have to use grid for mobile let's go into our code editor vs code and in our index.html file I'm gonna start creating the markup okay so I'm gonna put everything in a footer tag so footer and I also need to create actually a new sass file so let's go into our app folder s CSS subfolder I'll create a new sass file called underscore footer not s CSS so that's open and then of course since we created a new sass file we need to add it in the main sass file so import footer save that and looks like yeah our live sass is working so I'll just close this up and then I'm gonna just move the footer over to the right side so we can see both index.html as well as our Styles so in our footer tag we're going to start adding the different content that we need so the first thing was the logo so the logo is usually gonna be a link so I'll say anchor link I'm just gonna make the href a pound and in the link it's actually an image because it's just loading that logo image so we'll add the image tag and we'll say source is images and let's see its logo probably this logo SVG so that's gonna be the logo and I guess we'll give it will start giving things a class as well so first thing I'm going to do is give the footer tag a class of footer I know it seems kind of redundant but in our sass file over here it makes it easier to sort of follow the BEM or a block element modifier approach because the class of footer will be sort of the route and then everything else comes from that so for example for the logo we're gonna give it a class of footer underscore underscore logo then the same thing in the SAS file we'll follow that pattern underscore underscore hello though and the ampersand again just means that it inherits the root which is footer okay let's go on to the next section some of the footer was I believe some social media links so we'll create a div called footer I'll just say social so in this div we need to add all of our social media links so since they're links so again we'll add some more link elements and I'll just again do you account for the href since there's they don't actually exist and then again each link is going to be I believe an image so image and the source should also be in the images folder and see which one was first so in our design so it's Facebook YouTube Twitter Pinterest Instagram so Facebook's first so images images and it looks like icon Facebook then I'll give it an alt of Facebook so it'll do the same thing for the other links and I think there were six total yes the five so let's duplicate this by selecting it and then pressing control D so there's five so I think the second one was YouTube and then Twitter so YouTube I'm guessing it's just called yeah YouTube and Twitter and then change the alt I think Pinterest was the next one and the last one was Instagram we go so that the social links and then let's kind of look back at the design so after the social links worthy text link so as I mentioned earlier I'm going to create two groups of text links so let's say footer links then I'll add maybe another helper class and it'll just say link maybe column one there yeah and then we'll add our links oops a click and the links was the text here so we'll just copy this over I think it was three per group yeah and then we'll duplicate this so this will be footer links column two now I'll just replace the text okay I thought this contact blog career support privacy policy let's just double check and make sure yep that looks right okay and then the last one is gonna be the CTA and I'm gonna create one group to enclose the CTA as well as the copyright so I'll say footer I'll just say CTA even though the copyrights in there too and the first thing will be the button so I'll say a class of button and then the text was request invite this is basically the same button that we've had earlier in the web web site and below that is going to be the copyright info and I'm I'm gonna make a separate div for that so footer copyright easy thank all rights reserved I mean believe that somehow so I think the symbol is copy easy Bank all rights reserved okay so now we have our markup and let's create the corresponding styles and our satisfy and we're just gonna kind of build out these skeleton so we got footer logo so the next things footer social and in social we do have some links and images we'll just leave it like this for now and we'll add it as we need next thing is going to be footer links and then footer links column one and column two so I'll just add those as well okay then after that is footer CTA and then button we might need a button so I'll just say a button and then the last thing is gonna be the footer copyright okay let's save that okay looks good so we're not gonna have too much on our website but let's just kind of see what we have here okay so we have the logo loading this may actually be a problem so this is the low that leaves up top with the sort of dark color but this is I believe yeah so the footer has this dark blue color in the background let's just add that now so we're going to have to I think modify the SVG I think we should be able to edit it will create a new SVG for the dark for the white on dark and then we should be able to edit that manually so footer will give it that background color of that dark blue and it should be in the variables satisfy so yeah dark blue and then I'll just say color white just to sort of give it a default and maybe actually since everything is a link we also want to say a color white just to make sure that all text links will get that white color okay so let's see we got now yes you can see with that logo it is not visible so let's make the new SVG file because I think we only had that one logo image yeah just that one logo so we open the SVG it's actually just like text too so you can cool thing about SVG is that you can edit colors so you can see here these different colors this is probably the colors of the symbol in the back so the you know this sort of diagonal stripes but we need to edit the text and I'm guessing it's this thing path fill and this is just the letters of easy Bank I'm guessing so let's create a copy of this logo SVG file and then I'm gonna rename it rename logo let's say - dark because we're gonna use that on a dark background so alt Z to wrap the words and I believe this is the path fill and then we want to change that to white so I'll say F and we can't use SAS variables in here because it's just it's an SVG it is not you can't use SAS stuff okay so we'll change the logo dark in our index.html file will go dark let's see if that worked eh there we go and let's just double check out that doesn't seem right yeah that seems right it's just white okay let's add some padding to this so it looks a bit better and I'm actually gonna just turn on the responsive mode so we can see what it actually looks like so we want to add some padding on the sides and we also want to Center the text all the content let's see how much padding we need using my little rectangle that I created it's gonna kind of estimate it's about maybe 40 pixels on the top and I'm guessing on the bottom it's about 40 yeah that's close enough and then maybe we'll just do 40 all the way around nothing actually nothing is actually reaching out to that far but I think you know we'll just keep it at 40 just to have some padding all the way around okay so in the footer itself will say padding and 40 40 divided by 16 2.5 rims and again that's because to get from pixels to rims you divided by 16 which is the base font size by default rounds are just a more accessible way that you can size things because because the user control if they changes in their browser or even modify the base font size in their browser if you have measurements in REMS it'll sort of scale up or scale down with the browser as opposed to pixels it would stay pixels no matter what so dis better to use rims as opposed to pixels you can also use EMS but I like wrens okay so now with the padding see yeah okay good padding and text-align:center looks good now we need to start adding spacing so I just kind of go from top to bottom so don't add spacing under the logo and on down again I'm just kind of estimating here that's about let's say 30 and then under the social okay so we'll give 30 pixels space under the logo also under these social and then I'm assuming under the text links a little bit less but we'll just say 30 for everything just makes it easier ok sooo 1 add footer logo will say margin bottom and we'll say 30 so 30 divided by 16 1.8 75 frames and I guess we'll just add that margin bottom to all the elements that wanted them so footer social I believe needs it and then only the second footer link so footer links column 2 will have margin bottom as well and then I think under the button so in flutter CTA under the button will add margin bottom there we go okay or engine is not taking under the logo why is that it's there maybe needs to be display block or hoops don't want to do for footer a footer logo this footer is every single link which is like pretty much everything in the footer so display block and the reason this worked is because for display block the element I'm assuming yeah anchor elements are display inline by default which means that they just kind of display however the default flow would be and you can't add things like margin and stuff it just won't take effect so you can say display block or display:inline-block display it will take up 100% of the width that it can I do display:inline-block it will only take up the width of the actual content so maybe displaying like inline-block would be better for this so footer logo display:inline-block okay looks good so it looks like they were the margin did work for the other elements because those are divs and is by nature they are by default display block elements now we add some space between the social icons as well let's see how much space there is mmm 15 or maybe 16 it's a lot of one random space using margin margin right so okay so footer social which is this section here and then I'm gonna add the space to the anchor links so again we probably need to do display blocks the margin actually like takes effect so display:inline-block actually because it's live walk and make them all on a percent width which is not what we want want them next to each other Suellen block margin right one room oh and I don't want to do it for the last one so I think I could use the not last child so it's not the last child it'll have this margin right okay and that looks like let's just double check so margin and then they'll have margin and then the last one does not have margin just great I think I do want display:inline-block for all of them so I'll just do this okay cool now this thing for the text links the text links are they are each on their own row but what I could do is I could create make footer social a flex parent let's try that so display flex and then I do need to set Flex direction to be column so that will be one under the other instead of trying to fit them all in the same row so flex direction : oh not for social I want that for the links there we go okay so now they're very nicely in one column and centered I think I actually need to do is add some alignment to the Flex parent so usually to control horizontal stuff that's justify content because it's vertical align items should control the width of the children so let's say a line items and let's just say Center just to see what happens okay so there we go so now we have centered them all and then it only makes the Flex children take up the actual width of the content itself let's add that in our style so well I Adams center line item center this looks pretty good and we also want to add some space between the text links themselves yeah let's just say 20 because there's usually at Ibis space from just like line height okay I want to just use line height to make that space let's experiment again wine height 1.5 oh so I do too actually looks pretty good increasing the line how it makes it take up a little bit more space which results in there being space between the links so then I don't have to do I don't have to add a margin to add space between them which is like sort of nice so that looks maybe a little bit more flying height 2.25 for footer links a and I think this is actually necessary anymore since I fix it with the line item Center thing yeah that seems good okay so I think that this is basically the basic mobile styles let's move on to the desktop styles and in desktop the most important thing we need to figure out right now is what the grid template for CSS grid is gonna be so I think initially I'd said we're gonna make this a four column layout so the first column be logo plus social then we'd have two columns of text links and then the last column would be the CTA button and the copy right now I think that I'm going to also make it to Rose because I want the logo to be on one row in the social media icons to be on the second row so that means the entire template is going to be two rows and four columns and I think the easiest way to demonstrate that is just to use Adobe XD and to sort of draw squares around each of the cells so it's a little bit easier to you but also for me to see what the templates gonna be and then I can write the code in the S CSS file so let's start with that now so we got two rows for this first column and then we'll just have the same you know going all the way down so that's the first column for text links and the second column for text links and you know this isn't super exact right now so there's gonna be spaces between the cells but for just for illustrative purposes it's not going to be you know exactly correct so it's gonna be something like this where we have four columns and two rows so this means that using the grid template areas this top one would be called logo and then this one won't probably be called social this one all just call links one and then links too and the last one will just be CTA and we'll use those names to assign the locations in the template to each of these content blocks alright so in our code editor we need to figure out where we want to write the code for the footer layout for CSS grid kind of like flexbox you have a parent element and you have the child grid elements so the parent element in this case is going to be the actual footer tag itself and then each of these areas are going to be the child elements in the grid so the first one would be logo second would be social then the links one then links to and the CTA these are all direct children of the parent footer element so in our sass file we want to add display grid four I think probably just desktop and up so you can do that with a breakpoint our breakpoint mixin so include breakpoint up large at this point we will add display grid so again this means that on mobile and tablet it's not going to have the grid layout it's going to have that stack one column layout and we'll will do the same thing for the other properties as we add them so display grid and then grid template columns and we wanted four columns right so let's take a look at what we want the Wits to be for those columns so it seems like these first three columns are probably roughly around the same width and in the last column is gonna be wider I'd say maybe you know we can say these first two columns would be one F R or F R meaning fractional unit and then the last one would probably be maybe two F are maybe three F R I'm not really sure yet and that will make the that will make this last column either twice or three times the width of the first columns so I will just do one if I went too far I went too far and then to a far for the last one and we can use the repeat function so the first three columns are one at far each so we can just say repeat 3 comma 1 F R for the first three columns and then the last column will be too far then we want to add two rows so I'll say grid template rows and we want two rows probably the same height for each so again we'll use repeat 2 comma 1 fr which means the space each row will be given the same amount of space okay now the last thing is the grid template areas so this is a little bit tricky it just has a bit different syntax and I know that when I sort of started using original areas it was a little bit confusing but basically going back to our design you write out the names of each of the areas sort of in the place where you want that block to be in in grid so this one's gonna be called logo it's gonna be going across in the first row from column left to the right they'll be logo links 1 links tube and then CTA and then the second row is gonna be social links 1 links to CTA so using the same name for two different cells it tells the browser that that area is going to take up two cells so the first one's gonna be logo so how this works is we just type in logo and it isn't a string as you can see here and the second column is links one then links two and last one will be CTA so this is kind of the representation of the first row with each name taking up one column now we have two rows in our templates so we're gonna add a second one in a string again and instead of logo the social media icons will be the first column then links 1 links 2 and then CTA again so this is our grid template now you also need to in addition to creating this in the elements themselves and I guess I should put this in a breakpoint as well so include breakpoint up large we tell it that the grid area name of this element is logo and this is part of the slightly confusing thing but this does not need to be in a string one one place that I look to a lot when I'm confused about great or flexbox stuff is CSS tricks so a complete guide to grade and they also have one for flexbox so we're looking for grid areas this is kind of telling you how the grid mental areas work so you can see they have things in quotes then in the actual element you just have the name and not in quotes again this grid area property of logo will tell the browser that the look the footer logo element subscribes to the logo grid template area so you do the same thing for each of these so I'm actually just gonna copy this and then this is the footer social area and that's gonna be called social and then for the links one will put it in the column one and then we'll do the same thing for column 2 which will be links to in the last area will be the CTA and that's gonna be the entire footer CTA element which contains the button as well as a copyright info so that's gonna be I think I just said CTA these grid area properties they'll sort of match to us in the grid template areas alright so this looks pretty good obviously it's not completely accurate at the moment but this is a really good start let's turn on in the layout tab the grid inspector so I want the footer to be highlighted this is a super helpful tool if you are working with flexbox our grid Firefox has these special flex box and grid inspectors and it just tells you a visual representation of what you have we actually have not only the lines to designate the rows and columns but it's also telling you the names of the grid areas that we just created it says logo social links Wan links Wan links to links to and then CTA and it also tells us that with this dotted line it's sort of telling you that the area is taking up those two cells whereas for logo and social there's a solid line between them indicating that they're separate I think that I'll just uncheck the display area names so we can see a little bit better but we need to kind of align these correctly right so let's work on the horizontal alignment first and I think we want the logo and the social icons to be aligned to the left you can control alignment in two different ways one is sort of global alignment when you set properties on the grid parent you can also set properties in each grid child to just control the alignment of that cell so there's a lot of control you have using CSS grid and let's kind of figure out what we want to do here look at the design we do want the logo and social icons to be left aligned and we also want the text links to be left aligned as well and then the CTA and the copyright are right aligned so everything's kind of like flush to the edge so I think we could try using justify content space between except doing anything doesn't look like it's doing anything this might be a flexbox thing let's go back into our handy CSS tricks guide it's just to fight items Hawaiian's grid items along the inline row as opposed to a line item switch lines along the block so let's try to justify items start so justify items start oh there we go I think what I was doing was justified content which pays a lot in flex box but I think that just controls the child items as a whole justified content yeah so it's the the total size of your grid so that seems okay I also want to I think maybe set text-align:left for a desktop because it was centered due to the mobile styles and then we can fix these as we go along now why are these not are these centered line items Center I have a few things going on here so I have the footer links it's a flexbox parent let's turn off the grid get the Flex box I had done the line item center and I actually want to align items I believe start yeah start because this in this flex box parent it's going vertically so line items will do the cross access arrangement so I just need to remember to set foot or links line items start for desktop and up so footer links and then for great point up large we're adding a line item start and I'll make sure that the links themselves are aligned to the left the other thing we wanted to do was for the grid template justify items start let's go back to the grid inspector now we can see that the text links are lined to the left logo and social are aligned to the left as well and then for the CTA we want to line that to the right I think we can say justify items and oh this is not a grid thing so I can't do that I guess I could try text-align:right no that's not right oh it's because I did justify items to the left so I think for because this is an individual this is the grid child item I can't do justify item I have to do justify self because that applies to the individual child itself so I think if I do end there we go so if I do text-align:right and justify self end for the footer CTA desktop styles so under the breakpoint area okay so it looks pretty good for the horizontal stuff right let's just double check and compare that with the design see how we got the logo and I social media icons on the Left these are aligned left this is a line to the right and that does seem like what we have so now we need to figure out the vertical alignment you know looks like things are a little bit all over the place so we go back to the design let's just draw a box around the entire footer area just to see how things kind of line up with each other looks like things are kind of extending out to the top and the bottom they're like pretty much almost flush so if we go back to the footer parent itself I think what controls the vertical alignment is a line justify content and aligned content just control the grid in like the greater parent so if I want to control the alignment inside the grid actually use items so align items okay aligns great items along the block axis so that it can be start and center and stretch so I think I want stretch so it goes all the way to the top and the bottom so we'll try that didn't seem to do anything something else is adding this extra space I wonder I might have some margins actually so let's look at the links oh there is margin in the social so let's just cancel that out so margin bottom zero and then I guess logo also there's a margin there okay I might just need to go back and move all the margins that I added from mobile into a break point down media query because I only want it to take effect on mobile and tablet so let's see where here we go margin bottom so include break point down so well this is apply to tablet and down Oh medium I mean medium and down and then I'll add the margin bottom there you just copy this media query so same thing here margin bottom here I think there was one yeah for the button okay now let me remove the margins from desktop let's see how the site looks did that help at all see the social icons are still like really they're too high I want them to be flush to the bottom what happens if I do an align self for a footer social I'll get rid of the height thing turn on the line self to the end does that seem right it seems a bit tall in any case you want them to be on the top and bottom anyway so we add a line self to footer social for desktop okay the text links themselves look okay now I need to do this the lining for the CTA section so in the CTA section we have this and then we have a copyright so I think if I do a line self miss stretch an option for this so it is stretched not working this is kind of annoying okay I'm just kind of curious start I have an end I think I may need to separate these out into different cells so I can sort of align them the same way I did with the logo and the social so footer CTA I'll only have it have the button I'll delete that extra div and then do that so then footer CTAs in its own thing footer copyrights is is in its own thing as well so let's go back and first I'll have to add a grid area for the copyright since that's a new thing so include breakpoint up large grid area and I'll call it coffee right then I'll need to add the coffee right name to the grid template so before we have the CT in concur in one thing now we're going to have CT on top and then copyright on the bottom okay much better so now we can sort of try to we'll add another Rule four a line self and and then justify self and okay okay that looks pretty good I do feel like things are a little bit taller than they should be you know I wonder if the font size should be smaller for the part of text links you see that this should be obscene or so pixels how BIG's the font size right now it is if we go to computed font sizes 18 and where did that rule come from it's just from the body font size okay so for the footer links I need to set a font size of 15 pixels so that should help with making the content less tall I'm guessing it's gonna be the same font size for mobile as well so font size 15 pixels divided by 16 is 0.9375 rims all right let's give that a shot okay looks shorter which is great mm maybe the easy bank text itself needs to be a bit smaller too it's probably about the same 15 pixels so we'll copy this property and add it to the copyright as well okay maybe there's just too much space because I'd initially added all that space using line height so if I reduce line high it's still a bit tall interesting see light one just to make it really short oh you know what it is it's cuz I set the row I said that rose to be 1fr which means the top row and the bottom row has to be the same height that's how I said it but obviously the bottom row the social media icons and the copyright doesn't need to be the same height as the top row and the top row looks like it's getting its height because of the button we're just making everything be too tall let's fix this row problem first and then we'll figure out if we need to decrease the line height for these so instead of 1fr I think the second row should be something less where is it here good template rows the first top row should be one afar if I do Auto it'll just know if I do Auto it just sort of does that let's try that so when the parent will change grid template rows 2 1 fr and auto area so instead of this repeat thing for the rows we'll just do one fr and auto okay so this is shorter now the line height is kind of what's limiting it so let's try one okay see now it got really short which is great maybe 1.5 you know maybe I don't want to use line hikes that's kind of like making it a static distance what if instead in the footer link since I know that is a flexbox parent I could say justify content space between and that will sort of Auto stretch to fit that so I think that's a much better way doing that at least for desktop we want to line height for mobile because we're not using grid for that so footer links for desktop here we go I think I personally just do justify stuff before the align properties okay so this looks closer which is great now I I'm guessing that this button might be a little bit tall and kind of curious where this height is coming from now oh I still think out the line height okay that's my problem so I'll just remove line height for the four links a for desktop so I just want to use this on tablet in mobile so I'll use my break point down and I know that I usually use the break point up meaning I use men with Mia queries but I think in this case because we're adding styles for mobile I would prefer to use the break point down using max with Mia queries otherwise I would have to cancel out all the margins and line Heights for desktop that looks a lot better so I think maybe this button is now what's kind of making it a bit tall okay how big is this button oops it is 46 pixels taller so and how big is it on the website okay so it is 46 you know I'm not gonna split hairs here I think this looks pretty okay so even though it's taller than it is on the design I think it's okay I just added some space here so I'm not blocking it with a picture of myself for you all kind of weird even looks like there's more space in the design I think the logo and the social media icons actually might be a little bit too tall so let's just tweak that and then we'll sort of consider this complete the local should be 23 pixels tall and about the same for the social icons so let's see what we got 20 and the icons look like they're 25 okay so yeah they are a little bit big image itself says 20 which is good and there's some reason the thing is 25 the anchor link you just need to sit a height I said a height of 20 pixels will that help oh yeah it does okay we'll just say height 20 pixels for the footer social a social okay here we go and I'm assuming the same height will be for mobile as well so we don't need to use a media query for that so 25 over 16 is 1.25 rims that seems alright okay now that I look at this again I think that there's a couple things I need to do first one is I need to limit the footer content so it doesn't go all the way across I think I forgot to add up the container class so let's do that first and then we might need to tweak some of the alignment okay so in footer I'm gonna have to add a container class container and I don't remember if I want to add the padding helper classes but let's just move these into the footer container and because originally the footer tag itself was a grid parent I'm going to have to move all the grid properties into the footer container so footer and then we'll just put it here at the top container so I love all the grid stuff into the container element okay hopefully they don't work let's take a look okay much better so now we can see it's not going all the way to the left and the right things just seem cramped even though the heights like so tall it's a button really the right height yeah it's 46 I'm gonna be the copyright text is smaller I think right now it is 15 I'm gonna make it I think 13 needs to be a lot smaller 13/16 0.182 5 okay 8 1 2 5 not 1 8 there we go okay I think the color was darker too right what's not why it's kind of a light gray what color would that be maybe greyish blue so you know this is just kind of tweaking trying to double-check the design and the site and just make sure everything looks correct yeah there's more space between the button and the copyright something is not right I wonder is it including the padding that I have it no this is 70 okay so it's 76 okay so does adding the padding so it's actually now it's too short which is the same as like what I was thinking it was so let's increase that line height again to make it taller line height 1.5 oh wait wrong selector forgot a second underscore there we go maybe 1.75 2.25 2.25 line height is giving us the correct height of about 100 okay glad we figured that out so footer links a and you something was off I just took me a while to figure out where it actually was there you go footer links hey oh wait - point is that the same oh my gosh it's the same freaking line height please remove this media query there we go okay this looks much closer to the design okay so now you've gotten the height right I think we need to tweak this like horizontal spacing there's it's too close here and there's too much space I think so yes it seems like there's more space between easy Bank the logo and then the first text link let's see how do I want to do that I guess I could maybe increase the width of the first column so if we go into the grid parent instead of making all the columns the same I could just try to tweak these a little bit so I'll probably leave the text links is 1fr and so I'm just gonna try this out in the browser but what if I said to fr wanna far wanna far and then three fr maybe too far well maybe three okay we'll see how close that is to the design hey that's not bad and a few things that look like they're off so they're just tiny bit more space between these I think I also forgot to add a grid gap property so let's try that gap of maybe one room two rims let's try one room so that gap property let me just show you how that looks so it's adding a space of one room or 16 pixels between all the cells in the template so I think that's probably good to keep ad gap of one room and then I need to change the template itself we 2fr 104 104 3f are okay so a grid template columns place this I know I could use repeat to want to far but I mean it's kind of the same at this point if you're only repeating if you're only repeating at once then what else what I wanted to add oh you have the gap with one oh and the gap under areas I guess one room okay that looks pretty good let's compare with the design again it looks fairly close and I'm actually okay with like I have a little more space between social icons but I think that's okay all right now moment of truth let's see how this looks on mobile as we decrease once it hits that breakpoint for a tablet it goes to one column and it is centered and stacked and from mobile I'll just turn on the emulator thing it looks pretty good so I think we have the basic styles down now let's get to some sort of let's kind of polish it up a little bit there's a few things I usually trying to add main thing is hover States cuz these are all links and you want the style to change slightly when you hover over them so you know what's going on so for the socials let's check the design oh here we go so we did some we hover it turns green on the social icons as well as the text links and then the requests invite has the same thing where it like goes to white so let's do those these social icons that would be social icons the images there SVG's and we want to change them from the white to the green color now since I loaded these SVG's as image tags I might actually change that because what I want to do is change the fill and the SVG itself let me show you what that looks like so icon Facebook if we look at that so it tells you the fills FFF which is white and there is actually a way that you can alter that in CSS but only if you're loading the SVG as an SVG tag and not the image tag so I'm gonna have to change this I'm gonna copy this so we're actually just using inline SVG's at this point and then I think can I just move the alt no there's no alt for that that's interesting who's curious about this alt tag for SVG's accessible this purely decorative he doesn't need alternate decks I think we do because they're like social icons inside that SVG ad title Oh mostly the first child of its parent element I'll be used as a tooltip that's helpful okay so let's do that so say the first child here so path is the first child originally but now we're adding titles and we'll add Facebook that's pretty good and we'll have to do the same thing for the other one so YouTube copy that place the image and then add the title YouTube so now slowed it up everything's the same let's just double check yeah so it is actually loading the SVG's which is good if we hover it tells us the title which is great so now to adjust the color to adjust the hover we want to in the SVG alter the path fill and we can do that in CSS which is pretty awesome so if you go out on to social a so in the a tag it's gonna be SVG path that's going to be the element social a:hover I could nest it under the a element but okay I'll do that under the a hover SVG elements and then the path element is going to have fill of the green color lime green and then we also want to add its transition so it's a little bit more nice-looking hopefully this works fill and then how fast we want to be maybe 150 milliseconds ease in out oh hey very nice cool so we were able to add the transition and the hover fill color for these social icons we want to do the same thing for these text links as well that's gonna be in the footer links a so footer links a hover color lime-green I think it was and then of course we're doing the same thing so transition color 150 milliseconds ease in out oops okay there we go [Music] nice and the last thing we want to do is this button hover state and you can see it's losing opacity when you hover over it and that's because when I first coated this button it was just on a white background so I could simply reduce the opacity and make it sort of look like there's a white overlay obviously it doesn't work with a dark background so I'm going to have to build a semi transparent white overlay over this over the linear gradient color so I think I can do that with a pseudo element so let's just sort of try so in our global sass file going down to the button styles it's right now the opacity thing I'm I'm just going to comment that out because it's not really working for us and I'm going to have to add a pseudo element so let's just try the before and content is blank so it shows up you have to have a Content property set for your before and after elements then I'll say background color I just do background since it's using a linear gradient I think background is actually linear grains actually applied to the image if I'm not mistaken background image let me just see if that's correct really quick yes yeah background image and unfortunately background image does not transition nicely so we'll we might have some issues when we do this but okay going back here so we're making an overlay I'm going to have to position this absolutely I think because we want it to be on top of the rest of the button right zero this is just to make it go to you know all the different edges and because it's posting absolute I seem to make sure the parent is positioned relative which it is that's good and I'll make sure the position:absolute child will sort of remain inside the parent which is relative then background color and because we want to eat our G we wants to be RGB a so it will be semi-transparent so white is 255 255 255 and transparency let's just say 0.25 we don't want to go full white otherwise you won't be able to read the text okay now let's just see I'll see how that looks and I'm not it's not a test you however state right now I just kind of built it to sort of test and see how it'll look ooh looks looks pretty close to what we had before actually so I see so Pasi zero it won't show up and then it'll show up when we add when I get rid of the opacity zero so I'm going to use that for the hover state so this actually was a pretty easy solution if I was gonna be a bit harder than that so by default will set this opacity to zero and then on the hover State will set opacity to 1 so we want to transition that so it's nice and smooth Louise 150 milliseconds like the other hover State speeds then on hover hover on the parent we're going to make the before element opacity 1 hey not bad not too shabby okay so I think we got our other states pretty good well just double check and make sure the top one works too oh yeah nice so we eat supposed to check one more time see how this looks on tablet and mobile good let's just use the emulator so it's easier to see but here's mobile looks pretty good and then iPad I think that's okay on tablet if you wanted to you could also make this like maybe two columns on tablet but I'm just going to stick with a one column cuz I think that's fine and it's at the bottom anyway so it's not like it's blocking it's like people have to scroll past it cool so I think we can actually consider this whole webpage complete alright Wow we finally finished I hope you've enjoyed watching the series as well as seeing all the thought processes and decisions that I had to make while building this website you have any questions or feedback you can always leave them down below in the comments and as always thanks for watching and keep on coding