Now this is our progress as of now we have designed the nav bar and also this left and this right sections over here in the hero section now in this video we're going to.
Add these dots over here and we'll also add this down arrow over here and we'll also add the functionality for this menu icon so when we click on this menu icon.
We need to display these menu items over here and when we click on this close button the menu should disappear so this is what we're gonna do in this video let's.
Get started now first of all we will style the dots so here you can see we have these dots over here and when we heard of these.
Dots we have the section names displayed over here and if i click on any of these dots for example if i click on testimonials we are taken to the testimonials section.
Created this division with the class of dots and in that we have these anchor tags with classes dot and for the active dot we have a class of active so first of all let's style this dots division.
So here i'll just type dots and we'll set the position to fixed so that it will always stay in the same position even if we scroll down and we'll set the top position to 50.
Now when we set the top position to 50 it will start from the 50 mark so we have to move it 50 of itself to the top so we have to type transform translate y and set it to negative fifty percent.
Right now let's style the dot inside this dots division so here i'll just type dots dot and we'll set the height of the dot to 10 pixels and the width to 10 pixels.
Now we want it to have a round shape so we have to set the border radius to 50 and i will also add a background color now if we go back to our original design we can see that for the active dot we.
Have this primary color and for all the Wesdigital
Other dots we have a color with some opacity so here i'll just type rgba and we'll set the values to 255 116 116 and for the opacity i'll just type 0.2.Now what we will do is we will set the display of the dots to flex so here you start display of flex and now if you go back to our website here we can see we have all the dots.
Displayed over here now we want these dots to be displayed one below the other so here we have to type flex direction and set it to column and we'll also add a gap of 16 pixels.
And we'll also add some left position so here i'll just type left and we'll just set it to 20 pixels and that looks alright now let's style the active dot.
So for the active dot we have a class of active so here i'll just type dots dot dot active and i will set the background color.
To the variable that we created called primary color and now you can see for the active dot we have this primary color now the next.
Thing we will do is when we hover over this dot we need to have the name of the section displayed over here so for that let's go back to our html and here we will add a data attribute so.
Here i'll just type data hyphen location now you can name this data attribute anything you want you just have to start with data hyphen and then you can name this anything you.
Want and now we need to set a value to this so let's tab equals now for the first dot we have a value of home so let's type home over here now we need to access this data attribute inside our.
Css so let's go to our css file
And here we will access it inside and after selector so let's type dots dot colon colon after.And here we need to add a content attribute and here if you type let's say one two three here we can see we have one two three displayed over here let's change the.
Color and you'll be able to see it better so here you can see we have one two three displayed over here after every dot now we need to display the content.
Inside this data attribute so for that you have to type attr for attribute and here to type data.
Hyphen location which we have named over here in the html so now let's save this and let's go back and here we can see for the first dot we.
Have home displayed over here now let's style this let's set the background color to a dark color and we will have a padding of three pixels top and bottom and eight pixels.
Left and right now we need to position this after selector relative to this dot so here for the dot i'll just type position relative and now here we can type position.
Absolute and we'll set the top position to 50 percent so that it starts from the center and we also have to move it 50 to the top so that it is.
Exactly in the center so i'll just translate y negative 50 and we'll also set the font weight to 800.
And let's also set the font size to let's try 14 pixels and let's go back to our website and here we can see we have the section name displayed over here we also need to have a left position.
So here i'll just set the left position to 16 pixels and i think that looks all right now we need to display this only when we hover over this dot so for that here you have.
To type dot colon hover column column after now if you hover over this we can see that the section name is displayed over here.
All right now let's add the section names for all the other dots so let's go back to our html for the second dot we'll type data hyphen location equals and the second section is projects.
Suggest our projects over here and for the third one let's type data hyphen location and the third one is services and let's type data hyphen location and.
After services we have testimonials and skills and contact so let's add that over here testimonials and he will start data hyphen location skills.
And data hyphen location contact right now let's go back to our website and let's hover over these dots and we can see that all the sections are displayed over here.
And let's click on one of these sections and we can see that we are taken to that section over here now we are taken to the sections over here because we have the same id that we.
Provided over here so here we can see we have set the href to hash and for example here we have set it to projects and if we scroll down for the project section we have an id of.
Projects so that's why it is scrolling down to that section all right that's it with the styling of the dots now we have some more functionality for the dots so for example if you scroll down and if.
You go to the next section we have the second dot active over here and in the same way if we scroll down we have the next dot active over here now for this we need to use some.
Javascript so we will do that later right now let's style the menu items so if i click on this menu icon we can see that we have these menu items displayed over here.
So let's style this design so let's go back to our html file and here after the nav let's create a division and we will give it a class of.
Nav items and in that we need to have the close icon and also the list of all the menu items so first of all let's add the close icon.
So i'll just create a division of the class of close icon and in that we will have the image of the close icon so let's type img and the src i just tab images forward.
Slash and i have an image called close icon dot svg right now let's add the menu items so for that we'll just use an unordered list.
And in that we have list items and in that we will have anchor tags and for the first one we just type home and let's copy this list item and we'll paste it five more times.
And for the second one let's type projects and here in the href i'll just type hash projects and for the third one let's type.
Services and here i'll just type hash services and for the third one we have testimonials and here i'll just type hash.
Testimonials and then we have skills here also i'll just type skills and lastly we have contact me and here let's type contact.