i’m working in some project my problem was when i have tried to create a heart beating he doesn’t work correctly i don’t know what i miss in my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.container{
background:url(web.jpg) no-repeat;
background-size:cover;
height:100vh;
}
.navbar{
background:rgba(0,0,0,0.5);
height:70px;
width:100%;
}
ul{
list-style-type:none;
float:right;
line-height:70px;
margin:0 25px;
}
ul li{
display:inline-block;
color:white;
padding:0 15px;
}
li:hover{
background:rgb(144,15,451,0.5);
}
img{
height:80px;
width:80px;
}
img ,h1{
display:inline-block;
}
.myw{
color:rgb(255,255,255,0.8);
position:absolute;
top:27px;
}
.text{
color:rgba(255,255,255,0.5);
}
h3{
color:white;
}
.cont{
text-align:center;
margin-top:50px;
}
.heart{
background-color:pink;
height:80px;
width:80px;
transform:rotate(-45deg);
margin-left:45%;
margin-top:5%;
animation-name:hair;
animation-duration:1s;
animation-iteration-count:infinite;
}
.pist1{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:relative;
bottom:50px;
}
.pist2{
background-color:pink;
height:80px;
width:80px;
border-radius:50%;
position:absolute;
left:50px;
bottom:0px;
}
@keyframes hair{
50%{
height:50px;
width:50px;
}
}
footer{
background:rgba(0,0,0,0.5);
height:110px;
width:100%;
position: absolute;
bottom: 0;
}
@media (max-width : 800px){
.navbar{
background-color:red;
}
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li>Home</li>
<li>Accueille</li>
<li>About</li>
</ul>
<div class="active">
<img src="owl.png"><h1 class="myw">My Website</h1>
</div>
</nav>
<div class="cont">
<h1 class="text">Our service is more important !</h1>
<h3>We are the best</h3>
<div class="heart">
<div class="pist1"></div>
<div class="pist2"></div>
</div>
</div>
<footer>
<ul>
<li>Contact</li>
<li>Exemple 1</li>
</ul>
</footer>
</div>
</body>
</html>