Html of this design and from this video we will start writing the css so let's start by writing the css for this nav bar and this hero section so let's get started.
alright this is our website looks right now we don't have any css added so let's go to our source code and.
This is our html file we can see that we have linked our css file over here so let's go to style.css file and we have already added these color variables in our previous videos all right let's.
Start by removing all the default margins in the body so let's type body and i'll just type margin 0 and now we can see we don't have any default margin in our browser.
Right now let's go back and let's set the box sizing to border box so i'll just select all the elements and also the after and before selectors so just tap after.
That we have the correct height and width for our elements and now if we go back to our website and if i click on this my projects link we can see that we are taken to the my.
Projects section but it is instant we want to have a smooth transition so for that let's go back to our css and we will add a scroll behavior to the html so let's type html.
And let's tap scroll behavior and set it to smooth now let's go back and let's click on my projects and we are smoothly taken to this section right here.
Right now the next thing we will do is we will set the max width for the wrapper division so if you go to our original design we can see that we have this max width for all the elements.
So let's go back and if you go back to our html file we can see that we have this division with the class of wrapper so let's style that so here i'll just type wrapper.
And we'll set a max width of Wesdigital
1100 pixels and we'll also set a padding of 0 for top and bottom and 50 pixels for left and right and 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 now you can see we have a max width for all the content let's add a background color and you'll be able to see it.
Correctly so here we can see this is the max width of our rapid division so we have the max width for all the sections.
Let's go back and let's remove this background color right now the next thing we will do is style this nav bar so if you go back to our html file we.
Can see that for the nav bar we have this nav element with a class of main nav so let's style that i just create a comment i'll just type.
Nav bar so here i'll just type nav with the class of main nav first of all let's set the position to fixed so that it is in the same position.
Even if we scroll down and we'll set the top position to zero we'll set the left position to zero and also the right position to zero and we'll also set the z index to a.
Higher value so that it is always on the top and let's add a background color and let's see whether it is being applied so here we can see we have this.
Navbar displayed over here right now let's remove this background color and we'll just change it to white and we'll also add a box shadow and we'll set the values to 0 4 pixels.
40 pixels rgb a
0 0 0 and 0.2 right now the next thing we need to do is we need to position all these elements one next to the other so if we.Go back to our html file here we can see inside the main nav we have this wrapper and in the wrapper we have the menu icon the logo and this button so for the wrapper division inside the.
Main nav we have to set the display to flex so here i'll just type nav dot main nav wrapper.
And let's set the display to flex and we'll also align items to the center and now we can see we have all these elements one next to the other now we will position them one to the left one.
To the center and one to the right so for that we have to type justify content space between now we can see we have the correct positioning for all these elements.
I will also add some padding for this main nav so let's go back to our css and here for the main nav let's add a padding and we'll set up heading of 16.
Pixels top and bottom and zero for left and right now the next thing we will do is style this logo so let's go back and for the logo we have a division with.
The class of logo so here i'll just type nav dot main nav logo and we'll set the font size to 20 pixels and the font weight to.
800 and we'll also set the color of the font to the primary color which we had stored over here so we can simply use this variable.
So here i'll just type var primary color and we also need to set the font family so what we will do is for the body we will add a font family of railway.
And sans serif all right that's it with the logo now the next thing we will do is style this button so let's go back to our css and for the button we have a class of.
Btn so let's style this so here i'll just type btn and we will first of all remove this.
Underline so for that we'll just type text decoration and set it to none and we'll set the font size of the button to 16 pixels and we'll set the.
Font weight to 800 and we also add a padding of 10 pixels top and bottom and 32 pixels left and right and we'll also set the display to inline.
Block so that we have the correct margin and padding added to the button right now we have two types of buttons over here we have a light button and a dark button.
So for each of the buttons we have different styles so we will type btn.dark for the dark button and for the dark button we need to have.
A dark background color so let's tap background and we'll set it to a variable that we created called dark color and for the color of the text we'll set.
It to white and for the light button let's tap dot btn.live we will set the background color to.
A light color and we'll set the color of the text to black and here we can see we have the button displayed over here.
And the styles are added for these buttons also because we have the same classes over here now one more thing we need to do over here is that when we hover over this.
Menu icon we need to change the cursor to a pointer so let's go back and for the menu icon we have a division with the class of menu icon so.
Let's target that here i'll just type nav main menu menu icon and let's set the cursor to pointer.
And now if you hover over this we have the pointer right now the next thing we will do is style this hero section so let's go back to our html.
And for the hero section we have this header so first of all let's style this header so here i'll just create a comment and here we'll just type hero section.
All right the first thing we will do is we will set the height of the header to 100 viewport height so this is the header so let's target that i'll just type.
Header and let's set the height to 100 report height and we'll set the background color to.
The gray color so we have already created the variable so i'll just select this and we'll also set the overflow to hidden so that anything outside this header will not be.
Displayed so even if our image extends the height of this header it will be cropped right now let's go back to our browser and here we can see we have the background.
Color set and we also have 100 report height for the header right now the next thing we need to do is we need to position the left and the right divisions one next to the other so right.