Create a Website With Video Background | HTML & CSS

[Music] what's going on guys so i hope everybody had a happy new year and hopefully we have a better 2021 than we did 2020. so in this video i want to create a really cool looking landing page for i guess like a travel agency travel website and we're basically just doing this part here which has a a really nice video background with an overlay some nice text some social media icons down here with some effects on the buttons and icons and then we have a menu button here if i click it opens a side menu now i'm not going to do any of the inner pages feel free to add those yourself or if you want to add more content down below like some cards and so on i think it's a good boilerplate for for a really cool looking website and of course you can change up the video it is responsive if i make this smaller see it still looks good many still functions so we're going to go ahead and build this so in this video that i'm using is from pixels this is the actual video so you can see we do have a nice overlay that really makes it pop makes it really bright but i'll have a codepen link in the description with all the code with the video link with the images and so on so i'm going to jump into vs code and you can see i have a few things i have the video the mp4 i have the images so we have the regular menu icon here our menu image the close image and then we have the social media icon so i'm not using font awesome or anything you can if you want but we're just going to be using images now though the only two things we need to create here are index.html so our html page and then we need our css so let's do style.css and in our index html i'm going to use emmet within vs code by doing exclamation enter and then we'll go ahead and tab to the title and let's call this travel we'll just call this travel landing page and then right above that i'm going to put in a link tag and i want to link my style css now in the body here i'm just going to do the html real quick because there's not really that much most of this is going to be css and when we get to the styling i'll go ahead and make the make the browser i'll split the browser in the editor so we can see both at the same time but let's just do this real quick so basically everything is going to be in a section with a class of showcase except for the menu the menu that slides open so in the showcase we want to have a header that's where we're going to have the logo so an h2 give it a class of logo we'll say travel and then a class i did with the class of toggle which will change depending on the state of the menu it'll either be a hamburger menu or a close button and then underneath the header actually let's save this and open it up so you can just open the the index html on your file system or you if you're using vs code you can use live server which is what i'm doing so say open with live server and that's going to open it on my local host all right so let's jump back in here and underneath the header we're going to put the video so i'm going to use the html5 video tag the source is going to be the location of the file which is right in our root called explorer.mp4 and then i'm going to add some attributes here so the first one is going to be muted to make sure that it's muted and you can use any video you want it doesn't have to be this video i'm going to say loop so that it keeps playing over and over and then auto play so it plays automatically when we visit the website all right so it's going to look like this right now now under the video we're going to have a div with the class of overlay and that's we're not going to put anything in here but we're going to style it to have that bright overlay over the video and then underneath that we'll have our text so i'll have a class of text and first is going to be an h2 we'll say never stop and then in the h3 underneath we'll say exploring the world and then i i'm going to have a paragraph with just 20 20 words of dummy text so we can do lorem 20 enter with emmet and that will give us this text here and underneath the paragraph we'll just have a link it's not actually going to go anywhere but we'll say explore and we're going to style that as a to look like a button now underneath the div with the class of text we'll have a ul with the class of social and these are going to be our social media icons which will be in link not links li tags and inside an image so an img tag with a source of this one will be facebook dot png copy this down and this one twitter and this one instagram okay so that's that now underneath the section is where the menu is gonna go the menu that we're going to have slide open so this will have a class of menu and inside that class we'll have a ul with some list items and a link and this will be home and then i'm just going to copy that down a couple times so we have a home let's say news say destination you can say whatever you want here and of course you can create these pages if you want blog and contact all right so that's it for the html if i save that we check it out everything is just you know position static in in the layout so that we from top to bottom we have the logo the video the text the social media the menu so now we want to go ahead and style this i'm going to make this a little smaller so we can fit this on the in the you know on the screen and jump into our style sheet now i do want to use the poppins font so i'm going to go and open up fonts.google.com let me just separate this and we're going to search for poppins all right so we'll click here and i'm going to choose a bunch of these styles a bunch of these font weights so i want extra light 200 select light 300 regular 400 medium 500 semi bold 600 bold 700 and finally extra bold 800. so we're going to select all those styles and then here you can either put these links in your html or what i'm going to do is the import so i'll go ahead and copy this here everything in the style tags and we can then just put that right in our style sheet okay so we're importing the poppins font with these weights and now we can continue on with our styling so i'm going to use the universal selector which is an asterisk basically for a reset saying i want to select everything and i want to zero out the margin and padding so take take that off of everything if i save you can see now there's no margin or padding on anything i also want to set the box sizing property to border box so that if we add any borders or padding it doesn't affect the overall size of the element and then finally let's put our font family in here and that's going to be poppins and we just want to add sans serif all right so you can see this text looks much much better so let's do the showcase which which is basically wraps around everything except for the menu so showcase and what we'll do is position this absolute and say we want this to be from zero from the right so it's gonna basically be you know zero from the right over here and span a width of 100 percent and then we also want the let's say minimum height to be a hundred vh which is a viewport height if i save that you'll see that the showcase everything is positioned absolute um except for the menu which is behind everything so just kind of ignore the menu for now in fact we can go ahead and just for now let's um let's display none for the menu and then i'm also going to just comment out the video because it's kind of messing with me the movement so i'm going to comment that out all right so it should look like this now for the rest of the showcase here let's um let's add padding 100 pixels so everything we're looking at right now is in the showcase so padding 100 pixels i'm going to display flex so that i can align some of these elements now when i display flex automatically it puts it into a row we have in the showcase three main three main elements we have the header we have the text and we have social so those are going to be in a row but we're going to be positioning the header and the social icons absolute so that they're not going to stay in this you know in this alignment what i do want to do is add justify content to space between so everything between these these three main elements you'll see the space is distributed in between those and then i want everything in the middle going you know vertically so with flexbox we can do align items and we'll align it to the center okay so everything's in the middle uh let's see what else we want to do here let's set the background of the showcase to a dark color and we'll set the color to white and then i'm also going to add a z index and set that to 2 so that it's always in front of the menu all right so if i get rid of this display none now for the menu we still can't see it because we set this z index if i set this to a lower number like negative two then the menu is going to be on top all right so we want to keep that set to two and we did we no longer need display none all right now let's see what else do we want to do here so we'll leave the showcase for now later on we're going to make it so when the menu is active the showcase slides over but we'll get to that a little later let's deal with the header right now which is in this flex row at the moment so right underneath showcase let's say showcase header but before we do that i actually want to do the toggles so let's say showcase actually we don't even need that we'll just do class toggle all right so for the toggle we're going to want to show the the menu button but first i just want to make sure this is positioned relative within the header and then let's set a width and a height to we'll do 60 pixels width and height and then we want to add the background image so we'll just say background you want to set it to a url set it to the menu dot png if i save that we can see it right here now it's it's repeating so i'm going to add the background repeat no repeat okay that gets rid of that i'm also going to set the background size i'm going to set that to a lower pixel we'll do 30 pixels and let's center it within the toggle so we'll say background dash position and just position and set that to center okay and then i also want to just set the cursor excuse me to be a pointer all right so now that we can see the we have the logo and we also have the toggle let's go back up to the header and style that so i'm going to position this absolute which is going to kind of take it out of that that flexbox alignment and we want to position it from the top 0 and from the left zero so we're basically just putting it in the top left corner we want to make sure it spans across a hundred percent and then we're going to uh add some padding oops so we'll do 40 pixels top and bottom and then 100 pixels on the left and right okay it's going to bring it in a little bit and then let's give it a z index we want to make sure this is on top i'm going to give it a really high z index say 1 000 and then for the display so obviously we want you know the logo on this side the menu button on this side so we're going to use flex as soon as i do display flex it'll put them side by side now to align them vertically this way so that they match up we're going to use justify i'm sorry align items if it was a row i mean if it was a column we would use justify content so align items is going to be vertical which we want to be center and then justify content is going to be horizontal now we want to take the remaining space here and put it in between the two so that this is over on the right so we want to set this to space between and that will push that over okay regardless of you know how wide or small this is so that takes care of the header um actually for the logo let's say for the logo i just want to text transform which is going to i'm going to set it to uppercase and let's set the cursor to a pointer for that as well all right now next thing uh should we do the active yeah let's do the the the button here the toggle so if the toggle has a class of active in fact i'm going to i'm going to add that manually right now later on we're going to add it with javascript so that when we click we have an event that adds a class of active but for now i'm just going to put it in there put that on the toggle and then we'll go right below here and say toggle if it has a class of active don't put a space here if you put a sp if you put a space like this it means you're looking for an element inside of toggle with a class of active if we don't put a space we're looking for the class of active on the toggle okay so big difference now in here i'm going to just copy these background properties and we're going to change this to our close button and then i'm also going to make it a little smaller make it 25 pixels and save and now notice that it's showing the close button okay now i'm going to take that active class off and save and now it's back to its original all right so now let's do the video the menu is actually the last thing we're going to do so yeah we can actually get rid of that for now so let's do the video i have a comment it out right now uncomment it and we want the video to be you know completely full screen so let's target uh showcase video and we want to position that to be absolute and then i'm going to position it at the top left corner so top zero left zero we want it to span a width of a hundred percent as well as a height of a hundred percent now you can see we have the entire video showing which we want but we don't want this this space above and below so we're going to use object fit and we want to cover okay so that's going to try to just display the whole video but not have that space and that's what we want all right now the last thing i want to do is just add a little bit of opacity or take away some opacity i should say one is default that means it's not translucent it's not see-through so let's set it to 0.8 which is just a little translucent now the text is the header is on top of the video but the text is actually behind it and the reason for that is the header we we put that 1000 z index on where is it right here so that puts it on top for the text before we do the overlay i'm just going to add for the text let's uh let's just position this relative and let's set a z index of something higher than 2 because i believe we set the or we set the showcase to 2 so we'll set that to 10 and now the text is on top now for the overlay so the overlay we just want to kind of place over everything just like we did with the video so i'm going to copy all of this because we want it to position absolute we wanted to start at the top left span everything you know going vertical horizontal and then i want to add a background color so let's say background and we're going to use a hexadecimal value of 0 3 a 9 f 4 which is a light blue now if i save that you'll see we know we no longer see the video because this is covering it now there's a few ways to handle this the way that i've done this for a long time is instead of using a hexadecimal you guys don't have to do this i'm just showing you i could use an rgba which is red green blue alpha so we could do zero for red green blue which gives us black or we could use any color and the alpha is the transparency so i could do like 0.5 and now we can see through it it's black but we can see through it you can make it you know darker or whatever but what we're going to do is keep the hexadecimal value and then we're going to use the mix blend mode property and set that to overlay and there we go so now it blends in it overlays the video and it looks really nice as that you know makes it pop i mean i think it looks better than this does and of course you could change um change this color if you wanted like black for instance you could do that that looks kind of weird but i think that that looks good you can experiment with it obviously if it's a different video different colors will look you know better or worse but yeah so that gives us the overlay now all we really need to do is position everything and size the text so let's go down to let's go under text and let's do text h2 and i'm going to set that to a font size of 5 m units so so an m unit is just a multiplier we're basically saying whatever the parent container's font size is multiply it by five and we have this nice big h2 here so we also want the font weight i'm going to set that to 800 and i'll make it a little more bold and then let's set the line height to we'll do one m oops and then let's set the text transform property i'm going to set that to uppercase because i want it to be all uppercase alright and then for the h3 i'm just going to copy this so the h3 is right underneath let's change the font size we'll make it a little smaller we'll do 4m and make the weight a little less bold so 700 line heights the same that's the same and there we go okay so the next thing is the paragraph so let's say text p and we'll set the font size of that to 1.1 m make that a little bigger and let's set the margin i want to move it down a little bit so we'll do 20 pixels on the top and bottom and let's also for the font weight we'll do let's do 400 for that and let's also set a max width because if it's really wide like this i don't want it to go all the way over so i'm going to set a max width on the paragraph to 700 pixels that way it stays on the side all right so that's it for the paragraph now let's do the explore link which i want to make look like a button so we have our text class and then our link inside of it so first of all let's display it as an inline block because a link is inline by default and then let's add we'll say font size for that will be 1m and let's add a background of white okay and then let's add some padding so for the padding i'll do let's do 10 pixels top and bottom 30 left and right and then let's take away the underline so text decoration is going to be none so if i save that you can see the underline's gone the color is going to be 1 1 1 and let's set let's do a margin top to move it down a little bit we'll do 10 pixels for that i'm going to set text transform to uppercase and let's set let's do letter spacing and that's going to be set to 2 pixels which is going to bring them apart a little bit and we're going to have a little effect where we hover over it the letters expand even more so we'll say text a hover and when that happens we'll set letter spacing to six pixels okay now if i just hover over you'll see it just flicks to the six pixels i want to transition so right here in the text a let's add a transition and we'll have this happen over 0.2 seconds so that way it has a smoother you know transition into the the higher letter spacing so i think that looks pretty good if we make this bigger yeah that looks pretty good so now let's do the social media icons which right now are over here so we want to position those absolute so position absolute okay and then as far as um you know where we want to put them we'll say from the bottom we want to go 20 pixels up and place them there all right and then let's give it a z index of 10 make sure they're always on top let's display flex because that's going to align them you know horizontal and we'll justify content to the center and align items to the center and one problem i just realized guys is that for the social links we didn't actually i didn't put a tags around it so let's just do this real quick so we just want to wrap the images in a tags so just copy that that there and there and take that all right so we just want to make sure that those are wrapped in a tags now for the bullet points let's get rid of those so social and list items we just want to set list style to none which will get rid of the bullet points and then we want to add some css on the links so let's say social lia and for this i'm going to display these as an inline block and i want to invert them from black to white so we can actually use filter and set that to invert 1 and now you can see that they're displayed as white i also want to move them apart from each other so let's add a margin right to each one and 20 pixels and i'm going to scale them down so we'll use transform with scale so one is the default i'm going to set it to 0.5 which will set them down a little bit and then i'm also going to have an effect where we hover over them we push them up a little bit and we want to add a transition on that so they don't just flicker up they actually you know do it in a smooth way so we'll add a transition of let's say 0.5 seconds and then we'll add the hover effect so social lia hover and we want a transform we want to keep that scaling but we also want to add translate y which just translates or moves it on the y-axis now a positive will move it down a negative will move it up i want to go up 15 pixels so now if i hover over these icons you'll see they'll smoothly go up 15 pixels and you can mess with that if you want all right so i think i mean aside from the the menu and a little bit of javascript i just want to do a little bit of responsiveness here because if we make this really small you can see the text is way too big so we're just going to add a media query here let's say at media and in here we'll set a max width of let's do 991 pixels so basically anything under 991 or 991 and under these styles will apply so i'm going to take the showcase as well as the showcase header and set the padding to 40 pixels all around i believe we did 40 100 originally um and then the text let's say text h2 we're going to set the font size from i think we did 5m so we're going to set this to 3m on smaller screens and then let's do the h3 so text h3 we're gonna set the font size i think we did four so we're gonna change that to two on smaller screens all right and that's it so that looks pretty good now we just need to do the menu so basically we're going to add a little bit of javascript here i'm going to make the paper a little wider so we can see what's going on but basically we want to just click on this button here and we want to add the class of active to in two places we want to add on the showcase itself like this and we also want to add it on the toggle like this now if i save that the toggle already has the x because we already added that style right we already added not text on the toggle right here so if it's active then this applies now for the showcase there's a showcase right here so for the showcase let's say showcase class active if that's active we actually want to move it over to give the to to show the menu so we have it at uh position if we look up here right is set to zero if it's active we're going to set it 300 pixels from the right which is going to be the width of the menu okay so that's what it's going to look like in its active state now before we add the javascript let's let's just style the menu because right now we can't even see it so we're going to go down to the bottom here right above the media query and let's add in menu alright so for the menu we want to position this absolute and let's set the we'll say from the top i want it to be from the top zero and then right zero okay so now we can see it's up in the top right corner and the width of the entire thing is going to be 300 pixels which is the amount we moved the showcase over and then we want to set the height to be a hundred percent and i want to just i want it in the middle both ways vertically and horizontally so we'll go ahead and use flexbox display flex and then we can align items to the center that's going to make it center vertically and then justify content center we'll do it horizontally all right and then for the let's see the ul menu ul we're just going to position that relative and then let's do the uli actually we can get rid of the bullet points with the ul so we'll just say list style none get rid of those and then we want to style the links so menu menu uli a just to target it better and then i'm going to take away the underline so text decoration none and let's make it bigger so we'll do a font size of 24 pixels and the color is going to be 1 1 1 which is going to be dark and when it's hovered i want i want it to be that blue color the same as the overlay so let's say menu uli a hover then color is going to be actually just popped up we want it to be this blue right here like that now we could actually put the since we're using this color in a couple places we can use a custom property which is basically like a variable i do have a whole video on custom properties if you want to check it out but basically you want a scope we're going to use the root scope so colon root so we can use these variables anywhere or this variable and then the way we define these variables or custom properties is with two hyphens and then whatever we want to call it i'm going to call it overlay dash color and i'm going to set it to that blue color and then wherever i want to use that for instance in the overlay we can go ahead and just say var so we need to use the var keyword and then inside here we can use overlay color all right and then we can do the same thing down here so we use var dash dash overlay color good so that should still give us the blue we still have the overlay all right now the last thing we need to do is make it so that this functions this this toggle button so i'm going to remove the active classes that we put on here manually and we want to make it happen with javascript when we actually click this all right yeah that's good it could probably actually make the media query a little let's do 891 or so you know what i'll do my 798 which is what i usually do yeah that's good all right so uh yeah to make this function even if you're not familiar with javascript this is not a lot at all this is very easy so above the the ending body tag we're going to add in a script tag so we can put javascript in here and we just want to add those two classes of active on those two elements just dynamically so first thing we want to bring in the toggle and the showcase because that's where we want to put those classes those the active class so let's create a variable called menu toggle and we'll set this to document which has a method called query selector so that we can select things from the page from the document object model and we want to select the class of toggle which is this right here okay i'm going to copy this down and we also want to get the showcase so i'm going to give this a variable of showcase change this to showcase so now we're bringing those in and we can do stuff with them so i want to take the menu toggle and i want to add an event listener onto it and listen for a click and when that happens we'll run a function run a function now to shorten this up we can use an arrow function if we just get rid of that and put an arrow here which is what i would prefer to do and here we want to take our menu toggle and we just want to add we want to toggle the class of active meaning if it's applied we're going to remove it if it's not there we're going to add it so let's say menu toggle dot and we're going to use class list now classlist has a bunch of methods on it you can add a class remove what we want to do is toggle and we want to toggle the specific class of active we want to do the same thing on the showcase because remember they have different behaviors the showcase is going to move over 300 pixels with active the menu this is going to change to the close button on active okay those are the two state changes we have so if i click this now you'll see it opens if i click the x it closes now i want it to have a smooth transition and not just flick open and close so to do that all we have to do is go up to the toggle not the toggle the showcase all right so right here we have showcase i'm just going to add a transition and let's do 0.5 seconds that might be too long let's see no that's good so now instead of just flicking open it has a transition you can make this whatever you want if you want it to take 1.5 seconds it's going to open slower alright i think that that's a good speed all right and even if it's a small screen like that still looks good cool so i mean i think that this looks pretty good if you want to add on to it if you want to add these inner pages you know of course you could use different video you could add content down below i mean there's a lot you could do with this using this as kind of a boilerplate all right but hopefully you guys enjoyed this video and that's it i will see you next time

Channel: Traversy Media

Views: 245,443

Rating: 4.9761195 out of 5

Keywords: html, css, website, build a website, learn html, landing page, video background

Id: 8MgpE2DTTKA

Length: 35min 14sec (2114 seconds)

Published: Mon Jan 04 2021