Elements over here but we can see for the background we have this video and i just downloaded this video from a website called pixabay.com where you can get free images and videos for your.
Websites so this is what we're gonna design in this video using html and css so let's get started .
All right here i have created this folder called video bg and i just opened it with vs code and i also have a folder called videos over here and in that we have this file.
Mp4 file which we're going to use as the video background all right let's start by creating the necessary files so let's create an html file let's click on new file.
And let's create a file called index.html and let's create one more file for the css let's name it style.css.
Let's link our css file over here so i'll just type link and press tab and here in the editor values type style.css and for the card let's create a division with the class of card.
And in that we will have the content of the card and we'll also have the video so first of all let's create the content so for the content we need to have this heading then we need to have this.
Paragraph and also this button so let's create a division with a class of card content and in that we will have an s3 and for the s3 we need to have the text web.
Design so let's type web design over here and then we need to have a paragraph and let's see what we need to type so we need to type learn the basics the right.
Way so i'll just copy this text and let's paste it over here inside this paragraph and next we need to have a button so let's create an anchor tag.
And here you can add the link of your Wesdigital
Page i'll just type hash for now and i'll also add a class called btn so that we can style it to look like a button and for the button we have this.Text learn more so just type learn more all right that's it with the content of the card now let's add the video first of all let's see how it looks in the.
Browser so 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 here we can.
See our design is displayed over here in the browser right now let's add the video so for that i'll just create a video tag and in the video tag i'll just add a.
Source tag and here in source we need to add two attributes the first one is src so here we need to add the link of the video so our video is inside videos.
Forward slash network dot mp4 and then we need to add an attribute called type so we will set the type to video mp4 and let's close the source tag over here now let's go back to our browser now.
Here we can see that the video is being displayed over here but it is not playing now for that we need to add an attribute over here called autoplay so here inside the video tag let's type.
Autoplay and now let's go back to our website and here we can see the video is being played here we can see after the video is.
Played once it stops now we want to play this video again and again infinite amount of times so for that we need to add an attribute called loop and we'll also add an attribute called.
Muted so even if the video has sound the
Sound will be muted right now let's go back to our browser and everything looks alright so that's it with the html now let's.Start with the css so first of all let's style this card division so i'll just type dot card and we will set a max width.
Of 300 pixels and we'll set the font family to roboto sensative right now the next thing we will do is we will set the position of this video relative to the card so that.
We can set the height of the video relative to this card so here in the card i'll just type position relative.
And let's select the videos i'll just type card and in that we have the video tag so let's type video and for the video i'll just type.
Position absolute and let's set the height to 100 of the parent and set the top position to zero and the left position to zero.
And now here we can see we have the video displayed over here now we will add some padding top to this card content so here we can see we have some padding top for the card content.
So let's target that we have this division with the class of card content so i just type card card content and let's set the overall padding to 24.
Pixels and we'll set a padding top of 100 pixels right now let's go back to our browser and now we can see that the width of the video is more than.
What we need so for that we have to set overflow of hidden for the card so here we'll just type overflow hidden so now whatever is outside this.
Card will not be visible and we'll also add a border radius so just a border radius and i'll just set it to 8 pixels and now we can see we have the video displayed over here with the correct.
Width and height now the next thing we need to do is we need to bring this card content on top of the video so right now the video is above the card content so for that we have to set a z index so.
I'll just type z index and let's set it to three and now if you go back we can see that the content is still not being displayed.
Over here that's because for the video we have a position of absolute so we need to add some position over here for the card content so let's start position.
And let's set it to relative and now we can see that the content of the card is displayed over here now let's style these elements first of all let's style the s3 solid.
Type card card content s3 and let's set the font size to 32 pixels and let's set the margin to zero.
And let's set the color of the text to white and this is our heading now let's style the paragraph so.
Let's type card card content p and let's say the color of the text to h0f db and now let's style this button.
So for the button we have this anchor tag with a class of btn so let's type card card content a dot btn.
And let's set the background color to white and let's set the color of the text to dark gray and we'll also remove the underline so.
Let's type text decoration to none and let's also add some padding so just have padding of 8 pixels top and bottom and 24 pixels left and right and let's also add some margin top so i.
Just type margin top and let's set it to 10 pixels now the margin top is not being added over here because anchor tags are by default inline elements so we have to.
Change it into inline block so let's tap display of inline block and now we can see we have the margin top let's also set the font weight to bolt.
All right now the last thing we need to do is add the hover effect so in our original design we can see that we have this color change so let's go back and uh here i'll just.
Type card card content a dot btn colon hover and let's set the background color to h0f db and we'll also add a smooth transition.
So i'll just type transition of all to 400 milliseconds is right now let's go back and let's hover over this button and we have the horror.
Effect so everything is working all right now the last thing we need to do over here is to add a linear gradient background color over here so here we can see in the original design we have.
This black color at the bottom and as we go up we have it fade to a transparent color so we have to do the same over here in our design so let's go back to our css.
And let's go to the card content and here we'll just add a background color and we'll set it to linear gradient and we'll set the angle to zero degree.