8. Home Page HTML & CSS - Part 2

hello this is gary simon of designcourse.com and in this video we're going to tackle this portion right here uh the heading the subheading uh the right and left arrow along with this white container here and these four images and then uh the video after we'll go ahead and tackle this section down here along with possibly this area too all right so i basically the first thing i want to do before we get into html and css is go ahead and save the images that we need so uh this of course is html and css and then over here we have these arrows uh which we want to create a sprite so we'll uh take both of these and let's get them ready to save so i'm just going to real quickly just duplicate these and then hit ctrl e actually i'll undo that and just hit rasterize layers that way they're flattened i and i'm just going to take one of these here we'll take the left one right here and hit ctrl a and then control c we'll go to file new and then here i what we want to do is basically duplicate this width here so that would be 74 and the height will leave the same and we'll just paste that right in there ctrl v and then we will duplicate that layer and go to edit transform flip horizontal and that is fit correctly so now we want to do is save this for web save it as a png 24 transparency selected and we will call this left right arrow all right so that takes care of that and let's go ahead and delete those two layers real quick and show these and now i want to save this uh these four logos i'm just going to include them all on the same area so on the same image rather than copy merged ctrl n okay and then paste this in and then save it and we'll save this one as a png8 and then just go ahead and we'll call this logos-1 and that will be it for now i although at the end we're going to take this and stack these uh on a row of two so we'll have this right here and then we'll take these two and put these beneath and that will be suitable for the cell phone versions and you'll see why so i let's go ahead here to our editor and this is where we left off basically so if we go over here to the browser real quick we'll see this is where we left off uh you see if we extend this in it's responsive and by the way bootstrap 3 they released their uh their customizer so you don't have to deal with some of the steps that we had to take in the previous lessons anymore but anyhow i so let's go ahead and go back here to our editor and get started with some of our html so i'm going to go right here just after the row or div class row up there and i'm going to create a new row let's close it up and then i'm going to do a div class equals call dash 12 and call short for column and the way the bootstrap grid system works i is it's based on a 12 grid column system and so what that basically means is if we go over here real quick to our photoshop template and we show the columns we'll see we have 12 columns here so the initial html we're tackling is this part right here these two items and these are basically 12 columns wide and they're going to be even though it's only right here in these two i we're going to make it 12 and then we're just going to center the text and you'll see more specifically how these these this grid system works uh when we get to this section down here but for now we're just going to set 12 columns and so let's go back here and then inside of that we're going to have an h1 tag class equals text center which is a predefined bootstrap which just makes the text center id equals we're just going to call this blue dash title and we design superior logos and close it and then underneath we have the subheading b class equals text center i'm going to call this lead to and then id equals subheading and stand above your competition your business is worth it and then close it up alright so let's go ahead and save that and let's go ahead and check this out just to see what this looks like initially and we see it is centered now but we need it to be white and we need it to be with our font and we need the correct size so we need to address those things in css now all right so let's go over here open up our custom.css file and we'll do h1 blue dash title and we want color font weight font size we'll try 6 em and then subheading color is white font size we'll try 2.5 em now let's just go check and see what that looks like alright that's much better alright now let's go ahead and take the we design superior logos to make sure that's using our font so let me go here to our editor and select the bootstrap.css file do a search for h1 and you'll find it twice here down here on line 421 and this we want to change to source sans pro hit save and then we'll see that it updates here now here's one issue um so when we scale this in we'll see for tablets here uh it's a little bit too big uh and then same thing with this uh and then for cell phones we'll see it's like way huge so if we loaded this up on a cell phone we would see this covering our entire screen so we need to adjust that with some css so let's go ahead here to our editor take our custom and for our tablets here what we want to do is specify one for blue title or heading and we'll put in font size pm actually i'm going to adjust that to three and i'm going to copy that and make this one five and then also our subheading font size 1.8 em refresh all right so that's a lot better for actual tablets and this we may adjust a little bit further in the future once we can more specifically see it i'm going to do a video where we actually show it on a cell phone but for now that is good okay so let's go ahead and continue on and we'll do the arrows here and do the html for this section all right so now what we want to do is in our editor we'll go back to index.html and under here is where we're going to create a new div class equals row oops all right and so let's revert real quick to photoshop and look at our grid system so we can see that in the center of the first column we have this arrow and then also this container spans basically 10 columns and then this one here is another column and it adds up obviously to 12. so now we have to reflect that in our html so let's go ahead and continue div class equals call dash 1 and this is all obviously predefined in bootstrap they have call 1 all the way to 12. and inside here we're going to put p class equals left right hidden dash sm and the hidden dash sm css tag is basically makes it so that these arrows will be hidden when we're on the small devices like cell phones and basically if we look at our design or rather if we come over here and we scale this into the size of a cell phone uh there's not going to be enough room to show the logos and both of the arrows so that's what that tag does and you'll see how this works too so let's go back here and continue on and id equals left dash arrow and we'll just call this previous gallery all right and then under here we'll have div class equals call dash 10 id equals logo dash gallery and inside of that we will have two image tags image source equals images dash let's see what we have the names here logos dash one dot png class equals image dash responsive and id equals gallery dash image all right so the class of image responsive when added to the image tag it basically makes the image responsive obviously and what that means is it was scale to the width of whatever the browser is and we'll see this in real time so uh one second no what i want to do though is add another one we're going to call this images small dash logos dash one and we're going to give this the id of gallery dash image dash small and we're going to hide this by default initially and you'll see how this works once we get to the css and so now it's going to copy this up here and then paste it right there and this is all going to be the same except the id is going to be right arrow and we'll change this to next gallery all right so if we were to view this let's see what this looks like all right so things are kind of working kind of not uh so now what we have to do is use css to get this working so let's go to the editor here the one thing i want to do first is add one more class that i forgot text hide right to both of these and that will hide the text as we can see here the text no longer shows up so now let's do the css and so the first one would be p dash left dash right and we'll do display block width is 36 pixels which is the width of one of those arrows the height is 72 and then we're going to have text align center cursor pointer which is the cursor that makes it look like you're hovering over a link and then margin we're going to try 78 from the top auto and then down here we have the actual ids so p left dash arrow background url images left dash right arrow.png zero zero and i will copy this right dash arrow and this one will be the same except we're just going to move it over 36 pixels so that it only shows each one so that's that's basically how sprites work if you're unfamiliar so if we go over here we can now see they both show up even though they're on they're actually the same image all right so now what we want to do is handle this middle container here which will hold this image so what i want to do is we'll go over here and in our css first uh we reference this as gallery dash image or rather first this one right here is logo dash gallery so real quick let's go ahead and add logo dash gallery and we want to make the background white and we want to give it a minimum height so we'll just choose 300 pixels so if we view this this section now becomes actually we're going to extend that just a little bit more 300 wasn't quite enough so try 50 okay and now we want to center this up and get rid of this broken image here so let's go ahead and it was we have gallery dash img so let's add that and that is give it some margin here from the top important and display block and the second one this gallery dash img-small and this is going to be 30 pixels from the top and display none all right so now we have this pretty much centered here now we have to add some css for the area where this gets smaller so that we can show the secondary image so let's go ahead and back into photoshop and create that real quick so let's see here now i want to make the dimensions here we're going to adjust those but first i'm going to hit ctrl a and ctrl c to copy this good canvas size adjust this to pixels and we're going to make the width 468 which is basically half the size almost and the height 324 and then just hit proceed we'll move this one here to the top and let's go ahead and fill this in with a background color white create a new layer real quick and i'm going to move this here and get rid of that edge right there and then paste this one down here oops there we go and i don't want like two emblem logos right here next to each other i want to kind of spread it out so i'm going to delete copy that first and then delete it move this over here and then paste this one right here and that looks pretty good so i'm going to save for web and i'm just going to call this logos dash 1-small all right so now in our css what we want to do is when we have the max width here at 767 uh we want to hide now this is basically all the css remembers for basically cell phones or small devices so we want to hide gallery dash img so display none so what that's going to do is going to take this id right here and then hide it and this id of course is for this image right here so if we were to view this refresh it and then just drag it in all of a sudden it hides once we get to the tablet versions alright so now what we want to do is show the other one so let's go ahead back to our css now let's make sure we have the right image here uh yeah i had that backwards so logos dash one dash small that's the new image we created uh and so this was called gallery dash img-small so we'll go ahead and copy this and then display block and hopefully that will work so let's refresh and now we see that it doesn't get scaled down so terribly having them all on the same horizontal path all right i that works pretty good so in the next video we are going to tackle this section up here along with this section right here and then after that we'll do another video uh where we tackle these and perhaps also this as well and hopefully we will be able to finish this up here pretty soon alright i'm gary simon and thanks for watching