Of this design and this is how it looks we can see that all the elements are displayed over here now in this video we will start with the styling of this design so let's get.
Started right here is our code this is the html and we have completed the html.
And we 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 start 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 we will.
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 you 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 Wesdigital
Comment over here and let's type main container nav 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 a 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 all 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 uh 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 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.
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 navbar 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 zero and the right value to zero 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 i'll just 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.
Sans serif 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 type 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 i will 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 we 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 0 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.