Making Cute Panda using HTML and CSS

HTML CODE:

	<html>
	<head>
	<title>Panda</title>
	<link rel="stylesheet" href="panda.css">
	</head>
	<body>
	<div id="all">
	<div class="ear1"></div>
	<div class="ear2"></div>
	<div class="head">
	<div class="eye1"></div>
	<div class="eye2"></div>
	<div class="nose"></div>
	<div class="mouth">
	<div class="toung"></div>
	</div>
	</div>
	<div class="bottom">
	<div class="hand1"></div>
	<div class="hand2"></div>
	</div>
	</div>
	</body>
	</html>

view raw panda.html hosted with ❤ by GitHub

CSS CODE:

	body
	{
	background: #000000c9;
	}
	#all
	{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 0px 10px 5px black;
	}
	.ear1
	{
	width:80px;
	height:80px;
	background: black;
	border-radius: 50px;
	position: absolute;
	z-index: 1;
	top:-30px;
	left:-25px;
	border-top:5px solid white;
	border-left:5px solid white;
	box-shadow: inset 7px 7px 5px 0px gray;
	}
	.ear2
	{
	width:80px;
	height:80px;
	background: black;
	border-radius: 50px;
	position: absolute;
	z-index: 1;
	top:-30px;
	left:150px;
	border-top:5px solid white;
	border-right:5px solid white;
	box-shadow: inset -7px 7px 5px 0px gray;
	}
	.head
	{
	width:200px;
	height: 150px;
	background: white;
	border-radius: 70px 70px 0 0;
	position: relative;
	z-index: 2;
	}
	.head:before
	{
	content: "";
	position: absolute;
	width:220px;
	height: 8px;
	background: red;
	position: absolute;
	top:150px;
	left:-10px;
	border-radius: 10px;
	box-shadow: inset 0px 0px 5px gray;
	}
	.eye1
	{
	width:50px;
	height: 50px;
	background: black;
	border-radius: 30px;
	position: absolute;
	top:58px;
	left:28px;
	}
	.eye1:before
	{
	content: "";
	position: absolute;
	width:20px;
	height: 20px;
	background: white;
	border-radius: 20px;
	left:20px;
	animation-name: eye1;
	top:15px;animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 5s;
	}
	@keyframes eye1
	{
	0%{background: white}
	47%{background: white;}
	50%{background: transparent;}
	52%{background: white}
	100%{background: white;}
	}
	.eye2
	{
	width:60px;
	height: 60px;
	background: black;
	border-radius: 30px;
	position: absolute;
	top:50px;
	left:110px;
	}
	.eye2:before
	{
	content: "";
	position: absolute;
	width:35px;
	height: 35px;
	background: white;
	border-radius: 35px;
	left:20px;
	top:15px;
	animation-name: eye2;
	top:15px;animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 5s;
	}
	@keyframes eye2
	{
	0%{background: white}
	47%{background: white;}
	50%{background: transparent;}
	52%{background: white}
	100%{background: white;}
	}
	.nose
	{
	width:20px;
	height: 20px;
	background: black;
	position: absolute;
	top:100px;
	left:85px;
	border-radius: 20px;
	}
	.mouth
	{
	width: 60px;
	height: 60px;
	background: linear-gradient(to bottom,transparent 0px 35px,black 35px 60px );
	position: absolute;
	top:88px;
	left:70px;
	border-radius: 60px;
	overflow: hidden;
	}
	.toung
	{
	width:50px;
	height: 50px;
	background: red;
	border-radius: 50px;
	position: relative;
	top:45px;
	left:5px;
	animation-name: tt;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 5s;
	}
	@keyframes tt
	{
	0%{transform: translateY(0px);}
	50%{transform: translateY(8px);}
	100%{transform:translateY(0px);}
	}
	.bottom
	{
	width:200px;
	height:120px;
	background: darkblue;
	}
	.hand1
	{
	width:30px;
	height:70px;
	background: white;
	position: relative;
	float:left;
	left:20px;
	top:30px;
	border-radius: 0px 0px 20px 20px;
	box-shadow:0px 10px 18px black,inset 0px 10px 15px gray;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 2s;
	transform-origin: top;
	}
	@keyframes move
	{
	0%{transform: rotate(20deg)}
	50%{transform: rotate(-20deg);}
	100%{transform: rotate(20deg)}
	}
	.hand1:before
	{
	content:"";
	position: absolute;
	width:40px;
	height:25px;
	background: red;
	left:-5px;
	}

	.hand2
	{
	width:30px;
	height:70px;
	background: white;
	position: relative;
	float:right;
	top:30px;
	right:25px;
	border-radius: 0px 0px 20px 20px;
	box-shadow:0px 10px 18px black,inset 0px 10px 15px gray;
	animation-name: move2;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 2s;
	transform-origin: top;
	}
	@keyframes move2
	{
	0%{transform: rotate(20deg)}
	50%{transform: rotate(-20deg);}
	100%{transform: rotate(20deg)}
	}
	.hand2:before
	{
	content:"";
	position: absolute;
	width:40px;
	height:25px;
	background: red;
	left:-5px;
	}
	.bottom:before
	{
	content: "";
	position: absolute;
	width:60px;
	height:55px;
	background:linear-gradient(to right, white 0px 40px,darkblue 40px 60px);
	top:215px;
	left:-50px;
	border-radius: 60px 0 0 60px;
	}
	.bottom:after
	{
	content: "";
	position: absolute;
	width:60px;
	height:55px;
	background:linear-gradient(to right, transparent 0px 10px ,darkblue 10px 20px,white 20px 60px);
	top:215px;
	left:190px;
	border-radius: 0 60px 60px 0;
	}