Design the mobile version of this web page now in this video we're going to add some horror effects for these elements so here we can see for the button we have this hover effect and.
Even for these menu items we have these hover effects we can see that we have these underlines and we also add animation to these elements when the page loads so if i refresh this page.
We can see that we have this animation for all these elements so these are the things that we're gonna do in this video let's get started .
alright this is our progress as of now and i have disabled the autoplay for now for this video all right so let's start with the hover effect for this button.
So let's go to the source code and uh here we can see for the button we have this anchor tag with the class of btn so let's go to style.css file.
Hero section a dot btn column hover and when we hover over the button we'll just change the background color so let's type background and i'll just change the.
Color to a11b1b and we'll also add a smooth transition so here i'll just tap transition and let's set it to all 400 milliseconds ease right now let's go back and now if.
You hover over this button we can see that we have this hover effect right now let's add the horde effects to these.
Menu items over here so if you go back to our original design we can see that we have these underlines over here for this many items so for that we're going to use the after selector in css so.
Let's go back to our css let's find the selector for the menu items so i think it is right here so here we can see we have this anchor tag so what we're going to do is we're going to add an after.
Selector for this anchor tag so here we Wesdigital
Can just type main container nav ula colon colon after and after selectors are basically used to add extra data to the elements so.Here if i just type content and if i just type one two three and now if you go back to our design we can see that we have one two three written after all these menu items so we.
Don't want to have one two three written so let's go back and let's remove this one two three now we need to have an underline now we need to position this underline relative.
To this anchor tags so here for the anchor tag let's tap position relative and here in the after selector i'll just.
Have position absolute and let's set the left position to 0 and the bottom position to negative 4.
And let's set the width of the element to 100 and let's set the height of the element to 1 pixel and let's set the background.
Color to white right now let's go back to our design and here we can see we have underlines for all these menu items now we don't want to have these underlines by default.
We'll just have the underlines when we hover over these menu items so let's go back and here i just set the width to zero percent by default and uh.
Let's add a hover effect over here so let's tap main container now ul a column hover column column after and here we need to set the width to 100.
Percent
And we'll also add a smooth transition so here i'll start transition and let's set it to all 400 milliseconds is.All right now let's go back to our design and let's over these menu items and we can see we have the hover effect working all right so that's it with the horror effects for.
These elements now the next thing we will do is we will add animation for all these elements when the page loads so if you go back to the original design and if i refresh this page.
We can see we have these animations for all these elements so let's add them first of all let's add the animation to this heading so let's go back to our css.
And let's find the selector for the heading so i think it's right here so this is the heading so let's go ahead and type animation.
And we're going to create an animation called fade in and let's set the duration of the animation to 1000 milliseconds and we will set the transition curve to.
Ease in out by default we will set the position of this element to 15 pixels below the default position so let's type transform.
Translate y and let's set it to 15 pixels and by default we'll also set the opacity to zero right now let's create this fade in.
Animation so for that we have to type at keyframes and for the identifier i'll just type fade in in the first frame we have the opacity.
Set to 0 and the transform translate set to 15 pixels now here we need to add the last frame so we can just type 100 over here or we can just type 2 for the last frame and here we will just.
Set the opacity back to 1 and we'll also set the transform translate so let's tap transform translate y and set it back to zero right now let's go back to our design.
And let's refresh this page and we can see that we have the animation for the heading but after the animation it just vanishes and it goes back to the first frame.
So for that we have to go back to our css and here we need to add a property called forwards right now let's go back to our design and let's refresh this page.
And here we can see we have the animation for the heading right now let's add the animation to this paragraph and also this button so let's go back to the css.
And i'll just copy this line of code of the animation and let's scroll down and let's paste it over here for the paragraph.
And here also we need to set the opacity and the transition so let's go back over here and let's copy these two lines of code and let's paste them over here.
And the next thing we need to do is we need to add a delay for the animation of the paragraph so here we need to type animation delay and let's set the delay to 400.
Milliseconds right now let's go back to our design and let's refresh this page and here we can see we have the correct animation for both these elements.
Let's also add the animation for the button so let's go back to our css now for the animation of the button we'll just keep the button at the same position so i'll.
Just copy these three lines of code and let's paste it over here in the button and for the button i'll just set the animation delay to 1000 milliseconds.
Which is one second so let's go back to our design and let's refresh this page and we can see we have the correct animation for all the three elements.
All right now let's add the animation to this nav bar so let's go back to our css and uh i'll just copy these three lines of code from.
Here and let's go to the selector of the nav bar so this is the selector for the nav bar so i'll just.
Paste the three lines of code over here now while we are still here let's also add the animation to the social division so let's scroll down and.
Here's the social division so i'll just paste the three lines of code over here and for the social division i'll just set the duration of the animation to 500 milliseconds and the animation delayed.
To 2000 milliseconds right now let's go back to our design and let's refresh this page and we can see we have the animation for all the elements in our webpage right.
Now let's go back to our html and let me just add the auto play for the video so here i'll just type auto play right now let's go back to our design.
And we can see everything is working all right let's hover over these elements and we have the horror effects working all right let's refresh this page and we have all the animations working.
All right so that's basically how you add animation and horror effects to the elements in your web page and that's it for this video i will leave the link of the source code in the description of.