Materialize Tutorial #23 - Footers

Key Takeaways

all right then gang so we're slowly getting towards at the end of this website I think the next step is to tackle the footer underneath this section right here so let's go to our code and at the bottom of this section where it says footer will go underneath and say footer and we'll give this a class of page - footer this is a materialised class just to give it some Styles then we'll give this a gray color and will also say darken three to darken that background all right so there's our footer wrapper if you like the next thing I want to do is place a container in here because if I don't if I just started to type any old stuff inside then like in the nav it would go right to the edge over here but I want to contain it inside this central column so let's instead do a div with a class of container if we can spell alright so inside this container what do we want to do well we'd like a couple of different columns I guess I'd like a column over on the left and that would contain a bit of stuff about me or something like that and then over on the right maybe some links to social websites like Facebook and Twitter so first of all let's do the left stuff we'll create a row so div dot row and then the left stuff is going to be a div with a class of Col then we want this to have a width of twelve columns on small screens so I'll say s twelve and then on large screens it up we want six columns so we have that now and inside we'll do an H five which says about me and then underneath that H five we'll do ap Tech and in fact I'm just going to copy some of the lorem ipsum from up here so we'll grab that dude and paste it down below here and then the same thing beneath that just a couple of those and save it and let's see what this looks like so far okay so looking good it's six columns in width so half of the page width that's good so next let's do some links over on the right side over there so back to the code after this div will do another div and this is going to have a class of coal then again for small screens I want this to be twelve columns in width so s12 then for large screens I want this to be four columns in widths of l4 now this is six columns in width and this is four which makes ten altogether meaning we have two spare left over so let's offset this column on this chunk of content by two columns so that that space is in the middle so we'll say dot offset - L for large screens and then it's going to be two columns alright so inside this div we will do an H five and we'll say connect or something like that so if we save that now and preview this in a browser cool we can see that right here now underneath we'll do a ul to list our links and inside here an li tag then an anchor tag and this is going to have grey - text and we'll also lighten that grey source a dot text - lighten - 3 and then the href can be whatever for now inside here will just say Facebook okay then what I'll do is just duplicate these down below so Shift + Alt together then press down to just duplicate that a couple of times and then we'll change this one to Twitter and then LinkedIn and then what other social sites do we have we'll do Instagram all right so now we have those links as well boom there we go so that's looking pretty good right we have this on the Left that on the right and when we make this smaller we should see at some point it's snap and we can see those go to full width instead all right cool so then one last thing I'd like to do is beneath that photo do one more strip which is going to be the copyright notice so you see sometimes at the bottom of websites where it says copyright 2018 whatever we're going to do the same thing here so underneath all of this stuff but still in the footer itself still part of the footer but underneath the rest of the stuff will do another div and that's going to have a class on footer - copy right again this is a materialized class then we'll also give this a class of gray and darken that so it's a gray background but darkened by for then inside we'll do a div and that's going to have a class of container just to contain that content inside of this will also say Center - a line and then inside that we'll do our little copy sign so that's and copy and that little semicolon so that makes a copyright sign in the browser if you look at this we can see that well right there and we'll just say after that 2018 photo ninja all right so let's save that and view that in a browser and while looking pretty good right so now we have our footer well sorted in the next video what I'd like to do is go back up to the top and work on this navigation a little bit more to add in some social icons and also do some tooltips when we hover over those social icons