Can watch it I will leave the link in the description of this video and I'll also leave the link of the source code so that you can just copy and paste the code to your websites all right so let's.
Get started right here I'm in the dashboard of my WordPress website and this is how it.
Looks right now this is a brand new website now I have opened this website locally and I am using this application called local by Flywheel for hosting the websites locally.
So you can just download this for free and just create a new website and just install WordPress right now we will add this design into a post inside our WordPress website so let's go over here.
You can just press forward slash and then just select custom HTML from here or you can just click on this plus icon and just search for custom HTML over here.
And you can just click on that now here we can see we have the option of writing the HTML over here now here we can write HTML CSS and JavaScript so let's add the code over here first of all let's add.
The CSS I'll just create a style tag over here and in this style tag we will add the CSS so let's go to our source code and let's go to the style.css file and.
Let's copy all these CSS from here so let's copy from this line of code till here and let's paste it over here inside the style tag.
And now let's paste the HTML so let's go outside the style tag and let's go back to our source code let's go to the index.html file and let's copy all this HTML from here till the end of this.
Posts Related:
Script tag
And let's paste it over here inside our post now the last thing we need to add over here is the JavaScript so let's create a script tag over here.And in the script tag we will add the JavaScript so let's go back to our source code and let's go to the main.js file now this is all the code for the.
Animation so we are using a library called GSAT for the animation so let's copy all this code from here and let's paste it over here inside the script tag and you can go ahead and change these.
Values to change the animation duration the ease and the properties and so on you can learn all of this in the design video which I will link in the description of this video right now if.
You scroll up we can see that we are using this font called Roboto so we need to get the link of this font as well so let's get the link of Google phones right here I'm in phones.google.com and.
You can just search for robot or font over here and just select the font and here we have the font let's select two of these styles from here so we need to have the regular style and also the.
Bold Style so let's scroll down and let's select the regular version which is regular 400 and let's also select the Bold version so I think we'll select this one right.
Here ball 700 and if you scroll down here we can see we have the link which we can add into the HTML or if you want to add it inside the CSS you can just click on import and.
Just copy this code and paste it in your CSS so let's copy this from here and let's paste it over here inside the CSS now if you click on preview here we can.
See we have the content displayed but
For the heading we don't have the font family set so let's go back to our HTML and here in the CSS we have to add the font family to the S2 as well.So here let's type font family and let's set it to Roboto and sensorif and we'll also set the phone to weight to 700..
Right now if you go back to the preview here we can see we have the font displayed now we cannot see the image over here so that's because if you scroll down in the HTML here we.
Can see we have this IMG tag but here in the source we have set it to images forward slash one dot jpg but we don't have any image called one.jpg inside our WordPress website so we have to first of.
All upload the image get the link and paste it over here so for that let's go back to our dashboard and here you have to go to media and click on add new and here you have to.
Upload the image so let's click on select files and let's select the image and let's click on open so here we can see that the image has been uploaded so here you can click on.
Copy URL to clipboard or you can also click on edit and here's the link of the image so you can just click on copy URL to clipboard and let's go back to our post.
And let's paste the link over here instead of this link right now if you click on preview here we can see that the image is being displayed so everything is working all.
Right so now let's go ahead and click on publish and publish once again and here we can see our post has been.
Published so let's click on view post and here we can see we have the animated post displayed over here and if I refresh this page we have the animation working all right now this is.
Basically an anchor tag so you can just add the link of any page over here so if he edit our post let's go back to edit post and if you scroll down.
Here we can see this is the anchor tag so you can just add the link of your page in place of this hash and then whenever the user clicks on the button they'll be taken to that particular page.
So that's basically how you can add an animated card to your WordPress website alright so that's it for this video I will leave the link of the source code in the description and I will also leave.
The link of the design video in the description so you can just go ahead and check that out alright so that's it for this video if you have any doubts you can ask in the comments below and if you.
Like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .
