Add animated cards to google sites

Code for ANIMATED CARD

<!DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

font-family: 'Roboto';font-size: 14px;

}

</style>

<style>

.card {

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

transition: 0.3s;

width: 100%;

}


.card:hover {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

}


.container {

padding: 2px 16px;

}

</style>

</head>

<body>


<div class="card">

<img src="https://drive.google.com/uc?export=view&id=1Rh9E1oZsoYWblRbkmMqg-p-PydaKlhho" alt="Avatar" style="width:100%">

<div class="container">

<h4><b> Your Title </b></h4>

<p>Your Description</p>

</div>

</div>


</body>

</html>


Instructions
 < Change Image

First copy the code in black The other part which is highlighted in blue , is the id
To get the id , open the file in google drive , after that click on the sharing or the link option

This is the Interface you will get 

The file id is this

After you have got your file id , simply paste it after the code 

https://drive.google.com/uc?export=view&id=1Rh9E1oZsoYWblRbkmMqg-p-PydaKlhho

Customize

In the code this is the section where you can customize it as you want The google drive link can be replaced with your link 

The title and The description is also replaceable