0:00
Hello everyone, welcome back to another video of easy tutorials and first of all a very
0:05
happy new year to all of you. Today in this video you will learn how to use a stylus fonts in HTML website and I will
0:13
also tell you how you can use animation on your HTML and CSS website as you can see on
0:19
my computer screen. I'll use Google fonts for stylus fonts and Animate.CSS for animation effect on this website
0:27
Now let's start this tutorial. This is my CSS file and this one is HTML and I have already linked my CSS with the HTML file
0:43
Now in body section we will create one div and the class name will be welcome and here
0:49
we will write one heading in h1 tag
0:59
After that we will write some text here in p tag
1:13
Wishing you a very happy new year from easy tutorials with the hope that you will learn
1:19
bigger and do bigger in the year to come. And again we will add second title that is 2019
1:34
Now I'll open my web page with Google Chrome. Now you can see three text here
1:55
Now I'll copy this body and come to the CSS file and here we will add some background
2:00
image in this page. I'll also add some overlay color on this background image
2:31
This is my image file name background.jpg. Now background size will be cover and background position will be center
2:47
Now I'll refresh my page and you can see this background image here on this web page
3:03
Now again I'll come back to this HTML file and I will copy this class name welcome and
3:08
for this one I'll write margin 10% from top and auto from left and right and 0 from bottom
3:15
Now color font size text align center. Now again I will refresh this one so you can see all the text in the center
3:27
Now I'll come here in p and here we will add br to change the line
3:34
So here we will put br and again one more. Now again I will refresh this one so you can see a three line of text here
3:53
Now I'll put this text in span so that we can change the color and font style
4:10
Now I'll come to the CSS file and I will add this span here and write color
4:29
After that I'll write h1 and for this one font weight will be normal
4:39
Again h2 and for this one also font weight normal. Font size 100px and then line height 10px
4:59
Now I'll refresh this one so you can see a big text here
5:09
This was a mistake. Okay after removing this dot now you can see a color in this text
5:19
Happy new year and this one learn bigger and do bigger. Now we will add a stylus font on this website for that I'll search Google fonts on Google
5:32
and open this website and here you can see there are so many different fonts are available
5:40
on this website so you can select anyone. So let me scroll and search font here
5:51
Here is the font that I'll use here. Okay Nova script this one
6:02
To use this font just simply click on this plus icon
6:12
Okay after clicking on this one you can see this font is added here
6:22
Now I'll select another one for that I'll search one font name here
6:30
Here we got the second font so simply again I'll click on the plus icon
6:41
Now you can see two fonts family is added here. Okay after selecting the font just copy this link and paste it in the head of your HTML file
7:00
So here I'll paste this link. Okay now we need to copy the font family name from here
7:12
This is the first font family just copy and paste it anywhere where you want to add this font
7:19
So I'll put it in H1 and this span also
7:31
Now I'll copy the second font family name and I'll use this here in welcome box
7:48
Now again I'll refresh my website and you can see a stylus fonts on this website
7:59
After adding this Google fonts on this website I'll add animation on this text
8:07
For that I'll search animate.css on Google. Open this first website and here you can see a link V on GitHub
8:21
So simply open this GitHub link and here you can see the author of this code
8:34
Now I'll scroll down and here you can see a CDN link that we will use in this code
8:42
So simply copy this CDN link and paste it in the HTML file head section
9:00
Now I'll scroll down and here you can see a class name called animated
9:12
So we will use this class name anywhere we want to use this animation
9:22
So first of all I'll use this class name in H1 for that I'll write here class is equal
9:30
to animated. And now we need to select the animation type. Okay which type of animation you want to use
9:39
So we can select the animation class name here. So here you can see a different animation class
9:47
Bounce, Flash, Pulse. Okay there are so many animation class here. So here we will select this one
10:03
Zoom in. So simply copy it and come to the HTML file and paste it just after the animated
10:20
That's it. Simply I'll copy this entire class name and paste it in P tag also
10:26
And again in H2 also
10:49
Now I'll refresh my website so you can see an animation on each text
10:59
All these animations are happening at the same time. So we need to add delay on second and third one
11:08
For that I'll come to this website again GitHub and here you can see a class name delay
11:15
to second. Okay. So I'll copy this one and paste it in the class name here
11:23
Delay I'll change it to one second for second text and for this H2 I'll write delay two second
11:31
So after adding this delay again I will refresh my website so you can see the first hello
11:38
guys is coming first and then second text and then third text
11:43
This is how you can add stylish fonts and animation on your website
11:47
And again a very happy new year to all of you. Thank you so much for watching this video
