Build One Color UI Responsive Website Tutorial (HTML5 & CSS3)

good morning my gorgeous friends on the internet in this episode we were going to build out this website we did the design previously on this one so this is how it looks we only used one color and no people were like well it's not technically one color because you use black and white well if I would have used only one color this whole website would have looked like this yeah there you go there's the finished website everybody thanks for watching good bye so obviously I could've not done that so we use red basically everywhere and I did a bunch of these HTML and CSS websites before but hey since a lot of you really guys like it let's let's make another one so let's build this out the files I'm gonna have everything in the description so you can you can have access to it and and yeah let's open up vs code I'm gonna leave this open just so we can kind of copy the text if you want to make part one feel free to make part one it's like two or three videos behind just search for this Tom nail and you can find it but let's build it out and we're gonna go to Visual Studio code here I'm gonna pop this open and just make a new folder here so open folder I'm just gonna create a new one very quickly here and [Music] let me just make a new window so you can see what I'm doing here there we go open folder and let's just make a new one I'm gonna call this one color tutorial okay let's pop this open I'm gonna close everything up here so for this one we're gonna be using sass just to make our CSS a bit easier if you don't those tasks don't worry you can still follow along it's really not that difficult but first of all let's just import the images again I'm gonna put the whole file there for you so it's here with all the images so you can exactly follow along oh yeah so let's make the index.html there we go I'm gonna hit shift and one which is gonna give me the exclamation boy and hit tab so we get a nice boiler platoon okay so the fonts that were let's just fix up the fonts now so we use lobster on this one and montserrat on this one right yeah okay so for that we need to go to the Google's go to the Google's and search google fonts there we go hit that up on the flow let's make that okay so lobster take on song is in my mind ok so this is the one how do i download it I have no idea select the style there we go there we go success and let's also go back here and search for months are at Montserrat this is the one click clickety clackety we're gonna go for regular so select and also I mean we can either go for medium or semi bold that's just you let's go what semi bold so select ok then we're gonna go here to embed and we're just gonna copy this whole sucker over I'm gonna leave this page open just so we can copy B CSS rules over as well I'm just gonna plop it to the side for now so let's just go back here and just paste this in like that okay so this loads up basically all the fonts I think so yeah lobster Monserrat good let's rename this title so our website was gonna be one UI color or something whatever whatever you close your boat and finally let's fix up the sass so we're gonna be using sass and the reason we're it white we're gonna be using sass is because it makes our lives easier we can kind of take all of our CSS and each section of our page and kind of separate it into their own separate files so again we're not gonna be doing anything super crazy but the basically the extensions that we're going to use are these so go here to the extension and search for sass ok and it's gonna be live sass compiler so make sure you install that and I also have live server installed so search for live server ok and install this as well good very good good job good job good job ok so now we can start I can name here where we can make a folder styles like that and then here I'm gonna make a new file and call this style dot s CSS okay so SCSS not sass there we go okay so now what we can do is you're gonna have a little button down here let me see if that shows up yeah you have a little button here that says watch says now here's the cool part I can grab the body or something I can add a display flags and just to fight woo what's happening justify content center and hit save and when I hit save I can click the watch set and just leave this open and close this up here so that's if you get the watching here that means it's working just close this sucker up and look at generate through the essay style that CSS file and the cool part is it also adds basically all the compatibility for Microsoft so if you're using Internet Explorer then stop stop doing web development okay but it has everything to make it compatible on all browsers which is super nice and now we can have super functionality with separating files and just combining everything in here you're gonna see in just a bit but what we're gonna do your index.html should link the CSS because it can only read CSS it cannot actually read the sass file right so that's what we're linking here so go here and just link the CSS file Styles style dot CSS and that's it okay let's start making the first page so here basically we have a simple navbar we're kind of gonna modify this we're not gonna make it exactly like this just up here we're gonna kind of change up the names here but everything else should kind of be the same so let's start off with the nav so for the nav let's go here in the body I'm just gonna create a main tag in here and in here we're gonna add a div with a class I can just add the dot and just a nav container you're gonna see why I'm adding the nav container in here and not just nav like this so this nav container is basically gonna have a the background on it here and basically the reason why I'm adding the nav in here is because I want to make the width smaller so as you can see here it has like the width 80% and then I can kind of move it to the center and you're gonna see in a bit what I mean let's just make it now and then it's kind of easier so let's just make a h1 here I'm gonna give this an ID of logo okay and this is gonna be called lekha and that's it and next up let's go let's do everything yeah let's do everything in here just so I can make the display flex easier so I'm gonna add a ul in here and just add two allies so Li a and this is gonna take me to features and here we're gonna say features all right if you want to create a quick copy of this you can hold shift alt and press down boom okay um this one is gonna be on stood soon or something I'm gonna add order let's also add classes to this because I did not actually let's just add one to this because I want to color this differently so the order button I want to be able to select this separately so I'm gonna say order okay so that's the nav that's also built out the first section and then we're kind of gonna stop so here's the main and after the div here so after this whole nav container we're gonna create a section with a class of home like that okay in here I'm gonna create another one called showcase we're gonna have a h2 hear of lekha and six alright so we're adding the titles and everything so this one Leica m6 now we need the image and the small little box here so text we're gonna have an image oops what am i doing what am i linking here image dot slash image and this one's called camera camera one PNG okay that's camera 1 PNG you can the alt if you want I'm gonna keep this short and simple now we're gonna be using what am I gonna be using here we're gonna be using grid so I can just add them like this page to image and for this one I'm actually gonna add this end of div because we're gonna have a header and some paragraph down here so I'm gonna make a info div or something for this one and here we're gonna have a h3 small but powerful you can add any text you want and a paragraph so I'm just gonna copy this from here then you lake whatever fake news it's actually not true but it is what it is okay so there we go that's it that's all we need for now we're gonna create two more sections in a bit well let's kind of start styling this thing up what's happening to my body let's open live server look at that and we are done thank you for watching yeah let's just go here to style that CSS and this is the part where we kind of we can start kind of splitting things up in our sass so what we're gonna do is we're gonna delete everything from here and we're gonna go to the styles and just make a new file so hit plus here or this one and then we create one called underscore whole dot and CSS so what this underscore basically means that it's a partial and what you can do with the partial is you can kind of import it in another place so what I mean by that well check this out I can just say body is sexy and color is red and then I can go here and just say imports home like that just home no part nor underscore no nothing and hit save okay and now take a look if we go to style that CSS everything still works fine but I can separate it so I don't have a super large file just one super large file okay so let's see how we're gonna well what I like to do is in here in the style that CSS I like to add some basic kind of global styles so what I'm gonna do is a HTML font size 60 2.5% and hit save so what is this 60 2.5% well I like to do this because I like to work with rims and if you add 60 2.5% here basically one Ram is gonna mean 10 pixels all right not 1.6 so this is just keeps the math easier now everything on the website is gonna be way smaller like this so we're gonna have to adjust everything and I did so what else I like to do is just grab everything by using the star symbol and I can just say margin:0 padding:0 and box-sizing border box all right this just gets rid of all the basic padding set margins and I'll add it afterwards if I really want you now on the body I generally like to add the color white here because most of the things on the website here are white like the text and everything almost not this one but it's okay and I also like to add the font family now if you remember I told you don't close the google chrome tab if you had it open hopefully you did where is it it's here so copy over the font family of montserrat if you don't have it then you need to manually do it like this font family montserrat okay it's safe let's see what else we need to do here let's adjust the H ones and the h2s and all those good stuff so for H h1 I picked a font size of 2.5 mm and the H ones here are basically the title here the logo and the footer logo here okay so I don't want that to be super huge so that's 2.5 RAM and and I also want to change the font family on this because they want to have that lobster font I'm just gonna copy this over here change this to lobster like that and the font weight is gonna be lighter hit save so let's take a look at that there we go so now it looks nice very very nice why is my color red oh let's remove this from here okay good okay so let's start with the H tubes I kind of like to do all of these globally here to be honest kind of set it up because then I can just make my h1 h2 h3 and whatever and it's gonna have a consistent style over across the whole website so I highly recommend you to do this just add the kind of global styles at the beginning I was do a font size here I choose something really big here a tram font family is gonna be lobster I'm just gonna copy these two over here okay let's do a ch3 there's gonna be a font size of 3.5 Ram we picked and page four font size of tree ram this is the funnest part of web development I cannot believe like watching somebody's tutorial and it's like found size 2.5 fun size 3.5 h1 oh Jesus okay 2.5 Ram on the P because I like to P the Li is gonna have to Ram your mom has five Rams the a tag is gonna have a color of white and a text akhirat see own of none okay that's it promise that's it the problem now is we cannot see anything only the crappy camera so we can start in the home so let's go home soldier by the way the last of us part two is coming out if you don't know that's a game and I'm really disappointed because I saw the spoilers and I'm kind of contemplating if I should either buy it or not so if you if you know anything about the so us tell me if you're gonna play it or not okay so let's grab the home we're gonna add a background we're gonna use this linear gradient here so it's kind of like grayish and kind of dark there I have it here so I'm just gonna copy it over and you can edit manually so it's a radial gradient and it's five to five you can read it you can read it don't be lazy hit save okay let's see there it is amazing okay so we want to fix the top portion because it's currently not nice so I'm gonna grab the nav container I'm gonna add a background of black all right or you can do kind of a lighter color it doesn't need to be full on black 3435 yeah seven yeah we go so something like that okay and then we can grab the nav so nav and this is the reason basically why I added in nav container here because remember I try to explain it to you and I did a very poor job so here is in practice so why do we wrap this and I just had a simple Neff the reason why I did this is because I want to add the width of eighty percent on this one and a margin Auto which is gonna move all the content to the center like this now if I did not have this nav container and I just added the background on him nav then I would have had this see so I don't want this I want this to stretch all the way the background so I just wrapped it around the nav container okay okay so we have that I'm gonna add a minimum height to this of ten VH all right I want to have a specific height on this just add a bit of padding three R M on top and bottom like that and then 0rm left and right then we're gonna add a display flex this is gonna move our content kind of like from left to right alright the children basically so the logo and the UL are gonna be put one next to each other and then we can move this all the way here so to do that you can do justify content space between hit save as you can see now that gives peace between it gives face we're doing to the children so the logo and this one now if we want to align these vertically we can do align items and we can say Center maybe on so now it's perfectly in the center now I want the same thing to happen to the UL I don't want these to be in the column so we can do that too so what we can do now is we don't need to do nav ul because we're working with SAS I can just go and here in the U in the nav and I can just type in ul and that basically means now have ul wow magic so in here I can display this flex again so it's gonna move it one next to each other okay then if I add justify content space between because that's what I want to do the reason why I do space between and not space around is because I want to maintain this nice line here so this kind of matching up with this and this and this matching up with this and this alright so why is this not moving well if we take a look well what's happening what's happening how they zoom out just give me the skimmer the normal one oh here it is one hundred percent no fifty percent how do i zoom this oh my goodness people say why I don't use this is go like this and just remove the responsive crap oh my goodness there we go so if we take a look basically the size of the UL is the size of the text so we need to basically grow this so the justify content works because right now it doesn't have any space so we can use flex one to do that so what we can do is add flex one now flex one is basically going to take up all the available space here Ryan so basically we have the logo and the rest of the space it took it all up so now as you can see space between just puts one here and put some one at the end now I don't want this much space so what I'm gonna do is add a flex one to the logo too so what what does that mean let's take a look logo likes one so now it basically splits the available space so what's the Daisy I did a little mistake I added the hash tag here at the logo so let's get rid of that because that's not gonna work when we add the logo so now if I just say logo here next to the UL ooh that's not good logo if I have flex one this is gonna be the same size now as you can see so this takes up half and this takes up half if I want to get more I can just add more to this if I add to here it's gonna take up twice the space so now this one takes up twice the space as this so I'm just gonna leave it at three we're gonna say tree phlex 1303 good all right let's see what else we need to do oh how do we add this red thing well I did a little hack and I thought I'm gonna show you we can add a position relative to this and now in here I can add an ant symbol and call on : after and this is a way you can insert an under kind of text or element or style specifically in your CSS so basically if I add content here and you need to have this or else it's not gonna work if I say something like blah blah blah as you can see it kind of generates more text even though we didn't add it to the HTML so I wouldn't really recommend using it this way so I'm gonna remove the text but I recommend you to use this to add additional Styles if you want so what I can do now is just say position:absolute and the reason why I'm doing this is so I can place it directly on top of the logo so if I say top what am i doing if I say top zero and left zero it basically adds it relative to the logo that's why we added position:relative so now we can add a width to this let's say six frem and height six Ram and then add a background of and we use that red so f5 4 5 3 8 it's safe ok let's take a look and there it is take a look so again if we did not have position:relative here then it would just added top zero at the top of the page and left 0 but since we added position:relative it's gonna stick it where the logo is so now we kind of need to move it around a bit because it's not really on top there so I can add it that's also at the border radius and make this round I can just say 50% and now I found this works best so we can really transform translate - 10 % , - 20 % now the problem is we cannot see the text anymore now we can mess around with z-index and just z-index everything but I'm lazy and I found a little trick what you can do is just say mix blend mode and just say scream and that works so there we hunt there we go no where is the index issues okay let's also mess around with the order so I'm gonna go after one and two curly brackets here I'm gonna see order backgrounds we're gonna copy it over this color save padding is gonna be one RAM - Ram you can also create variables using sass so maybe grab this color and just add it to a variable we don't really have that much this is not really that complicated of a website so I did not do it guilty order radius let's add to ram okay just kind of add a little background to this as well okay what else do we need to do I should have removed D should the remove the UL here so let's go back to the UL just say list style and just add none and hit save alright so get rid of those dots because we don't want them okay you know what I actually should've use Firefox to this because I can illustrate the grids easier because that's how we're gonna do the next step so I'm gonna just pop up on Firefox here alright I'm just gonna copy the link over from here to Firefox I'm gonna close this up just drag this in here nice okay so for this one we're gonna be using grids so I can easily place this here this one in the middle here and this one down here with yeah what display flex can be a bit tricky to get everything nice so I just create a grid for this one so I'm gonna grab showcase display red all right I'm gonna add a minimum height of 90 VH there we go great templates columns now what do I want here well I still want to keep basically I want to create columns right so I still want to keep that 10% margin here so I'm going to do 10% and I'm also gonna say repeat 3 times 1 fr all right so basically create 3 columns that are the same size that's all this means and then 10% so let's take a look because we can nicely visualize this in Firefox so take a look if I turn on the grid so we have 10% we have one of our one of our one of our and then 10% now this is larger because the image stretches it out but we're gonna fix that in just a bit so yeah so as you can see now this basically starts exactly there where I wanted to now I also want to create rows right basically I want to create three rows so one row where the text is then one in the middle and one down here so let's do grid template rows I'm gonna create them one fr to fr one fr so basically one fr to F for one of our means here is kind of like flex one right in and flex box so basically the middle one should have twice the space as this one and this one so basically this one should be two times bigger than the space of the text down here and again we can see that so don't worry so as you can see this one is small this one is super big and this one is small so now let's move everything and their position so what we can do is just in here in the showcase just say h2 so I want to grab this text and place it here so the way you count is from all the way to the left so you say 1 2 3 4 5 6 so if I want to place this in here I can count 1 2 so from 2 to 3 so I can say read column 2 2 3 and there it is we can do the same thing to the image image this we want here it's fine but I want it down here so what we can do is we can say grid row let's count again so now we count from the top so 1 2 3 4 right so if I want this to be here in the middle 1 2 so from 2 to 3 red Rho 2 u 2 3 it's safe now it might not place it there because Britt is trying to automatically do it for you so if this does not work you also need to specify the column all right because we just added the row it should be on the second row but we never specified the column love you Bob okay so let's also specify that this should be in this column right here in the middle so one two three four five six so from three to four excuse me one two three four five six math is confusing sometimes yes from tree to four okay Jesus grid column from three to four let's see yeah so it's in the middle now okay very nice and now this one should go down here so let's counter the column one two three so from four to five okay so let's grab the info and say great column four to five okay but it should be down here so one two three four so from three to four grid Row three to four there we go so that's it it's not that difficult it's very easy to kind of position things the way you want and and get this kind of nice layout cowan now there's still a few changes I want to make so as you can see this is to F R so it's two times bigger than these two but the thing I want to modify is I kind of want to push this down here so let's go here and just say all I'm self flex ends all right just pushing this down here very good and for the image I actually one of them let's see what happens kind of when we resize so nothing really happens so what I want to do is also make this a bit bigger but not mess it up so if I add the height of one 2% to this let's see 120% so I'm gonna make it even larger like that it kind of goes out like that in a weird way but I also want to this to resize see it kind of breaks it looks terrible so what I want to do is go here and just say object fit cover like that and then let's see what happens now basically it kind of keeps itself in this grid but we also need to add a line self-center and justify itself Center it's safe there we go let's take a look open this up where's my grid there it is pop this open so now it's kind of in the center even if it leaves there a bit it's fine but okay it's not working you know what we can do is we can add a resize here to the columns so what I can say is repeat three times one fr but I can also add a min/max to this so what I can do is say repeat get rid of this comma I'm just saying man max like that and then here I can say five REM and one fr so it's gonna become smaller Oh also make sure you remove the - here it's min max together like that so basically what this means it allows it to shrink down to a smaller size so now I think we shouldn't have that problem so let's turn on the grid all right I'm just kind of messing around with this and see what works yes and now as you can see kind of stays there which is super nice and it doesn't really fall apart I can go smaller and then just add a mobile thing down kind of here kind of fix things up okay so it doesn't really break that bad again you can kind of do different things here you can mess around with the width maybe do something with that I can I want to keep it the same size so that's why I kind of just added the height here the cool thing here is you can make this as big as you want like that if you want something really big and then it kind of stays the same size I'm gonna keep it 110% 120 something like that that's fine okay lastly you just add a bit of padding down here so and here the info I'm just gonna grab the h3 and just say padding-bottom that's ant we ramp to this and yeah that's fine okay so that's the first page let's go into the index.html and just create another section so for this one we used grid for the other one we're just gonna use flexbox again I think so again I'm gonna create a features container and just so we can view the width and margin trick and I'm gonna add a section in here so section features and then we're gonna have the cards so I'm gonna add the title of features and in here we're gonna have cards I'm going to create a cards div and in here on my nose is so itchy we're gonna have cards and let's just do card and in here I'm gonna have an image I didn't name these super nicely so I apologize but it's card11 alright let's add the h4 here we're gonna say 4k 60fps and let's add ap get those slow motions my boy okay so that's one let's copy this and create two more one and two hit save I'm just gonna modify this to two and this one two three okay I should have removed this if you want to remove it remove it and just modify it in the image folder okay and that's it that's the whole thing lastly we have a little wave going here so this one so let's also add that and where do we need to position this so we have the section let's do it after the section I'm just gonna add an image with a class of wave let's add this after at the end we're gonna come back to this so again I just go to the styles and create a partial with the underscore call this features the fetcher is not a CSS okay go back here to the styles and import it there we go hit save something is not correct okay let's rename this one its features like that save okay now it's working so close this up close everything here just go to the features and let's work on this we're gonna grab features container we're kind of gonna do the same thing I'm just gonna add a gray background to this three two three two three two then I add a position:relative actually I'm not gonna add this so I can explain you why I'm adding this and just keep it like that just add the background we're gonna grab the features and just do a min height of 90 VH just add a bit of height we're gonna do the margin trick eighty percent margin Auto okay so this is what we have so everything is aligning up nicely again and now what we can do is edit display flex all right there we go I'm gonna do a so this basically adds a display flex to the title here and the whole card system alright not the individual cards and here so now I'm just gonna add a flex direction of column and a justified content of space justify content of space between let's do space around okay so just adds a bit of space around these the features and the cards that the cards are taking up all the space so we're gonna get half of all the cards like that and that Lee display flex to this as well like that alright so basically this is the space between between the title and the cards this is what happens up here so now here we can do justified content space between again for these to kind of spread around which is nice okay the texts here should be black and I'm get individual all the individual cards so card and here in the cards we can add a background of white we can add a little margin:0 ram three ram like that oops I messed it up like that okay so this basically adds it left and right we're gonna grab let's you and what do we want to do here we want to also move the text in here so let's do display flex flex Direction column like that and as you can see now it stretches the image out nicely I want the text to be in the center so let's do text-align:center there we go and we're gonna stretch this box out using everything in here so don't worry I think that's gonna be at here so after this still in the car we're gonna add a cage for just add a bit of margin to this top and bottom it's gotta be three REM and then zero REM left and right so it gives a bit of space here and now we can add a P here just add a padding up to you rim so now what stretches the box out nicely now this looks bad why does it look bad let's also change the text here lorem 10 just do you I don't want that much text here there we go let me just copy over this here and here so we have more text oops okay just a bit more text I don't want the images to look like this so what's the solution well the solution is we go here and grab the image and do object fits cover there we go it is a little terrible anymore I can also add a border radius here of to R M and now it makes it nice and what do you call this round but you're gonna see a little thing it doesn't make it round here why not why is it not round here well because the image here kind of stretches outside of the box so it doesn't really go down like this so to fix this if you ever encounter this if you have a card system or anything and you have an image in and you add a border radius to the card and it doesn't basically add it here the solution to this is to add a overflow:hidden so you go here and add an overflow head into the card and now it cuts off the image basically and it makes it nice and round so there we go that's what we have we can add a bit more margin here if we want more space let's do fun to this one up here to the card it's you 5 you can do 10 or something if you want something like this it's kind of up to you yeah should we you I think this looks better yeah let's keep it 10 yeah there we go feel free to modify the text maybe the space in between here is too big to Bram yeah I guess we can do this is you top so this is top this is right and this is bottom one ram bottom yeah there we go that's a bit nicer and then zero Ram left and right okay so something like this you can experiment with this if you want to make it look nicer okay now let's add a little bit of wave in here so that's why I kind of did them focus on here so let's go back here and after this div I believe let me just double check so I'm not messing things up again yeah so after did this section here this is the container basically right so features container features container so right above that we're gonna add an image with a source of dot slash and we're gonna go here to the wave wave PNG okay hit save I'm also gonna add a class of wave to this so now how can we make this look nice so it's down here we want to have it right here so what we can do is go up here all the way to the features container we're gonna add a position relative to this so I want to move this based on the features containers position so in here I can add the wave and say position absolute and basically the left is going to be 0 and bottom is gonna be 0 okay and the width is gonna be is gonna stretch all the way to 100% so there it is okay now again we need to kind of mess around with the z-index here so if I say Z and X minus 1 all right it's gonna disappear because we need to specify a Z index on this one C and X 0 and there it is now I don't I think it covers up too much to be honest so like one solution here is either to move the up a bit or move the wave down which is I think what I did was I move the wave down so I can just go here to the bottom and just say minus 25% or something like that and there we go kind of moves it down now I don't want this to stretch so much down here I kind of wanted to cut off right I don't want my mic whole container here to grow which is because of the wave and just because I'm pushing this down because I can push this down all the way to minus 100 and it's gonna go all the way down here and the P Scrolls too much so what I'm gonna do is just add an overflow hidden to this overflow hidden and now as you can see I cannot scroll anymore even though I'm pushing this down theoretically I can push it down as much as I want I can do 50 percent like that and I cannot scroll because it cuts stuff but I'm gonna do 25 I think that's fine okay that's it that's the whole thing here finally we have the last page and then we're gonna do the footer and the mobile responsiveness my throat hurts so this is where we take a little bit of break get your water hydrate that's very important and let's do some squat is the content you sign up for you subscribe yes subscribe fantastic fantastic okay are you ready Oh what's this cutting the thing off oh my goodness please say you didn't please say I didn't I didn't even know the content was cutting off I apologize I shouldn't and should have not been here I'm gonna place myself here okay so let's do the final one let's go to index.html let's go after the TIF here and this is where we the are left okay so the final parts are just gonna be a simple coming soon and a footer so this is gonna be super short section soon like that h to go with coming soon like that in here I'm just gonna drop in an image thought / image this is gonna be camera soon and then we're gonna have an image with the circle so let's grab the circle circle PNG okay that's it that's it that's the whole thing let's do the footer as well why not h1 scroll down here so you can see leica 2020 you can do the copyright symbol if you're edgy UL li a confusion of the highest order hashtag image this looks terrible i know web development and its finest we're gonna go to youtube logo okay we're gonna copy this whole bold bold thing and paste it two more times and then we're gonna modify this to twitter and this one too and the Webster grams okay that's it that's the whole thing close this thing up and let's create a soon dot CSS make sure it's a partial so make sure you use the underscore I'm gonna come and verify you if you don't I'm calling your mother okay soon that s CSS super short okay so this is what we have so soon I'm gonna copy over and go to home copy over this background gradient add a min height position relative again we're gonna kind of position the circle and everything and easy index of zero is we're gonna mess around with this circle too so in here now I'm gonna grab the image comma the circle comma H to make sure you add the dot here as well we're gonna just position everything in the middle position absolute top fifty percent left fifty percent and then transform translate - 50% - 50 percent that's how you Center it right here why is it not working why you do this why you do this watch says oh I need to import the damn thing so if it doesn't work go here to your style that s CSS and import this soon there we go and our works it's messed up but it works so now we can grab the circle and add a z-index of - one like that and grab the H where's the camera and stuff is disappeared what did i do that's not okay that's the question so this is zero the circle is minus one so this should still show up on top shouldnít confusion confusion let's see where's my camera here's the camera let's grab the camera image Z and X 1 well no cuz that's a day class to this let's go here oh that's another class of the circle I don't have a class on the circle there we go that fix the issue so now let's just grab the h2 and say top 25% and now it's on the top so that looks fine yeah that's fine that's also duty phota should we do it here I think I'm just gonna do it and yeah let's just make it why not that's making you footer that s CSS and make sure we import it now before we forget like that and now we can go here super simple we're kind of gonna do the same thing we did add the nav so just copy paste almost background black padding left 10% having right 10% I'm just gonna do this and I'll do the width you can also do this if you don't want to do the with 80% margin autumn SAP padding left padding right display flex a line item center justify content space between again this is almost copy paste here grab the UL display flex flex one list style it's gonna be we should have just copy-paste it or just use sasses import thing but whatever space between h1 flex tree yeah it should a copy paste a damn it's fine so now we have this there we go so that's the whole tank now let's also make it a bit mobile-friendly because it goes crazy when we get down here and it doesn't look that nice so let's just do something super basic here I'm just gonna go here to the style that s CSS I'm gonna do it here you can make another partial if you want media screen and max width as you thousand two hundred pixels this is kind of the moment where the website breaks I can verify this beforehand I'm just gonna make all the fonts a bit smaller font size 50% so now when we get down here as you can see the font magically changes yeah I guess we could do to the this thing here like that so we can easily visualize the thing so maybe these are getting squeezed a bit too much aren't they then just can I increase the size of them so let's go to the features here at the margin I'm just gonna do something like five so they're not that squeezed okay so let's go back here to the mobile well I didn't do it there I just did it here let's grab you let's fix the nav up first so nav I'm gonna grab the logo in here I'm just gonna add a flex one to it like that and in here the UL li I'm just gonna add a bit of margin left of 5 mm all right let's see the nav there we go alright so I can go pretty small here and it doesn't mess it up yeah that's good let's fix this section up here so what I'm gonna do is just kind of get rid of the of the columns and just make one so let's see the structure here after the Nev so down here showcase grid template column this is gonna do ten percent one and four ten percent that's the whole thing alright that's all we need and it makes just one column okay and now what I can do in here in the showcase is just grab the image add a width of 100% to it object fit contain like that now it's still not good so what we need to do down here grab the image h2 and the info and just move them all in the middle red column make sure it's in the middle so two two three text the line let's see so as you can see it just moved everything and the middle column and left the spaces here BAM now what I also want to do is align the text to the center there we go text align Center cool so that's good that's good enough let's go here grab the features that a line item center to these all right so it just aligns this to the center grab the edge to end up at the margin on top five rim alright just pushing this down a bit like that let's grab the cards flex direction we're gonna change to column so it goes like that now good this looks terrible so that's a D width of 100% of this alright let's add margins to you so let's grab the each individual cards margin 5r m 0r m alright so now I wanna get squeezed down I guess it doesn't look that terrible yeah it looks okay I guess you can add another point maybe here and squeeze this down even more to something like 60 like that and then when you get super small you can have a hundred percent here so it's like that alright so here 100% and here maybe at this size maybe have eighty percent all right so you just make another media query and that's gonna fix it all up but so far it's pretty good looks fine down here I just add the soon I'm just gonna do a super basic one I noticed there is a little problem here you can scroll horizontally when it gets to the side because of the circle so I just added an overflow:hidden to it and then in here I just grab the image and change the width of it 60% to make it kind of smaller like that and grab the h2 under there may be a problem of of this text looking kind of weird so just change the font size of it five RAM a bit smaller and text-align:center like that yeah it's fine it's not too bad okay and we can kind of ply the same thing to the footer like we did up there so we can do footer h1 flex one and hit save okay and that gives us way more space so there we go a little little website here made from scratch if you also want to do this I forgot to say if you want this to move with you the nav here let's go to the home and find the nav what we can do is just add a position sticky to it so a nav container position sticky we can add a top of zero and AZ index of two and that's it now it comes with us magically there we go very cool so that's it hope you enjoyed I know it was a bit long and my voice is kind of cracking up so I apologize for that but hope you enjoyed it if you want to use it to use it work on it experiment with it do whatever you want with it and I also apologize for me being here and blocking the text so sorry about that unprofessional not acceptable okay thanks so much for watching and until next time Baba Booey

Channel: Dev Ed

Views: 244,925

Keywords: website, one color ui, responsive website, html5, css3, website tutorial, build website

Id: 2IjyqauKumE

Length: 61min 44sec (3704 seconds)

Published: Fri Jun 19 2020