Powerful and popular library used by a lot of designers and it's used in a lot of modern websites for animations but in this video we will just design it using html and css so let's get started.
right here i have created this folder called card animation and i just opened it with vs code and i also have this.
Folder called images in which we have this image which we're going to use in our design right let's start by creating the necessary files.
So we need to create an html file so let's create a new file and we need to create this outside this images folder so let's create a new.
Let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic html5 code.
Right let's link our css file over here so let's type link and press tab and the hr values type style.css and in the body i'll just link the javascript file so let's type script.
Call in src and press tab and here let's have main.js right now let's start with the markup of our design so the first thing we will do is we'll create a division as the.
Container so let's create a division with the class of main container and in that we'll create a division called wrapper.
And in the wrapper we will have the image and this description so for the image let's create a division with the class of image and in here i'll just add the img tag.
Posts Related:
And in the source i'll just type images
Forward slash one dot jpg which we have over here in our folder images now outside this image folder let's.Create a division of the class of description and in this we will have an h2 for the heading and let's tap heading.
Here and let's also create a paragraph and let's just copy this text and i'll just paste it over here inside the paragraph.
And we'll also create a button so for the button we'll just create an anchor tag so let's create an anchor tag and for the sr i'll just type hash for now you.
Can add the link of your pages over here and we'll also add a class over here so that we can style it in css so let's give it a class of btn and here i'll just type get more info.
Or let's tap get info right now let's open this in our browser and let's see how it looks now i have this extension called live server installed in vs code so once you install.
That you can just right click over here in the html and click on open with live server and now here we can see we have the design displayed in the browser.
Right now let's start styling this so we already linked our css file over here so let's go to stylor css file and let's start designing this so first of all let's type.
Main container and let's set the font family to roboto and sensative right now let's select this wrapper division which is inside the main container.
And let's type main container
Wrapper and let's set the width of the wrapper to 300 pixels and we'll also set the same width for.This image so here i'll just type main container wrapper img.
And let's set the width to 300 pixels well let's set it to 100 right now i'll just bring all of this to the center of the screen so for that let's select the body.
And let's set the height to 100 viewport height and we set the display to grid and place items to the center right now let's get back to designing the wrapper so here for the wrapper.
Division let's set a border radius and we'll set it to 10 pixels and we'll also add a box shadow so let's type box shadow and for the box shadow we will add the.
Values 0 4 pixels 40 pixels negative 8 pixels rgba 0 0 0 and 0.2.
Well now we can see we have this box shadow for our element and now here we can see we don't have the border radius for the images so for that we have to type overflow.
And set it to hidden and now we have the border radius now let's add some padding to this description division so here we can see we have this division.
Of the class of description so here let's type main container wrapper description and let's set the padding to zero pixels.
Top and bottom and 16 pixels left and right right now let's style this heading so let's type main container description h2.
And let's see the font size to 30 pixels and we'll set the margin to zero i think we can have a little bit of margin top so let's type margin top and let's set it to 16 pixels.
And i think that looks right now let's style this paragraph so let's start main container description p and let's set the font size of the.
Paragraph to 15 pixels and let's set the line height to 2. right now let's style the button so for the button we have an anchor tag with a class of btn.
So here let's type main container description btn and for the button we will have a padding of 8 pixels and 32 pixels.
We'll set the background color to teal and let's set the color of the text to white and we'll set the font size to let's try 16 pixels.
And we'll also remove the underline so let's type text decoration and set it to none and let's set the font weight to 800 and we'll set the width of the button to.
100 and here we can see that the width of 100 is not added to the button that's because anchor tags are inline elements by default so we have to set it to.
Display of inline block now we can see we have hundred percent width but it goes outside this container division so for that we have to set the box.
Sizing and we have to set it to border box and let's also add a border radius so that we have rounded corners and let's set it to 10 pixels.
And let's also bring this text to the center so let's type text align and set it to center and we will add a margin bottom for this button so let's tap margin bottom and.
Let's set it to 16 pixels and that's basically it with the design of the card so that's it for this video in the next video we will add the animation so that.
It looks like this when we refresh the page all right so 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 .
