monster

by Revenant94

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Monster</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>


<div class="wrapstyle">
	
<div class="monster">
	<div class="eyes">
		<div></div>
		<div></div>
	</div>
	<div class="pupil">
	<div></div>
	<div></div>
	</div>

	<div class="mouth"></div>

	<div class="fang">
		<div></div>
		<div></div>
	</div>
<div class="horns">
	<div></div>
	<div></div>
</div>
<div class="spit"></div>

</div>

<div class="puddle"></div>

</div>	



</body>
</html>

CSS

* {
margin:0;
}

.wrapstyle {
background: #FBE7C5;
width:1355px;
height:545px;

}

.monster {
background: #F45B69;
width: 200px;
height:200px;
border-radius: 50%;
position:relative;
left:550px;
top:150px;
box-shadow: inset -5px -8px 35px -10px black;
}

.eyes div {
 background:white;
 display:inline-block;
 width:40px;
 height: 40px;
 border-radius: 50%;
 position: relative;
 top:60px;
 left: 35px;
 margin-right: 50px;
 z-index: 2;
}

.pupil div {
background:#58C5C5;
 display:inline-block;
 width:30px;
 height: 30px;
 border-radius: 50%;
 position: relative;
 top:22px;
 left: 45px;
 margin-right: 51px;
 z-index: 3;
}
.mouth {
border:#603335 solid 2px;
width:80px;
height:0;
position: relative;
top: 40px;
margin:0 auto 0 auto;

}

.fang div {
background:linear-gradient(to top, white 50%, #F45B69 50%);
 display:inline-block;
 width:9px;
 height: 30px;
 position: relative;
 border-radius: 10px 0 0 10px;
 top:20px;
 left: 80px;
 margin-right: 25px;
 
}

.fang div:last-child {
transform: scale(-1, 1);
}

.horns div {
background:#F45B69;
 display:inline-block;
 width:25px;
 height: 60px;
 position: relative;
 border-radius: 40px 0 0 40px;
 top:-115px;
 left: 30px;
 margin-right: 90px;
 z-index: 1;
}

.horns div:last-child {
transform: scale(-1, 1);
margin-right: 0;
}

.spit {
background: #C6E0EB;
width: 5px;
height:50px;
position:relative;
top:-62px;
left:66px;
border-radius: 2px 2px 2px 2px;
}

.spit::after {
content: '';
background: #C6E0EB;
width:6px;
height:15px;
position:relative;
top:65px;
left:0;
border-radius: 2px 2px 2px 2px;
display: block;
}

.puddle {
background: #C6E0EB;
width:200px;
height:40px;
border-radius: 80%;
position: absolute;
left:550px;
top:370px;
box-shadow: 5px 2px 5px 1px #B6C3C2;
}

.monster:hover .mouth {
 height:40px;
 width:120px;
 background:#603335;
 border-radius:0 0 70px 70px;
 transition:width 2s ease, height 1s, background-color 0s;
}

.monster:hover .horns div {
  top:-155px;
}

.monster:hover .fang div {
  top:-20px;
}