in this video we will start designing this home page with this full screen video background and we also have some hover effects over here so for the button we have this hover effect where the background color changes and we also have hover effects for these menu items over here we can see we have these underlines over here and this is also responsive so if i decrease the width of the screen we can see that we have this mini button over here and if i click on that.
We have the menu displayed over here and if i click on this close button the menu goes back so this is what we're going to start designing in this video now in this video we will write the html of this design and from the next video we will write the css and we will make it look like this so let's get started right i have created this folder called full screen video bg over here and i have this folder called videos and in that we have this mp4 file and we're going to use this as the background of our website now let's start by creating the necessary files so let's create a new.
File and i'll just name it index.html and we also need to have a css file let's name it style.css and we'll also create a javascript file let's call it main.js all right let's start with the index.html file and in vs code you have the shortcut where you can just press exclamation and press tab and you will have this basic html5 code all right let's link our css file over here so i'll just type link and here in the edit i'll just type style.css and in the body i'll just add the link.
Of the javascript file so i'll just create a script tag over here and in the src i'll just type main.js right now the next thing we will do is we will get the link of these fonts so we need to have two fonts over here so let's go to phones.google.com right here i'm in phones.google.com so let's search for the phones that we want the first font is roboto so we have the phone right here i'll just click on the phone and we need to select a style from here so let's select regular 400..
And i think we need to have just one style right now let's search for the next font so the phone that we need is called sacramento and here we have the font so let's select the font and let's select the style right now let's click on this button called view your selected families and here we have the two fonts selected now let's copy this link and let's paste it inside the html.
And let's paste it over here and here for the title i'll just type welcome right now let's start with the markup of our design so the first thing we will do is we'll create a container division so we'll give a class of main container now the first thing we will add over here is the video so let's create a video tag and in that will create a source tag now in the source tag we will add an attribute called src and here we'll add the link of the video so just have.
Videos forward slash bg.mp and we also need to add the type of the video over here so let's type type equals and we'll just type video forward slash mp4 right now let's open this in our browser so i have this extension called live server installed in vs code now once you install that you can just right click over here in the html and click on open with live server right now we can see our design is displayed over here in the browser and.
We have the video thumbnail displayed over here but the video is not being played so for that we have to add some attributes to the video tag so let's go back and here for the video tag let's add an attribute called autoplay and we'll also add an attribute called loop so that when the video ends it starts again and we'll also add an attribute called muted so that even if the video has some audio it will be muted right now let's go back to our website and here we can see that our video is being played.
So everything is working all right let's go back and let's add the other elements that we need the next element that we need is an overlay so here we can see we have this dark overlay for the video so the video is not being displayed as bright as here so for that let's add a division and for the division i'll just give it a class of bg overlay and that's it with the division we will style it using css if we go back to our design we won't see any difference over here because we haven't styled it right.
Now the next thing we will add is the nav bar so if we go back to our original design we can see we have this logo over here on the left and we have the menu items over here on the right so let's create a nav element and in that we will have a division with the class of logo for the logo and for the logo we'll create an anchor tag because when we click on the logo we want the user to be taken to the home page so just tap hash over here and for the logo i'll just type lb dot and.
Here we can see we have the logo right now let's go ahead and add the Wesdigital
Menu items so for that we'll create an unordered list and we'll also give it a class of menu items and in that we will have list items and we need to have these many items over here so we need to have home blog about and contact so let's add these over here we'll add them inside anchor tags and here i'll just type home i'll just.Copy this list item and paste it three more times and the next thing we need to have is block and then we need to have about and then we need to have contact all right that's it with the navigation so we have the logo and the navigation menus now the next thing we will add is this heading so for that let's create a division and let's give it a class of hero section.
Or we can also create a header so just type header and we'll give the class of hero section now in the header we need to have an h1 and here for the heading i'll just type live blogger and if you go back to our design we can see we have the header over here and the next thing we need to have is a paragraph now in the paragraph we'll just type learn web design for free now the next thing we will add is a button so here we can see we have this button called watch demo.
So for the button i'll just create an anchor tag and we'll give it a class of btn and here i'll just type watch demo right now let's go back to our design and here we can see we have the heading the paragraph and the button right now the next thing we will add are the social media icons so for that let's create a division outside the header so let's create a division of the class of social and in that we will have anchor tags.
And let's add the icons over here so we will add the icons from fontawesome.com so here i'm in fontawesome.com and we need to get the icons of pinterest facebook and instagram so let's type pinterest over here and this is the icon that we need so let's click on the icon and this is the code for the icon so let's click on this code to copy it and let's go back to our html and paste it over here inside the anchor tag and if you go back to our design we can see we have the icon of pinterest displayed over here now in the same way.
Let's add the icons of facebook and instagram so let's copy this anchor tag and let's paste it down two more times and the next one is facebook and the last one is instagram so here we can see all the logos are displayed over here all right that's it with all the elements of the desktop version now let's add the elements for the mobile version so let's decrease the width of the screen now here you can see for the mobile version we need to have this menu icon.
And we also need to have this closed icon and also these menu items over here so for that let's go to the nav and here we can see inside the nav we have the logo and the menu items and here after the ul i'll just create a division with the class of menu button and here we will add the menu icon so we'll get the menu icon from a website called hero icons so here i'll just search for menu.
And here we can see we have a lot of icons i'll just select this icon right here so let's click on copy svg and i'll just paste it over here so this is our menu icon if you go back to our design here we can see we have the menu icon displayed over here it is really huge right now but we will style it using css later and the next thing we need to have are these menu items and this close icon.
So for that let's create a division so let's go outside the main container and here we'll just create a division of the class of mobile menu items and the first thing we will do is add the close icon so let's create a division with the class of close icon or close button and let's go back to heroicons.com and i'll just search for close over here and let's copy this svg and let's paste it over here.
Right now let's add the menu items for the mobile version so let's go outside this close button
And we can just copy and paste the same menu items from here so i'll just copy this ul and let's paste it over here inside the mobile menu items right now let's go back to our design and here we can see we have the close icon and also the mobile menu items and also the menu icon so everything is being displayed without any problems and.That's it with the html of our design right here is our code this is the html and we have completed the html and we have already linked our css file over here so let's start with the css so let's go to the style.css file and first of all we will add some resetting styles so i'll just select all the elements so i'll just type asterisk and for all the elements i'll just add a style of box sizing border box now what this line of code does is that it will include the padding in the height and.
The width of the element so when we add a height and a width to an element it will have the correct height and width right now the next thing we will do is uh we will reset all the margins from the body so i'll just type body and i'll just type margin 0 so this will reset all the margins now the next thing we will do is we will hide all the elements of the mobile version so this is the desktop version and if i decrease the width of the screen we can see that this is the mobile version and in the mobile version we have this menu icon.
And we also have this close icon and also these menu items over here so we need to hide all of these from the desktop version so if you go back to our design and if we scroll down here we can see this is the menu icon so we need to hide this in the desktop version and we also need to hide this close button and also these mobile menu items so let's do that let's go back to our source code and let's go to the html file and if we scroll down here we can see that inside the main container division.
We have this nav and in the nav we have this menu button division so we need to hide this so here i'll just type hidden items and just add this comment over here and let's type main container now and we have the class of menu button and here let's type display of none now let's go back to our design and now we can see that the menu button is not being displayed over here let's also hide this close button and also these menu items so if you go back to our html we.
Can see that if we scroll down we have this division with the class of menu items and before that we have this division with the class of mobile menu items so in that we have the close button and also these menu items so let's hide this mobile menu items division so let's go back to our style.css file and here i'll just add a comma and let's type mobile menu items right now let's go back to our design and here we can see all the mobile elements are hidden right now let's start with the styling.
Of this desktop version the first thing we will do is we will style the video so if you go back to our index.html file here we can see we have this video element inside the main container so let's select this so here i'll just type main container video and we'll set the position to fixed so that it will always be at a fixed position and we'll set the top position to zero and the left position to zero and we'll also set the width to 100 percent and.
Let's go back and now we can see we have this video and it has a width of 100 of the screen and everything is looking alright now the next thing we will do is we will add the video overlay so if you go back to our original design we can see that we have this dark overlay over this video so if you go back to the html file here we can see we have created this division with the class of bg overlay so let's style this here let's type main container bg overlay and even for this we will set a position.
Of fixed and we'll set the top position to zero and the left position to zero and we'll set the height to 100 report height and the width to 100 percent and let's set a background color of black and here we will add an opacity so i'll just type opacity and let's set it to 0.8 let's go back and now we can see we have this dark overlay over this video right now let's style the other elements in our website right now the next thing we will do is style this nav bar so.
Let's go back to our html file and here we can see we have this nav element so let's style this so it is inside the main container division so here i'll just type main container nav and we'll set a position of fixed so that it will always stay at the same position and we will set the top value to 0 and the left value to 0 and the right value to 0 so that it will be in the center and we will set a max width.
Of 1000 pixels let's also set the display to flex and align items to the center and justify content to space between so that we have some space between the elements and here we can see we have the logo and the menu items displayed over here we'll also bring it to the center so i'll just type margin 0 for top and bottom and auto for left and right all right let's add a background color and let's see what is the width and the height.
And we will add some padding as well so let's type padding and we'll set the padding to 24 pixels top and bottom and 32 pixels left and right right now let's style the logo so the logo is inside this logo division and in that we have this anchor tag so here let's type main container nav logo a and let's remove the underline by typing text decoration to none and we'll set the color of the text to white and we'll set the font size to 24 pixels and we'll set the font family to roboto.
Sensor sanserif and here we can see we have the logo styled let's also remove the background color we just remove the font family line from here and we will add it to the main container so that we have the font family in all the elements so here let's type main container and let's type font family let's paste it over here right now we have the font family roboto in all the elements.
Right now let's style this unordered list so if you go back to our html here we can see we have this ul inside this nav so let's style this so here let's type main container nav ul and the first thing we need to do is we need to place all these elements one next to the other so for that let's set the display to flex and we will have a gap of 40 pixels.
Between each of the elements and we will also remove the bullets so let's tap list style and set it to none and we'll also remove the default margin and padding of the unordered list so i'll just have padding 0 and margin 0. right now let's style the anchor tags so let's type main container now ula and first of all let's remove the underlines so let's type text decoration.
And set it to none and let's also set the color of the text to white and we'll set the font size to 15 pixels and we'll set the text transform to uppercase all right now the next thing we will do is style these elements over here so these are inside a header so if you scroll down here we can see we have this header and we have this class of hero section and in that we have this h1 the paragraph and the button so let's style this header so here i'll just type main container hero section.
And right now we cannot see the hero section over here because it is below this video so what we have to do is we have to set a z index of some lower value for this video and we have to set a higher z index for these elements over here so here for the hero section i'll just type z index and let's set the z index to let's say 2 and for the video which is this selector over here here i'll just type z index of zero and we cannot see the hero section yet so.
That's because we have added a position of fixed over here and for the other element also we need to add some position so let's set a position of relative and now we can see that the hero section is displayed over here let's bring it to the center so i'll just select the container division which is the main container division so here i'll just type height of 100 viewport height and width of 100 and i will also add a max width of 1000 pixels and let's set a display of flex and.
Align items to the center and now here we can see all the elements are in the center we'll also bring the main container to the center so here i'll just type margin 0 for top and bottom and auto for left and right and let's also add a padding of 32 pixels and now we can see we have the elements in the correct position right now let's set the color of all the text to white all right now the next thing we will do is we will add a backup color so here if we go ahead and provide an incorrect value over here if you go back.
Now we can see that the video is not being displayed so when we don't have the video we need to have a dark color over here as the background so let's go back and let's go to the body and here we will add a background color of black by default and now we can see it looks alright so let's go back and let's enter the correct url over here and now we have the video over here right now the next thing we will do is style the h1 so for the s1 we need to.
Have a different font so let's go back and let's add the styles over here so the h1 is inside the main container in that we have this hero section and in that we have the h1 so let's type main container hero section h1 and we'll set the font family to sacramento and cursive and we'll also set the font size to 90 pixels so this is our heading now the next thing we will do is style the paragraph so we have this p tag over here inside the hero section so here.
I'll just type main container hero section p and we will set a font size of 20 pixels and for the heading we will just remove the margin so here for the h1 i'll just type margin 0 and let's also add some negative margin to this paragraph so that it is at the top over here so for the paragraph i'll just type margin top and let's set it to negative 24 pixels and i think that looks alright right now let's tile the button so for the button we have this.
Red background color so we have this anchor tag as the button so if we go back to our html file here we can see we have this anchor tag with the class of btn so let's style that so here let's type main container hero section a dot btn first of all let's set the display to inline block so that the margin and the padding and all of those things are applied correctly because anchor tags are by default inline all right the next thing we will do is remove the underline so i'll just.
Type text decoration to none and let's set the color of the text to white and let's set the background color to d62828 and let's also add some padding we will add a padding of 10 pixels top and bottom and 32 pixels left and right and let's also add some border left over here so let's type.
Border left and we'll set it to 8 pixels solid f1 f a e and we'll also set the font size to 16 pixels and let's set the text transform to uppercase all right that's it with the button now the next thing we will style are these social media icons so let's go back and in the html here we can see we have this division with the class of social so let's target that so here i'll just have main container.
Social now we'll position the social division relative to the main container so for the main container i just have to set a position of relative so here i'll just have position relative and now let's scroll down and here for the social i'll just type position absolute and i'll just set the bottom position to 60 pixels and the left position to zero and we'll also add a padding of 32 pixels.
And let's go back to our design and here we can see we have the social media icons in the correct position now let's style these anchor tags so if you go back to our html here we can see inside the social division we have these anchor tags and in that we have the icons now here in place of this hash you can just add the links of your social media accounts all right let's style these anchor tags so here i'll just type main container social a and the first thing we will do is we will remove the underlines so i'll just type text decoration and set it to.
None and we'll set the color of the anchor tags to white and let's set the font size to 30 pixels and we'll also add a margin of zero for top and bottom and 16 pixels for left and right and here we can see we have all the icons displayed over here we just remove the margin left from the first icon so here we have to type main container social a column first child.
This will select the first instance of the anchor tags so here i'll just have margin left of 0 and now we can see everything looks all right all right so that's basically it with the design of the desktop version and everything looks alright now in this video we will design the mobile version so here in the original design we can see that if you decrease the width of the screen this is how the mobile version looks so in the mobile version we want to decrease the font size of this heading and also this paragraph and we need to remove the menu items from here and we need to add this menu button and when we click on this mini.