Part 7 - iPhone Breathalyzer - HTML/CSS Part 3

Key Takeaways

all right hello i'm gary simon of designcourse.com and today is january 30th with our 31st video of the year and we are going to continue on with our iphone breathalyzer website design in the html and css process so today we're going to get finished with actually doing the html and css but we still are going to have one more day tomorrow where we get the menu working and also do some other finishing touches so as always check out designcourse.com and subscribe here on youtube and the social channels which are available in the description all right let's get started okay so this is where we left off uh from yesterday we have this text right here so we're going to continue on working by adding the html for the resulting or the text afterwards and then we'll go ahead and style it in css so let's go ahead and get up our editor here all right so inside of here i if we switch back to our photoshop we need to add this text so this is basically going to be in a p tag paragraph tag for html and we'll go open it up ip and paste that in and then close it oops now we're going to want to be able to control the look and feel of this text and certainly the margin as well so we're going to give it a class of subtext all right so we'll save that and then underneath we have our button our call to action so right here is order your baxter now real quickly i'll just get that text and copy it and this will just be a single link an ahrefs so ahref equals we're not pointing it anywhere so we'll use that um we also want to give it a class of cta btn as a button and remember you can name these classes or these ids anything you want so it doesn't have to be specific to what i'm using uh and so let's go ahead and paste that in and then close that so if we save that and then we go ahead and look at what that looks like we'll see we have some ugly text here so now we have to go in and first we'll change the font and the colors and then we'll work with the actual margins and such all right so we have the h1 here this is white or black currently so we need to change that and then make this as well uh white text so what we can do instead of trying to make these white or whatever it was is we have an id here of top one we can just make that white so let's get our css out here and custom and we already have it open here so we can just put in color all right and save that all right now it's white all right and now we want to do is change the font and because most of our text is based with exception to the links at the top and the navigation since they're going to be uh the source sans pro that we used let me see if we have that up here yeah we have it right here we're going to reference the body tag which is inclusive of everything inside of it basically so i'm just going to come to the top here and just put in body and we're going to put font family source sans pro save that and then bring her i think back here there it is okay so this is thicker than we want it uh because if you recall we're using this uh a thinner weight so all we have to do is come back into our where's that editor or css i have too many of these windows open i'm trying to find the right one okay i just minimize that okay um we'll go to i'm just gonna go to the bottom here h1 font dash weight 300 and remember that's the one that we chose right here all right so we'll go back we'll refresh this and there we go we're also going to want to change the size of this so let's go back here and change we'll put font dash size 2.5 em alright so that's a better size and let's see here we want to work with the subtext right here a little bit so i'll just type in subtext and we want to do make it a little bit larger so font size by default it's one so we're going to make it 1.2 em and then we also want to adjust the margin it was too close to the title and that the link so i'm just going to put in margin here for that we're going to specify the top value as being 12 pixels the right value is 0. the bottom value will be a little bit more and 0 like that so let's save that and see what this looks like all right so things are spaced out a little bit better um let's work with the link now and make that actually look like this so let's get the color here and it's ff9600 we'll copy that and the class was cta-btn all right so this is going to have quite a few properties just to get this working correctly all right so the first thing we want to do is make sure the um the only color is white so color all right we don't want text decoration on it as in we don't want the underline so we want to do text decoration none we want the background color to be that just paste that in we also want to border radius i think we had a our corner radius right here i think it was three or four and that doesn't really matter we'll just say four so border dash radius four px and then also mohs has a mozilla border radius for pixels let's just save this and we'll see what it looks like it's not going to be correct yet but we're getting there as you can see so let's continue on we want to add some padding because i'm padding between the text and the actual button so padding will do 10 pixels and you'll see it's not going to look correct 100 percent uh we want to be a little bit wider on the sides so to control that we just put in a different value this is top bottom this is left right so we'll save that and it will look a little bit better all right and then let's uh make the font size bigger 1.4 let's uh also do i let's see here text align center and we're going to hit display block and then width 50 so watch what happens now all right so now the width of this containing element of this background is going to be 50 of whatever the the parent element is so we take this down it's still only 50 and it's not in the middle so we're going to make some adjustments for that and that will come in with the media queries now i also want to add some my margin this is too close between here and here and so let's see here we had no margin already so let's just try 20 pixels just to experiment yeah that didn't really make it a much of a difference let's try 40. all right that looks a little bit better and also i if you notice here i there's not an even distance currently between this portion and this portion so i think everything both these blocks and right here are going to need to be pushed down probably another good i don't know 40 pixels so i'm going to go back and work with that a little bit so we need to find which one that was so i believe it was where's the phone at yeah i think it was a phone dash top that we had that margin on so if we go find that has margin top 110 let's just try like 150 and save that and see if it gets pushed down a little bit more evenly all right that's a lot better in my opinion there we go and then we'll push this down as well and if you ever you know if you're working with your html files kind of getting large and you kind of forget you know what the the uh the ids or the class names are that you're trying to work with you can just hit you know in chrome it's ctrl shift i and i believe as well in firefox and with chrome you if you just take this little you click this little magnifying glass and you come in and you click on like a an element that's around where you want to find it shows you right here and it shows automatically when you click on it you'll see this this orange portion at the top up here well that's your margin right there so that's what we want to find to be able to adjust and if i bring this over here let me just bring the width in here you'll see it shows all the css of whatever is currently selected so we'll see its top one the id of top one with margin 200 pixels and another quick thing is if you just want to experiment on the fly and have it re i show you in the browser you can change these uh basically the uh the values and it will update in real time so i put i changed it from 200 to 240 and already that's looking pretty good so i think that's what i'm going to use and it now this this doesn't save it just gives you a live preview so if we refresh it of course it's going to go back up so we just have to find the tag here top one 200 change that to 40. and then we'll go ahead and refresh okay all right so so far so good um we could see a couple things happen here when we start getting this thing in i'm going to hit ctrl shift i again just move this off screen so that we can see the pixel value right here when we scale this so right off the bat the reason this is going to the second line is because there's no more width uh in that element so that's fine there's several ways we can approach this we can try to scale it down uh bring down the font size a little bit or this actually doesn't look too bad but i think there's too much height a line height in between this uh you know the h1 tag so what we'll do is i think what we'll do it will make more sense is go ahead and just bring in the line height a little bit with css so let's go ahead and do that that is h okay right there now i i didn't do this like when i did the test one on the project before i usually just run through everything so we're gonna have to experiment just to kind of get an idea so real quick i'll just try line height i'm going to put it at like 25 i think that's going to be way too you know what i'm just off the bat i'm going to try 30. and then usually a lot of this just you know just kind of experimenting so when you change the line height it will kind of bring everything up even if it's on one line so that's a little bit too close so we'll just change this real quickly to like 36. and that looks a little bit better all right and then we have kind of like an issue here where this is coming down because we have remember 50 percent of whatever the containing element is so we can come in here let's see yeah at um we'll use the media query to adjust that so let's find the cta button is what it is and i think uh between these two values right here we'll put this in and the only thing we'll change is the width by default was uh 50 so now we're going to change it to let's try 80 so let's bring that back up and refresh it now it's it works better there and then when we scale this all the way in we see like a massive issue everything's pushed down so let's go ahead first before we get to this and work on this obviously if you're viewing this on a tablet or a phone this does not need to be this big so we'll go ahead and adjust the width and proportionally it will scale down based on the percentage we give it and so let's go ahead and do that real quick the idea of that phone was phone dash top and we're going to come down here just to everything that's less than 767 and reference that and change this to width 50 so let's go ahead and see what that looks like so now it has a obviously it's quite a bit smaller all right so let's bring up this again real quick and see how we can bring all of this closer together so if you control shift i and click on that little magnifying glass and i'm using chrome again to do this let's click uh right in here i'll bring this up real quick so we can see this we could see all that orange which is basically margin that is applied to this top one and we can see the margin top is 240 which is what we set for the larger view so what we want to do is take top one and take that margin down significantly for this portion right here so let's put top one oh man hands in the wrong area of the keyboard all right top one margin uh dash top i'm gonna put 20 pixels and then also for the text that is inside of top one we wanted everything to align in the center so we'll add text align center alright so let's refresh this and see what happens now everything moved up significantly so let's see here i think it would also be worth it to cut down on the the media query that's within 767 on this up there so real quickly control shift i will find this and that is phone top and we see we have a margin top of 150 so let's take phone top it's already there so margin top i don't know i think we had 150 so we'll put in let's try 100 just to see what that looks like it's a lot better all right and then let's get back here and work with this thing and we want this basically to go 100 across so that i don't think we had that down here cta button right there let's paste it right here with 100 or no not a thousand there we go there we go all right so once we start we're going to start working on everything kind of beneath this portion and then we can you know once we understand what's beneath it and how much room there is beneath this portion we can work with that a little bit later so let's go ahead and look over here and see what we have going for these two portions right there all right so basically if we get up our grid we'll see that each one of these is six columns wide so we're gonna have to have two class two div that are six columns and then inside we're gonna have one that is two in four so let's go ahead and get started with that sorry i'm clicking on the wrong windows all right so uh let's get at the html and look at we have what we have going here so basically we want to get outside of right there and just start at the bottom and so i'm going to type in div class equals container 12 okay come inside of it and div class equals column six close that up and then basically you know these column sixes they're going to be duplicates so we'll focus just on this one here all right so inside of that we're going to also have a column 2 and this will contain our image of the phone and then also div class equals column six no four sorry and then close this up and this is going this will contain the text and this will contain the image so the image let's bring this down is breathalyzer good for this first one so we'll type in img source equals images breathalyzer dash good.png and we'll give it a class i'm just going to call it sd all right and then and the reason i gave that a class instead of an id again is because this is going to be duplicated and so there will be two instances so you can't use an id there all right and then let's put in a p tag we'll go back here to photoshop wait that's not the one it's down here ctrl a ctrl c copy that paste that in hit p okay let's see all right so now what i want to do is just save and we'll see how messed up this looks because we haven't really adjusted anything in css all right so we can see that they're not floating left of each other and the reason that is because we have to add a couple classes that was that were built into the framework that we're using 1140 and so we need to get rid of the right and left margin that's on the columns here so basically right here after column two we put in alpha and then omega it gets get gets rid of basically left and right margins so if we save that they now float left and right all right all right now let's go ahead and give the container 12 an actual id so we can control the margin basically between these elements so let me go over here id equals i'm just going to call it mdc i can mid content come up here just after or before the first media query and we want to give that let's see where quick margin top and i'm going to try like 230 230 pixels from the element above it ah that's too much and again you know if you want to fine-tune this or even if you want to make it specific to which is always a good thing you know i believe the element that it's taking this from is from the bottom of this to there so this would be the distance just a copy merge there's a quicker i think there's a tool you can use but i just do this i've always done it for some reason like that 202 so take uh 202 save it and that is the actual distance consistent with our photoshop document and then of course we're going to have to use a media query to come back and take that margin down all right so basically that is within the 767 media query so let me just take this there we go and it's only going to have to be like 50 i think or 40. um well we'll see um basically yeah we also want this centered obviously so let's uh let's see where we have what we have going here so we want this to be centered and we want that to be centered as well so we previously created a class called alc and we want that to add that on to this right here i believe for yeah so alpha omega alc and we can also add it on to this as well so let's save that and it's a lot better and so we're gonna definitely want to drop down the uh the font size here for 767 for the h1 so and that way when we do that it'll scale everything up that way this isn't so close to the edge there so let's go ahead and there um i don't think we have h1 inside here yet so i believe the font size was to it was 2.5 right let me see yes right here we may have to adjust the line height as well so i'm just going to copy everything just kind of paste it in there and bring this in and that oops all right so let's go ahead and take that we don't need to adjust the font weight or anything let's try just two just to see what that looks like and this will probably have to be dropped down to i don't know 32 i'll try it all right so now we have like a better more even all right that still looks pretty good except this does not so we have to kind of figure out how we want to adjust this instead of making it a um 100 i think we're going to make it 90. so that's right there all right now that's better um all right so right here we have an issue because we dropped down the size of this we have to increase that distance and that was where was that trying to remember here yeah it's mdc yeah okay so margin top let's try 70. okay let's try 100. all right that's a bit better and now uh let's go ahead yeah that we don't want that to be left uh centered on that portion kind of forgot about that um where was that let's see is on mdc i think yeah i was on alc except it's being applied to everything any type of screen width or device width so what we can do is make it so that when we're up here um we'll put it right after the first one if we put mdc as a big content alc text align left and hope that works all right that's better and so now what we have to do is since it's it's still affecting that we have to come down here it was kind of redundant actually text align center there okay so let us go ahead now i think that will be it for that um code right there so if we just take this we want to copy this right here paste it and this is going to be breathalyzer dash bad save it all right so this is what it looks like which looks pretty decent uh and then it comes in a little bit and it's too scrunched up i don't like that it's like too close um let's look and see what happens though when it gets further in okay that's not too bad uh let's see here so let's work on that this portion right here remember we gave it a class both of these so we can control them and that was right here so i want to make the width or the scale of that thing from 100 down to 80. usually when i have just one property you can just put it all on one line all right let's see here so that scales everything down just a bit and that way when it's it's brought in now of course because we put 80 percent and it was not on a specific media query of course this is what happens so we just come down here well first let's grab that come down here oh sorry what i meant to do was see because if you put 80 like 100 percent it'll go to the absolute 100 of the parent so what we want to do is just put width auto so it'll be the width of the image itself and we also want that centered so to center an element uh in in and of itself you can use margin zero auto and that will auto adjust based on the width from left and right so now that's centered all right so all right all right cool now let's continue on with the final section which is down here so we're going to need a container to make this gray so that's the first thing we'll start out with so let's go back here we'll specify uh damn there it is okay so we'll go at the bottom of everything put in div id equals gray container close that up and inside of it we're going to do div class equals container 12 and then also add the alc align center class because if we go back over here you can see how everything is just basically aligned in the center this this this the text the image and this as well all right so let's close that out all right so then inside of that we're going to have to put a class called diff class equals row and that is also defined in the 1140.css and i'll explain that a little bit and then inside of it we're going to put if we go back here turn on our grid each one of these if you remember is four columns wide just like that so let's go ahead and close that out so we're going to need div class equals column 4 alpha omega and leave it at that and then inside of it we'll have the image and the actual quote so for the image images and it was person.jpg and then we had let me get rid of that we'll go up 100 you can see we have um the name and then we have whatever they said and you can see that they are styled differently and that one is on its own separate line and then also this is a gray color i'll copy that real quick so the way you work with this and you can do it within a single paragraph tag is like this so we'll put p class equals we'll give it a class that we can control so quotes and the reason we're given a class is because it will appear three times uh we can give it a span html tag a spam is i perfect for the usage of what we're about to let's see here gary story span and just to make this a little bit more readable and then we can come down here oops that was the wrong one let me uh and then just type that right there p alright so now um let me go ahead and take this everything from here and paste that three times all right so if we look at this it's not going to look good at all let me see here so let us first go ahead and work on that great container id all right and right here all right so inside of it we're going to give it the background oh my god background color which we don't know because i initially copied that at the wrong time so it's like seven nine seven nine seven nine all right and then we also need to give it a lot of margin and padding so margin from the top will be 70 pixels or you just do this 70 pixels and then padding from the top and bottom 80 pixels 0. so if we save this and refresh this oh ridiculous i got the wrong i got the text color instead of this which is e5 e5 e5 all right good all right so now we have to work on the text a little bit so basically if we want to control that name portion it's going to be p or it's going to be dot quotes space span so what we can do is control that so quotes span and we want to make sure that nothing will float to the left or right of it and the way you do that is just display block and then font size will make that a little bit bigger and we're going to want to make sure it stays black because when we come down here we're going to make the color the one that i initially tried to get i think is seven nine seven nine seven nine right there yes so that's when we're gonna use it appropriately that appropriately and let's just save that there we go and i want to give this thing a little bit margin you know from the picture so let's just put margin top 10 pixels now pushes that down a little bit all right we're almost done well not entirely but with the actual css stuff for the most part uh now we need to put the image and the image will go just after the row so that's right there and we'll put image source equals images phone dash i had a typo i called it sid and set aside and it's not a phone i keep on doing that all throughout this it's ridiculous id equals phone dash side all right so let's see what that looks like and the reason we get an id so we can push this stuff down so we'll go to just beneath here margin dash top 50 pixels just experiment see if that works this should work pretty good all right and there we go so let's see what this thing looks like when it scales down cool all right so you know we are going to have one more day until we're done with this and the reason being is because we need to make some some just finer adjustments um we're going to make these kind of do we really have that issue again the links aren't working one second and that's because i kind of forgot to add a necessary kind of class um the reason this is happening is because the absolute uh this is kind of sitting on top of it basically so we need to bring forward this and kind of layer it on top so we can actually click these things they're all supposed to be links so basically we want to go and find let's go here real quick scroll up and it's on i believe container 12 this is all of our header stuff and i'll add an id id equals z fix as in z index it's called it's like a um css property i'll just put it here at the bottom z index is we'll just put it too but at fault everything's kind of just on the same path so now we can hover over all right cool so getting back to where i was trying to stay is we'll uh we'll style the links a little bit so that there's hover effects and off obviously as well when we scale this down we're going to uh probably use javascript i haven't really figured out the way i want to approach it i think it's probably a necessity we use javascript uh and it's very lightweight you know it's not intense or anything but basically just have to capture the click and then reveal and show the uh the menu again that was hidden um and then make it so that when you click it again it will just kind of go back up um all right so that will probably you know that's definitely worthy of covering again uh in a different tutorial because we're already at 40 minutes and also you know small stuff like this you know hover you can change the color and stuff and yeah i think that's it all right so as always visit designcourse.com subscribe here if you haven't yet and i will see you tomorrow you