Creative Agency Website From Scratch | HTML & CSS

[Music] what's going on guys so it's been a while since i did an html and css project so i put together a four-page website to build together and we're going to look at things like css positioning flexbox one of the pages is going to use css grid so it's basically a creative agency website this is the home page you see we have this image on the side this text over here and we have this toggle this menu toggle which will toggle a full screen menu with some social media icons we will have a tiny bit of javascript just to toggle the the menu but that's it and then we have a services page so we have these cards here we're going to use css grid to line this up and we have a work page with these portfolio items we're going to use flexbox here and we have these this nice little hover effect and then on the contact page we have a form and we have some address info and stuff so this is responsive you'll see if i make this smaller once it gets to a certain point the image will just go away so on mobile screens it'll look like this it's a little plain but i think it looks pretty clean and then if we go to services you'll see everything is stacked work everything is stacked and then our contact form looks decent as well alright so that's it let's go ahead and jump into it all right so we're going to get started and i would suggest following along i think that's the best way to learn we're going to be writing quite a bit of css and talking about things like flexbox and even css grid and positioning things like that so it's it's best to follow along i'm gonna have the final project here open um just so we can use it as kind of a reference and when we start to style it i'm gonna have to make this a little bigger so that i can see the desktop view but we'll start off like this and then i have my text editor open over here i'm using visual studio code and of course you can use whatever text editor you want i have created some files and folders to kind of begin with you can get all the code and the images and stuff in the github repository link in the description but i'll just go over it i have an empty index html we will have other index sorry other html pages later for our inner pages but we'll create them when we need to and then i have a css folder with a style.css which is empty and then a js folder with a script js which is empty and really the only javascript that we're going to need is to toggle this button here to toggle the class so that we can show the navigation all right so of course i have all my images here as well and again you can get those in the link in the description so let's start off with just creating a boilerplate i'm going to close up the sidebar for now and in index.html i'm just going to do exclamation enter that's going to give me my head body tags and some meta tags let's change the title to let's say creative agency and let's add our link to our style sheet which is in the css folder style.css and while we're at it we'll add the script tag down here with a source attribute to it's in the js folder and then script js and then for now i'm just going to put an h1 here and just say hello and save and i have my my prettier extension set up to basically format my code when i save so if i have something way over here and i save it's going to automatically fix that and you can you can set that in your vs code settings so you can open this just right on your file system or you can use an extension which i'm using called live server so if you install that you'll then be able to just say open with live server and it should open in a new tab and this will this will uh you know reload every time i save so if i put in world and save it's going to automatically reload all right so let's get rid of that h1 and let's start with our header so basically every page is going to have a header and a section so the section will be the main content the header all it's really going to have is the the logo which we're just going to have some text and then our toggle button with the navigation so let's go ahead and add a logo here so just a div with a class of logo and we'll say creative agency and you can put an image in here if you want and then a class of toggle so div with a class of toggle that's going to represent our icon and our toggle icon and then we'll have our navigation which is going to be everything that displays when we click this so the links here the the social media icons and this little email icon so all that stuff's going to go in the navigation so let's put a ul in here an unordered list with a list item with a link and this is going to go to index.html this is going to be our home home page i'm going to copy this down so on mac you can do shift option down on windows shift alt down and we're going to copy that down so we have four of them this next one is going to be services and that's going to go to services html which we don't have yet but we will create it and then let's do work dot html change this to work and then this is going to be contact and we'll change this to contact so we'll save that and now you can see we have our little logo here and our menu now the social icons that's going to go outside of this ul in a div with the class of social oops social dashbar and inside social bar will have an another unordered list list item and in here we're going to have a link and i'm just going to have this go to facebook normally this would go to your facebook page your profile and then inside here we'll have an image and in my images folder i have a facebook png all right we're probably going to want this to open up in a new tab so let's add the target attribute and set that to underscore blank okay and then what we'll do is take this li right here and copy this down twice and this this one here is going to be twitter so we'll change that and that okay and then this one is going to be instagram so change that instagram png so if i save that we should see our three icons now the email one is going to go outside of the ul because it's going to go down towards the bottom so just outside that we're going to create an a tag i'm going to give it a class of email icon and it's just going to go to mail 2 colon and then whatever you want whatever email address you want to put in the subject line of your email client so we'll say you at email you at email.com or whatever you want to put there and then inside that a tag we want an image it's going to be images slash email.png and you should see this this at sign now all right so that's pretty much it for the header now in the section here we're going to have basically the the big home image which is going to go on the right we're going to position it absolute and then we have our text our heading and paragraph so let's add the image so that's going to be images slash home slash or home dash image and i'm going to give it a class of home dash image and then underneath that let's have a div call it home content and in here we'll have an h1 we're going to say we help to achieve and then i'm just going to put a line break here just to put the rest of this on a new line and say your goals and then a paragraph i want some dummy text in here so i'll use emmet and just do lorem let's try 40. that'll give us 40 dummy text words and then under the paragraph we'll have an a tag i'm going to give it a class of button and this is going to go to contact.html and yeah let's just say get started all right so that should do it for at least the markup now we have to start on our css so let's go to css and open up our style sheet and the first thing i want to do is bring my font in that i'm going to use so i'm just going to grab it and paste it in so i'm importing the poppins font from google fonts so you can just copy this or you can go to fonts.google.com search for pop-ins and just get the import all right so we're going to add that then let's add a reset so i'm going to use the universal selector which is an asterisk and i just want to remove all the margin and padding from everything so if we say margin zero padding zero now you can see all the space is gone and i also want to add a box sizing property set that to border box so that no so the padding doesn't affect the width of any elements or anything like that so that's our reset now let's add html body and this is where we're going to add our font family we're using poppins so pop-ins sans-serif okay so now our font looks much better and also let's add the color which is basically black hexadecimal one one one all right and then so we have our html body let's do let's uh let's actually hide the navigation for now because that's not going to show by default until we click this and i don't want to style that just yet so i'm going to just for the navigation class i'm going to display none just to get rid of that okay let's do the logo so remember we have this this class of logo and i want this to be positioned absolute so basically take take it out of the regular flow of things and position it absolute so we can give it values like say from the top we're going to set it 30 pixels that'll move it 30 pixels down let's set it from the left 100 pixels that'll push it over and then i want to change the um the font size so for font size i'm going to use two rem now this is bigger than if we look at this right here also the spacing is different that's because on smaller screens we're going to add a media query to to change it up and make it a little small you'll see when i get when i make this bigger then it's the same okay it's a different weight which will change now but i think what i'm going to do is just keep this like that and it's like we can style you know desktop first we can make this a little smaller but let's go ahead and change the font weight so font weight i'm going to set that to let's set that to 500. so if we go back here actually that's what was the initial weight let me just check something here uh oh font weight 700 not 500. all right so we'll change the font weight to 700 and then let's also set a z index just so it's always on top basically the higher the number the z index the closer to you or the closer to the screen it is so we're going to set that to 10. now and because the reason for that is because we wanted to show even when we open up the menu we don't want this because this is going to be full screen we don't want it covering that logo so let's work on let's work on the section so we have our header which is which is basically you know this up here then we have our section which is the image and then the text and if we look at it there's two direct children in the section the image and the div with the class of home content so i want to actually position the image to be absolute so i want it to be over here on the right kind of plastered to the side i wanted to stretch from the top to bottom so let's do that let's add let's say home what i call it home image and let's position that to be absolute and without adding any other positioning parameters it's gonna you know take this this space up here so let's set it to bottom zero so zero from the bottom and then from the right zero because we want it to be pushed to the right now at this point it's just it's going to be the same size no matter what no matter how i resize the the height of the browser so i kind of want to have it adapt to the height so we'll set a height of let's do 110 percent okay so now it'll change depending on the height of the browser and i mean you can change things up if you want if something doesn't look how you want it to and you want to experiment feel free you know everybody has a preference on what looks good so now that's that's good the the the image as far as this here goes this text i want it to be in the middle now this each section i'm actually going to display as a flexbox so we can easily align things so let's add let's see we'll go right above the logo because i'm going to style the section directly and let's display as a flexbox and then to uh to align this in the middle vertically we have to first add a height onto the flexbox so let's set the height to 100 vh which is a hundred viewport heights and what that means is it's going to take up you know a hundred of 100 viewport heights so the entire height and then we can use align items to center that text okay so now it gets pushed to the center now i also want to add some padding let's do padding 100 pixels okay so that adds some padding notice the words go behind the image so we can change that by making a higher z index on the content so remember that has a class of home content so let's go right here and say home content and say z index set that to 10 and now it's over the image i'm also going to set a max width because i don't want it to go that far over let's set it to 600 pixels okay now if you start to bring this smaller it actually this image is good because you can actually bring it in and it it looks seamless like this right here until you start to hit the plant so we're going to make it so the image disappears when we get to smaller screens so don't worry about that just yet and home content yeah z index will also position this relative okay and then as far as the the text here i'm going to style h1s make them a little bigger so let's say h1 will set the font size to 30 pixels and let's set what else do we want to do to this h1 let's change the font weight right now it's it's really bold so let's do font weight let's say 500. okay and then the paragraph i want to add some margin to the top and bottom and i want to do that to all paragraphs so we'll just target it directly we'll say margin and then it's top right bottom left so top 20 let's do 20 bottom i'm sorry right zero bottom let's do 10 pixels left we'll do zero and since right and left are both zero we don't actually need the last zero and that'll just add some space before and after the paragraph and then i'm actually going to make this font size a little bigger so we'll set that to 1.1 rem now as far as rem units if you're not familiar with with these and and of course i could use pixels here but i wanted to do things where i could teach a lot in this one little project so a rem unit is basically a multiplier of whatever the font size of this of the root html element so by default if we don't if we don't you know explicitly define a font size for this html element it's 16 pixels and that's what one rem is going to be because it's 16 times 1. if i were to change this to 2 rem it would be huge it's going to be 32 pixels and in fact if i show you in my chrome tools here and let's just select this paragraph you'll see it does say two rem here but if i go to computed it'll show me the actual pixels right here 32 pixels now if i change the font size of the root html element explicitly so if i say you know font size and we'll set that to 10 pixels now this font size is 20 pixels 2 rem is 20 pixels because 2 times 10 is 20. and some people will will actually do this so that when they use rem units they could just do like 1.3 and that's going to be 13 right because 10 times 1.3 is it's going to be 13. if you do 1.7 that's going to be 17. however i'll keep it you know at 1.1 and get not have this it's still 16 pixels and you'll see it i end up with 17.6 pixels because it's 16 times 1.1 all right so just kind of a side rant there just to get you familiar with rem units there's also m units where it's relative to its parent font size i have an entire video on rem and m units if you're interested okay so we have the link right here which i want to format as a button so remember we gave it a class of btn so i'm going to put that up here since it's kind of a utility class so for the button let's give it a red background so we'll do background hexadecimal yeah let's do hexadecimal f6 0 f 2 0 and color we'll do white let's get rid of the underline so text decoration none so so far it's going to look like this we're definitely going to want to add some padding so let's do padding 10 pixels on the top and bottom 30 on the left and right let's also add for margin we'll do 20 pixels on the top and bottom zero on the left and right uh why didn't that margin okay so the margin didn't work because this is a link it's an a tag and by default links are displayed inline and we can't add margin to it so let's just add display and let's set that to inline dash block and then i just want to add cursor pointer in case you know you add something you add a form or something you want to add that to an actual button okay so that looks good we could add a little hover effect so if we say btn hover i mean you could change the color if you want i'm going to add a transform scale and 1 is the default so i'm just going to scale it down to 0.98 on hover so you just have that little effect when you hover over it now let's start to do the the toggle button okay so we want to create this this red toggle button here and remember it's just an empty class or i should say an empty div with a class of toggle so let's put this we'll go right underneath the logo and we could actually just put some comments in here just to make this a little easier so home or we'll just say home page what else we got here button and we'll say base styles okay so we got our button we got our home page this will be our navigation actually the navigation i'm probably gonna put up here with the toggle so we'll just cut that and put this here okay so let's take our toggle class and we're going to position this to be fixed not flex we want this to be fixed meaning it's going to stay in the same spot all the time no matter what no matter if we scroll or whatever and i want to put that on the top so top zero but i want it on the right so we want it zero from the right okay if i save that we don't see anything because it's remember it's just an empty div so let's add a width of 60 pixels and a height of also 60 pixels and we're going to have an image so first of all let's add a color so we're just going to use the background property and we're going to use the color this red right here but we also want an image so we're going to add a url and that is going to be up one level so out of the css folder into images and then we want uh menu dot png now we still can't see it because it's it's actually behind the image so we're going to give this a higher z index so we'll say z index 20 and it still looks kind of weird so we're going to add some other properties here like background size we're going to set that to 30 pixels and we want to set background background repeat let's set that to no repeat and let's also set the position so background dash position is going to be center and there we go that looks pretty good we do want this to have a cursor when i go over it so let's add that as well so we just want to add cursor pointer so when we hover over it we have our cursor so let's see um since we reused this color this red for the button for this and this i think maybe we should put that into a variable or what's known as a custom property so in css you can now have custom properties which are basically variables so what we'll do is go up here and it needs to be on some kind of scope so we're going to put it on the root scope meaning we can use this anywhere and the way we define these is with dash dash and then whatever we want to call it so i'm going to do primary dash color and let's set that to where's that color so i'm just going to grab this color here and paste that in so now we can just replace this color here the way that we use these variables is with the var keyword and then just pass in dash dash and then whatever the variable so we want that there and then we'll also put it here as well okay and then that way if you want to change the kind of the theme of the website like let's say we just wanted to put i don't know steel blue and save now it's going to change in that area in that spot and that spot all right let's actually take the border see how there's a border on that button i want to take that off but let's put that color back yeah so we'll say border zero all right so we have the closed now i i do want to make it so that when we click it we're going to be adding our javascript soon when we click it it's going to add the class of active onto it's going to add it on to the navigation it's also going to add it onto this the toggle itself so let's go ahead and say toggle.active and just for right now i'm going to go ahead and just manually add on the class of active like that just so we can kind of see what we're doing and we're going to change the image from the menu so i'm going to just grab this background right here and paste that in here and change it from menu to close which is an x okay and we definitely don't want it to repeat so let's actually just copy let's copy all of this and let's actually change it from 30 to 25 so it'll be a little smaller like that and you can use prcss for like the lines and stuff you don't have to use an image but i didn't want to you know complicate things even more so i think that's fine if that's active it'll have an x now for the navigation let's go ahead and remove the display none that's not how we're going to do this we're not using display none we're basically going to position it off screen if it's not active okay so it's going to have a fixed position and what i'm talking about now with navigation is this whole area okay so we want to basically position it fixed and we want it to take up the entire screen and basically cover everything so let's go into our navigation class and let's add a position of fixed okay and then we're gonna set it from the top let's say top zero and ultimately uh it's going to be left zero but when we don't want to show it i'm gonna set left to a hundred percent meaning i'm pushing it off the screen a hundred percent um but i'll show you how we'll deal with that in a second actually no let's do that now just so we can see what we're doing so we will have a navigation dot active and then that is going to have left zero and just like i did with the with the toggle i'm also going to add active onto the navigation manually it will we're going to add it with javascript later but for now we're just going to have it you know just hard coded so top 0 right now it's active so it's left 0 and then let's add a width so we want it to take up the entire screen so a width and a height of 100 percent and let's set the background we'll set background color to white now it should cover everything so let's give this a high z index so we'll say z index let's reset that to 10 yeah so it's going to cover oh we set this to 10 didn't we all right let's set it to 15. okay so it's going to cover that i do want the button to show but i also want the logo to show which i think we also set to 10. so the logo let's see logo the index set to 10. let's set that to 20 as well there so the toggle and the the logo are set to a 20 z index and then the the navigation is set to 15. all right so now that those two things are displayed let's add we're going to display flex and i want everything in the middle so let's say justify content let's set that to the center so that moves it over that way to the center and then let's also do a line item center and that will move it vertically to the center okay so everything is right in the middle so the navigation itself is is positioned correctly we just need obviously we need to fix this crap up so let's uh let's go ahead and we'll go under the navigation active and let's say navigation so the ul is going to be positioned or the ul's are going to be positioned relative and then let's do the the list items so navigation uli i want to also position relative and i want to take away any bullet points so let's say list style none get rid of those and let's text a line to the center because we want that to be centered and then for the links let's see we'll just copy that and for the a tags or the links let's do a font size we're going to make these bigger let's do 2.2 rem so whatever you know 16 times 2.2 let's make the color one one one let's get rid of the underline so text decoration none and let's set the font weight to something lighter let's do 300. all right and then when we hover over it we're going to have that red color so let's say navigation ul li a hover and then we'll set the color of that to our variable so dash dash primary oops primary color so if i hover over these they should be red now the social bar obviously we don't want to have this stuff here we want it to be over on the left so let's go right here and we'll say navigation social dash bar and we're going to position that to be absolute okay we don't want it there though let's put it from the top zero and from the left zero and i'm going to add a width of 60 pixels and let's add a height of 100 and i want it to be centered so we'll display this as a flexbox and let's justify content center and also align items center so if we save that now you can see it's over here on the side now the email icon isn't part of that social bar or actually let's see so it is part of the div but it's not part of the ul um so the the email icon i'm actually going to position that to the bottom so let's say navigation and then email icon and we're going to position that absolute and let's make it from the bottom 20 pixels and let's do a transform scale and we're going to scale it down half like that and i also want these to be scaled down as well so let's do the social bar links okay so for this let's go ahead and let's display these as inline block and then let's also scale that down so transform scale it down to 0.5 all right so i think that looks pretty good now if we don't have the active class on both the toggle and the navigation then it's going to be in the default state like this so all we have to do now with our javascript is make it so that when we click this so we'll add an events when we click that it adds the class of active to those two elements so pretty simple so let's jump into our script js here and basically all we have to do is is bring in the toggle right so we'll create a variable called toggle and even if you don't know any javascript at all this is pretty easy to understand so let's say document dot query selector and that just allows us to select something from the dot the dom the document object model which you can think of as like all your html tags everything that is used to create this document and we want to grab the class of toggle so you can put any selector you want in here an id a class a straight up element whatever so we're going to select that and then we're also going to select the navigation those are the two things we want to add and to basically toggle the class with so this is going to be query selector and then we're going to use dot navigation okay so we brought those two things in now we're going to take the toggle that we brought in and we want to add an event listener onto it we want to listen for a click event and then if you know if we click on it we're going to run a function this is an arrow function i'm putting in here it's a shorthand for you know doing this function like that which we could do but arrow functions are just what i prefer and they're they're neater looking so we're just going to go ahead and do that so basically when we click it something's going to happen what we want to happen is to take the toggle and we want to when i say the toggle i mean this this red thing up here i want to add the class well i want to toggle it if if it doesn't have the class of active i want to add it if it does have it i want to remove it so we can do that in javascript we can say dot class list we get access to the class list and a bunch of methods to do certain things like add a class or remove but we want toggle maybe it's maybe we should have called it something different that looks kind of weird just know that this this is a method or a function on the classlist object this is just the toggle that we brought in it's the button this thing here all right so we want to toggle the class of active so just doing that if i save and i click you can see it turns to an x because it's adding and removing that active class in fact we can see that if we look at let's see let's select this so you can see right now this div with the class of toggle does not have the active if i click it it gets added right it gets added because it didn't have it now that it has it if i click it it goes away so it just toggles that class now we just want to do the same exact thing for the navigation so let's just copy this down and let's just change this right here instead of toggle we're toggle we're taking the navigation and toggling the active class so let's click and there we go so it's as simple as that that's all the javascript that we have to add so we can actually close that up and we're going to make this a little bigger because we are going to be creating other html pages and i want to be able to see what we're doing i think this is a little too many words here if we look at the other version i think we have one less line so let's actually delete just some of the dummy text let's see what if we do if we get rid of that yeah so i think that looks a little better now this isn't really responsive because it goes you know over the image in fact we can open up the dev tools and see what it looks like on a mobile screen so this would be iphone 678 you can change this so that would be an iphone x but i'm actually not going to use this because i'm going to just make this smaller like that and then let's go to our style sheet and we're going to go to the bottom here and add our media query so to create a media query we just say at media and in here we can say either max or min width i'm going to say max with 10 let's do 1068 pixels and then anything i put in here is only going to apply if it's under that you know that width so i want to take the home image and i want to display none if we're under that width and you can see the image goes right away if i go wider then the image shows up so on a phone or a tablet even an ipad pro at this at this width it should just show no image now i also want to let's see the logo doesn't look right i want to put that up here and also make it a little smaller so let's say logo and let's move the positioning so it's already positioned absolute i'm just going to set the top to 10 pixels rather than i think it was 30 pixels so that'll move it up and then let's set it from the left let's do 40 pixels that'll move it over and then let's set the font size which is 2.2 rem i think i set it to so let's set that to 1.5 rem and that looks better okay and then let's do let's see so we have our h1 here there's a little too much padding around this this is the what is this the home now this is just the section so let's add a section and i think we had 100 all the way around i want to keep let's just do 100 top and bottom but change it to 40 on the left and right yeah there we go so now it reaches out further on smaller screens and it doesn't look as weird all right now the navigation let's take a look at that these are kind of big so i think we should make those a little smaller as well so let's say navigation we want uli a so we're targeting the links here let's set the font size i think it's 2.5 by default so let's do two rem yeah just shrink those down a little bit all right good so that should do it as far as the home page goes so now let's start on the services page so i'm going to create a new html file called services.h now obviously we're going to have like the same header and everything so i'm going to copy everything from the index let's close that up and in services we'll paste this in and let's just clear out the entire section so we want to keep the header but we'll clear out everything that's in the section and we should now be able to link to services.html and just have kind of an empty slate empty page to work with now in the section here we're going to have a div with the class of title and in the title we'll have an h1 let's say services that we can help you with and then underneath the h1 let's have a paragraph we'll do lorem let's do alarm 50. so we'll save that it's going to look like that for now and i guess yeah let's just do the html there's there's some stuff in the css that's going to make it look weird but we'll get to that after basically we're just going to have of course i can just show you we're going to have the the title which wraps around this that's the class of title and then we want these cards or whatever you want to call them these different services and we're going to use css grid to lay these out so let's uh let's add those services so under this div we're going to have a class of services and then each one of those cards is going to be a class called service and in that service we're going to have a class of icon and in that we'll have an image with the icon this one's going to be images slash 001.png and then outside of the icon div let's put in h2 we'll say design and then let's say lorem 20 might have to change that it doesn't look good but that's basically a service right now we do have an issue here and that is the section if we look at our styling let's go up to where our section is we displayed flex and by default display flex gives you a flex row which is horizontal so any elements that we add in here any direct children of section are going to be in a horizontal row now i that's fine for the home page but not for the inner pages we want it to go down in a column so what i'm going to do here and i could just if i change this right here let's say flex you can easily change it to a column like that okay and that's that's the orientation i want if we go back to the home page it doesn't look right so what we'll do to fix this is on the index on the home page where we have our section let's just add a class of home and there's obviously a bunch of different ways you could um that you could handle this but we're going to add just add a class of home and let's go right under section and let's add let's say section dot home so if it has the class of home then we're going to set the flex direction back to row so if i save that now it goes back to normal now i also want to have some margin on the section for every inner page to push it to push this down right here so if i set margin top to 60 pixels that's what i want here now on the home page i don't want that so i'm just going to set the home section margin say margin top to zero so that doesn't affect the home page but i do want it on all the intersections all right so now that we have that taken care of let's go back to services and let's add the rest of these services will handle the css after but i'll just go ahead and copy this div of service and i think we have six so that's one two three four five six see where's the first one so this is the first one the second one let's change the icon to two and the service is going to be development okay and then uh let's see this one is gonna be three and the service is gonna be seo okay let's go down here this one is going to be 4 and service is going to be marketing this one here will be 5 and the service will be app development which i mean i guess is the same as development but it doesn't really matter it's just dummy content and then this one here six this will be error fixing okay and that should do it for the content itself now this doesn't look very good so we do have to style this so let's go into our style sheet here and we're going to want to go let's go down right above the media query let's see so that's our home page home page style so let's go under that and let's say services page and services so the services class itself which wraps around all of the the individual cards let's add a margin top of 40 pixels and i'm going to display that as a grid so what that means is this right here this div of services it wraps around all the individual services we're going to make this a grid so each service is going to be a grid item now just doing that doesn't doesn't actually change the layout we need to define our columns so to do that i'm going to use a property called grid dash template dash columns and here we can define basically which how wide each column should be and how many columns we want let's say we wanted two fifty percent we could say fifty percent for the first one fifty percent for the second and that's what it gives us so css grid is really really powerful um if we wanted one to be bigger than the other we could do you know 70 percent for the first one 30 for that one okay so now we have 70 30. now i want them to be i want to have three that are all even so i'm going to use fr units or fractions so one fr and i want three of them if i just do that it's going to put them all in one row or one column so i want three so i'm going to do 1fr 1fr 1fr and now it gives me 3 okay 3 columns now a cleaner way to do this is to use repeat and i could say repeat three times one fr that's going to give me the same thing and don't worry about these icons i'm going to make these smaller in a minute but i do want to have some some gap in between see how close these are together so with grid we can actually use it used to be grid gap which still works but you can just do gap now and i'm going to give it a 40 pixel gap so now it'll have space in between both vertically and horizontally and then i also want to just align everything to the center so let's say text aligned to the center okay let's take care of those icons real quick so we'll say services and then we'll target service because each icon is in a class called service and then a class icon and then the image and let's make that let's say max with 100 pixels okay so that's going to shrink those down and again you could use font awesome icons if you'd like we're just using images in this case now i do want to add a little bit of padding to each service so let's say services dot service which is the individual card and if you want to try borders and background colors and stuff like that you can i'm going to set 30 pixels padding on that like you could do a background of light gray you know if you like that kind of look that's fine but i'm not going to do that what i do want to do is have a hover effect so let's say services dot service and then hover and on hover i'm going to add a box shadow so box shadow let's do 0 10 pixels 30 pixels and then the color let's do rgba which is red green blue alpha we're going to do black with 0.1 for the transparency so now when i hover over we get that little shadow effect all right now for the h2s i believe that we have these h2s yeah so each one of these services has an h2 i want to style that so let's go right right here and say services service h2 let's make the font size 24 pixels and let's make the font weight 500 and we're going to add a little margin top so 20 pixels and let's do color so color i'm going to do hexadecimal value 1 b 206 e like that all right so i don't think yeah that looks pretty good and then let's see i think that's it yeah so that doesn't look too bad now as far as responsiveness whoops okay that's really big so that doesn't look very good the the the columns here i don't want to keep three i don't want to keep three columns i actually want to have two when i hit that 1068 and then one when i hit you know really small screens so to do that let's go down here now remember what made these columns is this the grid template columns so i'm just i'll just copy this whole services and then in our media query here so you want to make sure you're within this media query and just paste that in and get rid of everything except the grid template columns because all this stuff is already applied and i'm just going to change three to two so if i save that now whoops didn't mean to do that let's go back down here so now if i go back you'll see we're less than 1068 so it turns to two when i'm more than 1068 it's three now if i get down to here like it's really small i want it to be just one so what i can do is add another media query let's say media we'll say max with this time let's do 768 pixels and i'm just simply going to take this put that here and i don't need to do any repeat i just need one column so 1fr and now that looks nice and neat all right so we have the homepage and the services page done and they're both responsive so now let's go to create a new file here new html file and this one's going to be called work.html and once again we can just copy let's close up let's close index and let's copy services so everything in services will copy we'll put that into work and let's just clear out in the section here i want to clear out everything except the title area so let's see here so this div right here of type whoops basically i just want to have the heading yeah we just want to have that so obviously we want to change the text here though so the h1 let's say some of our finest work now if we go to work we should see this now i just want to have kind of a bunch of portfolio items and we're going to use flex for this just to kind of change things up again i'm trying to just use different things to to show you examples if you want to use all css grid or all flex or something like i mean that's absolutely fine it's all preference so if you want to change things up you can do that so under the div class of title right here still within the section let's create a class of portfolio and we're basically just going to have a bunch of items so we'll give these the class of item and in the item we'll have an image so this is going to be images slash portfolio item one we actually have 16 of these things so under the image let's have a class of action because we're going to have a little hover effect where if we hover over it we have this link here it's not going to go anywhere but we'll have this link that says launch okay so if i save that it's gonna look like crap to begin with but we'll style it in a little bit now like i said we're gonna have 16 of these things so let's grab this and that's one two three four five six seven eight nine ten eleven twelve thirty forty fifteen sixteen so now we have sixteen but we do wanna change up the images so let's see we have one and they're just ordered like this so one two three four five six seven eight nine 10 11 12 13 14 15 and 16. and of course you could use all the same image but i wanted to make it look decent so that's it for the html pretty simple now we need to style it so let's go under let's make sure we go outside of our media query and this is going to be the work page and what i'm going to do here is set the portfolio so portfolio wraps around all the items so i want to display the portfolio as a flexbox and as soon as i do that all of the items are going to be in a row so they're all going horizontal now you see i have the scroll bar they go all the way over now i want what i want them to do is wrap if they start to go out of the the container so we can set flex wrap and just set that to wrap and there we go so now if i make this bigger you'll see if it can fit the next one it will then it'll shrink down down again so that's kind of what we want to happen although i want to make these you know smaller so over here let's say portfolio and take each item and make the width let's do 300 pixels and let's do a height of 300 pixels as well now the image is going to kind of break out of that we'll take care of that in a second i just want to also set the position to relative because we are going to do the the the action where we hover over it and it gives us that launch button so that's going to be absolute positioned within this relative item and then i also just want to add a margin of 5 pixels around each one now for the image let's say portfolio item image we want that to just take up the whole container of 300 pixels so let's set the width to the image to a hundred percent and also the height to a hundred percent okay so now it fills the container we have five pixels in between each one and it's if it'll fit it'll come in like that and it doesn't matter how big or small now let's do the hover effect actually one thing i want to do is just add margin top right here to the portfolio just to push it down a little bit now for the the hover if we look at if we look at the item it has the image but then it also has this div with the class of action that has launch so that let's go down here let's add that so portfolio item and then we want to target action oops action and we want to position this to be absolute so it's positioned absolute within the item that's position relative and we want to say from the top 0 left zero we want it to stretch all the way across the item so 100 percent height 100 percent and let's add a background of rgba which is red green blue alpha we want black and then the transparency or the alpha value will be 0.8 so right now you can see it's covering all of them and this will only show on hover but for now we're going to see it you know at all times so that takes care of kind of the overlay now for the text inside let's go ahead and set this to display flex and let's set justify content center and also align items to center so that'll move the launch to the middle and let's see we're going to have this opacity be zero which will make it go away and then on hover we want it to show but just for now i'm going to keep it opacity one just so we can see what what we're doing we can make this a little smaller now for the link here we go obviously we want to style that so let's say portfolio item and it's going to be it's not on the link hover it's going to be on the the item hover but we're styling the link on that item hover so let's display let's say inline block let's do color white let's take away the underline so text decoration none so if i save that we should see uh wait a minute what did i do i i did this wrong so item action we didn't do the hover yet all right so that looks all right now i do want to give it kind of a border so let's do one pixel border solid white and we want to add some padding so let's do five top and bottom 15 left and right okay so that looks pretty good and like i said we only want this to show on hover so let's take this and let's say on hover we want the action to then be opacity one and we want it to be zero to begin with so now if i hover over it we get that launch now see how it just kind of flickers in it doesn't have any kind of transition so i wanted to have a fade in transition so we can just add a transition and then however long we want it to take we'll say 0.3 seconds let's do 0.5 seconds and then we have that hover effect now if we may if on small screens it doesn't this isn't aligned to the center we could put that in a media query or we could just do it in general let's see if we just add to portfolio which is our flexbox if we add justify content to the center that'll push everything into the center let's see how it looks i guess we could deal with that if you want it centered on large screens like this you can do this or you can move that justify content center to the media query so that it's only on smaller screens it's up to you and then one thing i wanted to do that i forgot is on small screens on services i wanted to have this border just permanently right now we only have it on hover so let's grab this and copy it let's go down here and i'm just going to have it on service in general not just on hover so if we save now they have that border and you could have it on bigger screens as well but i'm just going to have it like that so the last page we have to do is the contact page let's go ahead and create contact.html and we'll just copy work i guess everything we have in work we'll grab that paste that in here and let's get rid of everything except the title inside the section get rid of that i think we have let me just check the contact page here yeah so we have this little title area so let's change this to contact us and now we should be able to go to contact and we'll see that we'll actually make this a little smaller a little shorter alright so now we want to create our contact form so we have a form we also have a little info area so let's go let's see so we have our title let's go under this div with the class of title and let's create a class of contact and in here we're going to have first of all our contact dash form and this is going to be a form let's get rid of the action and let's create a class of row so basically we're going to have rows of inputs the first one or the first two rows are going to have in two inputs that are you know 50 50 in length so let's give this div a class of input 50 and let's put an input in here type of text and we'll give it a placeholder and we'll say first name so we're just going to use it's not the best practice but we're going to use placeholders as our like titles or labels i should say and this is going to look really bad until we style it so just bear with me let's make this a little bigger so we can see everything so we have our first name then let's take this input 50 copy it down and this will be our last name and then let's do another row with 50 so we can grab this and copy that down so if this one here is going to be email and then this will be uh subject okay so we'll save that again it's going to look really crappy for now but then we're going to have a message area so this row right here we want to go directly under that and put another row and then this will be a div with the class of input 100 because it's going to take up 100 the other ones are 50 and this will be a text area and we don't really need any of this so let's do yeah we'll just get rid of all this because we're going to style it with css so let's give this a class um not a class i'm sorry a placeholder so placeholder this is going to be message okay and then we're going to have another row and inside here we'll do another input 100 and this is going to be our submit button so let's say input and we'll do the type of submit and the value will say send okay so that's our form now we want to go under the contact form div which ends right here still within contact and here we want to create contact font contact dash info and inside here we're going to have a couple in info boxes so let's create a class of info dashbox and in this info box we're going to have an image source is going to be images slash address and then we're also going to give this a class let's give it a class of contact dash icon and then we're going to have a div of the class of details and in details we'll have an h4 that says address and underneath that we'll have a paragraph with our address so let's say 28 neon tower new york city usa so that's our address then we're going to have another info box so i'm going to just copy this div right here we're gonna have three total so two three and the second one here let's change the image from address to email and then details it's going to be email and then here we're going to have let's get rid of that let's put an a tag here with a mail to say let's say anyone at example.com and in here we'll say anyone example.com we'll just copy that down so we have two email addresses this last one here is going to be our phone number our call so let's change the icon to call change this to call and let's add here actually we can put a link here with a number let's do tell and we'll do plus one nine seven eight five five five five five five five and inside here let's say plus one 978 and i'll just copy that down i'll change this one to that all right so that should do it again this is not going to look good so we're going to just style this real quick let's go over to style css make sure you're above the media query and let's start let's start with the just contact class put a comment here contact this is a long video so contact we're going to go ahead and position this relative and let's set the width to 100 percent let's add a margin top of 50 pixels push it down a bit we're gonna display flex and justify the content and we're going to use space between here so you can see that this is displayed as a flexbox so i'll put it in a row so the two items are the form and the in the info and it justified the content by putting any remaining space in between the two items okay and then we want to align items to flex start which will put it you know this way it's going to align it to the top so that's a row good so now the contact form so contact dash form let's position that relative and then let's add a background of f i'm going to do light gray so f9 three times i can make this a little smaller and you can see the gray background there now i want this to extend all the way so if i go ahead and say width 100 percent we could do that but i'm actually going to use calc here so with css we can use calc and we can have calculations like let's say 100 but take away 400 pixels and then what we'll do is make this side not 400 because i do want some space here we'll make it 350. so let's see we also want to add some padding let's do padding 60 pixels 40 pixels 20 pixels okay so add some space inside of the the box here and then the form itself i want to be 100 across so let's say contact form form and let's set that width to one hundred percent okay and we all we're gonna set the inputs um i'm to fix those two in a second but let's add the row so we have contact form and then we have our class of row that we're also going to want to 100 and we're actually going to display flex and here you can see we have our inputs now side by side remember there's a row around these two these two this one and then the button now for the input 50 we want that to take up 50 so let's go let's say contact form and then we have a class of input 50. and for that let's add a width of 50 percent and let's do a margin of 0 top and bottom 10 left and right okay so that splits that up we'll do the input styling in a second but let's just do the hundred now so we'll just copy that and let's do input 100 and the only difference here is it's going to be 100 percent yeah so now let's do the input and the text area so i'm going to go yeah let's just go right here let's say contact form and we want to style let's say the row input and also the contact form row text area so we'll position relative and let's take away the border so we'll say border zero actually we'll make this gonna have this responsive so don't worry about that just yet but let's say border zero and then we're gonna do border not border zero border one pixel solid and let's do rgba black so zero zero zero and then zero point two all right so that's our border let's do color one one one and background so background i'm gonna set to transparent okay so now it's not a white background for the inputs let's set the width to be a hundred percent oops so now they're taking up 100 percent of their containers let's do 10 pixels padding and i should probably stretch this back out so you can see because we're gonna it's gonna change when we hit you know 1068 but that's how it looks so far so we have our padding let's set outline i don't want to have any kind of outline so let's set that to none like when we're focused in it and then font size we're going to set to 16 pixels let's set the font weight to 300 and let's set a margin of 10 pixels and 0 spread them apart and resize i'm going to set that to none i don't want to be able to resize the text area all right so that doesn't look too bad now the text area obviously is going to be um i mean it is you know has more height but i'm going to add even more so let's say contact form we'll do row text area and let's set that height to 1 50 pixels and then i just want to add some style for the button here i'm going to make it blue and add a couple other things so let's say contact form and we want to specify let's say row and then we have input and we're going to target the type so the input type of submit because that's the type that that has and then let's add a background we'll say background color and background color for this is going to be hexadecimal value 1b206e and we'll make the color white text color white let's also say margin zero and i want to set it make it uppercase so let's use text transform and set that to uppercase and i want to just space out the letters a little bit so we're going to use letter spacing and we'll do two pixels for that okay and then let's set the font weight on that to six hundred and let's set border to zero and let's also give a we'll do cursor pointer for that as well actually let's do a lighter font wait let's try 300. all right good so now we need to do this side the contact info and we should be all set so let's add contact info and we're going to set the width of that to 350 pixels let's give it the same background so f9 like that and let's also add some padding we'll do 60 pixels top 40 pixels left and right and 20 bottom and then we have the info boxes so each one is three info boxes in here so let's say contact info and then info dash box so for the info box we're going to display flex okay now as soon as i do that it's they're going to align align horizontal so i want to align the items flex start and then let's add margin bottom 40 pixels okay the icons are really big so i just want to take care of those real quick so let's say contact dash info info dash box and then i believe called it contact icon is the div that surrounds the image so for that let's do a width of 20 pixels and let's do margin dash right to give it some space we'll do 40 pixels like that okay so let's see we have contact info our info box so we have the details contact info details let's make this a little bigger and might as well stay consistent here and add info dash box details and i want to style the h4 so let's grab that and let's add a color so we're going to use the color hexadecimal value 1b206e so it has that blue color we could probably add that as a variable i believe we have this is it the same color here yeah it is so we could put this into a variable or a custom style a custom property sorry let's call this secondary dash color and then we can replace we even have it for our services h2 so we can replace this var dash dash secondary color and then let's copy that and let's put it right here for our submit and put it right here for the h4 alright so we have the red as our primary the blue for the secondary and then these links here i just want these to be black so we could just take let's take that and say details let's do paragraph and details links color 111. all right so i don't think that looks too bad now on smaller screens you know that doesn't look very good so let's figure that out or go down to our 1068 media query down to the bottom here and let's change the contact so contact form is our contact rather is a flexbox right it has these two items in it and they're in a row so i want to change that flex direction to a column so that they stack on top of each other now that obviously doesn't look good so let's let's take the contact form and i'm going to want to take the width and set that to 100 percent so that goes all the way across and then i'm going to change up the padding to 30 pixels 30 pixels 20 pixels okay so that looks good on you know like tablets and stuff like that but if we go if we keep going down these these should be one row right instead of uh or 100 instead of 50 50. so let's take let's see let's do contact form row and we're going to set that flex direction to column okay so now they're all stacked but we do want them to go all the way across even if it's uh input 50 because this one is input 100 that goes all the way across but the 50s are only 50 percent so let's say contact form class input we'll say input 50 and input 100 we're going to set the width to 100 percent and set the margin to zero okay so there we go and i mean you could put this down here if you only want them to stack on 768 or less but i think that's fine it's up to you so the info this right here let's say contact dash info and i'm going to set the width of that to 100 right now i think it's 350. so we'll set that to a hundred percent um let's move it down a little bit because it's like it's stuck to the other one now so we'll say margin top set that to 20 pixels to kind of separate them out a bit and then padding let's do same thing 30 30. 20. all right cool so we could definitely just test this out with um with the device toolbar here so if we click that this is an iphone 10. and that's the contact page home page homepage is very very simple on mobile screens but it does look clean we have our services we have our work our portfolio and contact good and ipad we can check that out as well services work home all right so i hope you enjoyed this project i know it was pretty long again feel free to use this on your portfolio or add to it do what you want with it that's absolutely fine links in the description for the code and that's it thanks for watching guys

Channel: Traversy Media

Views: 113,526

Rating: 4.9644127 out of 5

Keywords: html, css, html css, build a website, website, learn html, flexbox, responsive website

Id: lvYnfMOUOJY

Length: 86min 51sec (5211 seconds)

Published: Tue Mar 16 2021