Adventure Times CSS JACK ~ CODING-GREED

ADVENTURE - TIMES

JACK !

HTML:

	<html>

	<head>
	<title></title>
	</head>

	<body>
	<p>ADVENTURE &rightarrow; TIMES
	</p>
	<div class="all">
	<div class="ear"></div>
	<div class="bod">
	<div class="eye1"></div>
	<div class="eye2"></div>
	<svg class="nose" width="30px" height="30px">
	<ellipse cx="15px" cy="10px" rx="9px" ry="6px" style="fill:black;">
	</svg>
	<div class="nose2"></div>
	</div>
	<svg class="hand" width="300px" height="130px">
	<ellipse cx="200px" cy="100px" rx="90px" ry="35px" style="fill:#fbc02d;" stroke="black" stroke-width="2">
	</svg>
	<svg class="hand1" width="290px" height="120px">
	<ellipse cx="200px" cy="100px" rx="80px" ry="25px" style="fill:white" stroke="black"stroke-width="2">
	</svg>
	<div class="finger"></div>
	<svg class="leg" width="150px" height="170px">
	<ellipse cx="70px" cy="100px" rx="35px" ry="140px" style="fill:#fbc02d;" stroke="black" stroke-width="2">
	</svg>

	<svg class="leg1" width="150px" height="170px">
	<ellipse cx="70px" cy="100px" rx="25px" ry="130px" style="fill: white;" stroke="black" stroke-width="2">
	</svg>
	<div class="toe"></div>
	</div>
	</body>

	</html>

view raw jack.html hosted with ❤ by GitHub

CSS:

	body{
	background:white;
	}

	.all{
	position:absolute;
	top:40%;
	left:45%;
	}

	.ear{
	width:30px;
	height:50px;
	background: #fbc02d;
	position: absolute;
	border-radius: 20px;
	border:2px solid black;
	left:-12px;
	top:-10px;
	transform: rotate(15deg);
	}

	.ear:before{
	content: "";
	width:30px;
	height:50px;
	background: #fbc02d;
	position: absolute;
	border-radius: 20px;
	border:2px solid black;
	left:107.5px;
	top:-30px;
	transform: rotate(-30deg);
	}

	.bod{
	width:120px;
	height: 180px;
	background: #fbc02d;
	border-radius:60px 60px 35px 35px;
	position: relative;
	border:2px solid black;
	z-index: 3;
	top:-50px;
	}


	.eye1{
	width:35px;
	height: 35px;
	background: #0f0f0f;
	border-radius: 50px;
	position: relative;
	top:40px;
	left:19px;
	}

	.eye1:before{
	content: " ";
	width:25px;
	height: 25px;
	background: #ffff;
	border-radius: 50px;
	position: absolute;
	top:2px;
	left:3px;
	animation-name: gol_gol;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

	@keyframes gol_gol{
	0%{top:2px;left:3px;}
	10%{top:5px;left:3px;}
	20%{top:5.5px;left:3.5px;}
	30%{top:6px;left:4px;}
	40%{top:6.5px;left:4.5px;}
	50%{top:7px;left:5px;}
	60%{top:7px;left:6px;}
	70%{top:6px;left:7px;}
	80%{top:5.5px;left:6.5px;}
	90%{top:4px;left:5px;}
	100%{top:3px;left:4px;}

	}

	.eye2{
	width:35px;
	height: 35px;
	background: #0f0f0f;
	border-radius: 50px;
	position: relative;
	top:5px;
	left: 66px;
	}


	.eye2:before{
	content: " ";
	width:25px;
	height: 25px;
	background: #ffff;
	border-radius: 50px;
	position: absolute;
	top:2px;
	left:3px;
	animation-name: gol_gol;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

	@keyframes gol_gol1{
	0%{top:2px;left:3px;}
	100%{top:5px;left:3px;}
	}

	.eye2:after{
	content: " ";
	position: absolute;
	width: 25px;
	height:25px;
	background: #fbc02d;
	border: 2px solid black;
	border-radius: 50px;
	left:-20px;
	top:14px;
	}

	.nose{
	position: absolute;
	left: 45.5px;
	top:55px;
	z-index: 6;
	}

	.nose2{
	width:11px;
	height:25px;
	background: #fbc02d;
	border-left:2px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	border-radius:3px 2px 5px 10px;
	position:relative;
	left:43px;
	top:-4px;
	transform: rotate(15deg);
	z-index:5;
	}

	.nose2:before{
	content: " ";
	width:11px;
	height:25px;
	background: #fbc02d;
	border-left:2px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	border-radius:2px 3px 10px 5px;
	position:absolute;
	left:17px;
	top:-4px;
	transform: rotate(-27deg);
	}

	.hand{

	position: absolute;
	top:-20px;
	left:-137px;
	}

	.hand1{

	position: absolute;
	top:-20px;
	left:-137px;
	}

	.finger{
	width:15px;
	height:10px;
	border-radius: 20px;
	background: #fbc02d;
	border:2px solid black;
	position: absolute;
	top:105px;
	left:-6px;
	}

	.finger:before{
	content: "";
	width:15px;
	height:10px;
	border-radius: 20px;
	background: #fbc02d;
	border:2px solid black;
	position: absolute;
	left:116px;
	top:-5px;
	z-index: 2;
	}

	.leg{
	/background: green;/
	position: absolute;
	top:20px;
	left:-10px;
	z-index: 2;
	}

	.leg1{

	position: absolute;
	top:20px;
	left:-10px;
	z-index: 2;
	}

	.toe{
	width:32px;
	height:14px;
	border-radius: 20px;
	background: #fbc02d;
	border:2px solid black;
	position: absolute;
	top:188px;
	left:8px;
	transform: rotate(-8deg);
	z-index:1;
	}

	.toe:before{
	content: " ";
	width:32px;
	height:14px;
	border-radius: 20px;
	background: #fbc02d;
	border:2px solid black;
	position: absolute;
	top:7px;
	left:65px;
	transform: rotate(16deg);
	}
	p{
	font-weight:bolder;
	font-family:courier;
	font-size:2em;
	color:black;
	text-align:center;
	animation-name:shadow;
	animation-duration:1s;
	animation-iteration-count:infinite ;
	animation-timing-function:linear;
	}
	@keyframes shadow
	{
	from{text-shadow:0px 0px ;}
	to{text-shadow:4px 4px red,7px 7px gray;}
	}