Version now in this video we will design the mobile version so here in the original design we can see that if we decrease the width of the screen this is how the mobile version looks so.
In the bubble 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 button we want to have these menu items displayed over here and then here we have this close button and if i click on that the menu items are hidden so this.
Is what we're gonna design in this video let's get started so here we can see this is the css of our design and.
This is our progress as of now so the first thing we need to do is we need to hide these menu items first of all let me just disable this video playback so i'll just.
And he will create a media query so i'll just type at media and let's set the max width to 600 pixels so whenever the width of the screen is less than 600 pixels whatever styles we.
Have inside this block will be added to our design so first of all let's hide these menu items so for that if you go to the html here we can see we have this ul with the.
Class of menu items so let's hide this so here i'll just type main container nav menu items and let's set the display to none.
And now we can see that the menu items are not being displayed over here now the next thing we need to do is we need to display the menu button so here we can see we have this menu button so for.
The menu button we have this division with the class of menu button so let's target this so here i'll just type main container.
Nav Wesdigital
Menu button and let's set the display to block and let's add some more styles over here so i'll just type width and let's set.The width to 30 pixels and the height to 30 pixels and now we can see we have the menu button displayed over here now the next thing we will do is we'll decrease the font size of this heading.
And also this paragraph so let's type main container and we have the heading inside the hero section so here we can see we have this header with a class of hero section and in that we have the h1.
So let's type hero section h1 and let's set the font size to 60 pixels and let's also decrease the font size of the paragraph so let's tap main container.
Hero section p and let's set the font size to 16 pixels and let's add some more space between this paragraph and this heading so let's tap margin top.
And if you scroll up we can see that for the paragraph we have set a margin top of negative 24 pixels so let's bring it up a little bit so i'll just.
Type negative six pixels and i think that looks alright we'll also decrease the font size of this button so let's type main container.
And the button is also inside the hero section and we have an anchor tag with a class of btn and let's set the font size to 14 pixels.
And i think that looks alright now the next thing we will do is style the menu items for the mobile device so here we can see this is how it looks so for that we have to first of all.
Rotate and scale up this main container
So what we will do is we will add a class called active to the main container when we want to rotate it and show the menu items so.Here let's type main container dot active now all the styles that we add over here will be added to our design when we have the active class for the main container.
So here i'll just type transform translate x and i will set it to negative 190 pixels and we'll also rotate it a little bit so.
I'll just type rotate z and i will set the angle to negative four degrees and we'll also scale it a little bit so i'll just tap scale and i'll just set it.
To 1.1 right now let's go back to our html file and let's add the active class so here in the main container i'll just type active and now we can see that the styles are.
Applied to our main container all right now let's style the menu items for the mobile device so if you scroll down here we can see we have this division with the class of mobile menu items so.
Let's style this let's go back to our style.css file and here i just tap mobile menu items and let's set the position to fixed and we'll also set the display to flex.
And align items to the center so that all the elements will be in the center of the screen vertically right now let's set the height to 100 viewport height and let's set the width to 190 pixels.
Because that's how much we have moved this main container to the left here we can see translate x of negative 190 pixels and let's set the right position to zero and the top position to zero and.
Now we can see all the menu items are displayed over here let's also set a background color so i just have background and let's set the color to one three one two one two.
Now here we can see that the mobile menu items are on top of the main container so for that let's go to the main container so here we have the styles for the main container here we need to add a.
Z index so just type z index and let's set it to two and now we can see that the main container is on top of the mobile menu items right now let's style the unordered list.
Inside the mobile menu items so if you go back to the html here we can see inside the mobile menu items we have this ul and we have these.
Menu items over here so let's style this here i'll just type mobile menu items ul and let's remove the bullets so i'll just type list style and let's set it to none.
And we'll also set a padding left of 60 pixels right now let's style all these anchor tags so for that let's type mobile menu items.
Ul a and let's remove the underlines by typing text decoration to none and let's set the color of the text.
To white and let's set the font family to roboto and sensorif and let's set the font size to 20 pixels and we'll also add a margin of 16 pixels.
Top and bottom and zero for left and right and the margin is not being applied because anchor tags are inline element by default so we have to set the display to inline.
Block and now we can see that the margin is being applied now the last thing we need to have over here is the close button so here we can see we have the close button.
At the top right so if we go back to our index.html file here we can see we have this division with the class of close button so let's target this.
Here i'll just type mobile menu items close button and let's set the position to fixed and.
We will set the width to 32 pixels and the height to 32 pixels and we'll set the top position to 24 pixels and the right position to 32 pixels and we'll also set the color to white.
And here we can see we have the close button so everything is being displayed correctly let's go back to our html file and let's remove the active class here we can see we have this active.
Class so let's remove this and now we can see that the position of the main container has reset but we can see that these menu items are displayed over here so for that let's go.
Back to our stylus css file and here in the main container let's add a background color so i'll just type background and let's set it to black and now everything looks alright now the.
Last thing we need to do is we need to display the menu items when we click on this menu button and we need to hide them when we click on the close button so we will do that.
Using javascript but before that let's go ahead and add a transition over here in the main container so that we will have a smooth transition between the animation.
Right now let's start with the javascript so in the html we can see that we have already linked our javascript file over here now we need to reference three things from this html.
Into our javascript so we need to reference the close button and we need to reference the menu button over here and also this main container so let's go to our.