crazyrohila/dabblet.css

## dabblet.css
/**
 * moving man.
 */

#man {
	position: relative;
	width:350px;
	transform: scale(.4);
	left: -15%;
}
@keyframes moving {
	from { transform: translate(0); }
	to {transform: translate(3200px); }
}
#walking {
	animation: moving 5s ease-in infinite;
}

@keyframes rotate {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
#rotate {
	animation: rotate 5s infinite;
}
/** face.**/
#face {
	width: 70px;
	height: 65px;
	border:5px solid brown;
	border-radius: 50%;
	position: relative;
	left: 36%;
}

.inner {
	position:absolute;
}
.eye {
	width:6px;
	height:3px;
	border: 2px solid black;
	border-radius: 50%;
	float: left;
	top:25%;

}
.lefteye {
	left:25%;
}
.righteye {
	right:25%;
}
.nose {
	width:5px;
	height:25px;
	background: brown;
	top:25%;
	left:47%;
}
.mouth {
	width:30px;
	height:5px;
	background: brown;
	left: 30%;
	bottom: 15%;
	border-bottom-left-radius: 20px 10px;
	border-bottom-right-radius: 20px 10px;
}
#neck {
	width:30px;
	height:20px;
	background: brown;
	position:relative;
	left:43%;
}
/** hands.**/
.bisep {
	width:40px;
	height:25px;
	position: absolute;
	top: 22%;
	background: green;
}
.bisep.lefthand {
	left:9%;
	border-top-left-radius: 40px 30px;
}
.bisep.righthand {
	right: 12%;
	border-top-right-radius: 40px 30px;
}
.arm {
	width: 30px;
	height: 120px;
	position: absolute;
	top: 25%;
	background-image: linear-gradient(top, green, gray);
	transform-origin: top;
}
.arm.lefthand {
	left: 9%;
	border-top-left-radius: 10px 20px;
	transform: rotate(10deg);
}
.arm.righthand {
	right: 12%;
	border-top-right-radius: 10px 20px;
	transform: rotate(-10deg);
}
/** main body. **/
#main-body {
	width:200px;
	height:200px;
	background-image: linear-gradient(top, gray, green);
	position: relative;
	left:20%;
	border-radius: 20px;
}
.button{
	width:5px;
	height:5px;
	border: 2px solid black;
	left: 45%;
	top: 10%;
	border-radius:50%;
}
.button:nth-child(2) {
	top: 30%;
}
.button:nth-child(3) {
	top: 50%;
}
.button:nth-child(4) {
	top: 70%;
}

/** legs and foot.**/
#legs {
	width: 200px;
	height: 130px;
	position: relative;
	left: 20%;
}
.leg {
	width: 30px;
	height: 100px;
	background: gray;
	position: absolute;
}
.leg.leftleg {
	left: 20%;
}
.leg.rightleg {
	right: 20%;
}
.foot {
	width: 60px;
	height: 30px;
	background: black;
	position: absolute;
	top: 100px;
	border-top-right-radius: 30px;
}
.foot.leftleg{
	left: 20%;
}
.foot.rightleg {
	right: 5%;
}
#board {
	width: 300px;
	height: 50px;
	background: red;
	position: relative;
	left: 10%;
}
.tyre {
	width: 40px;
	height: 40px;
	border-radius:50%;
	background-image: linear-gradient(top, red, green);
	float: left;
	position: absolute;
	top: 100%;
	left: 5%;
	transform: rotate(540deg);
	transition: transform 10s;
}
.tyre:nth-child(2) {
	left: 30%;
}
.tyre:nth-child(3) {
	left: 55%;
}
.tyre:nth-child(4) {
	left: 80%;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="man">
<div id="walking">
<div id="rotate">
	<div id="face">
		<div class="eye lefteye inner"></div>
		<div class=" nose inner"></div>
		<div class="eye righteye inner"></div>
		<div class="mouth inner"></div>
	</div>
	<div id="neck"></div>
	<div class="bisep lefthand"></div>
	<div class="arm lefthand"></div>
	<div class="bisep righthand"></div>
	<div class="arm righthand"></div>
	<div id="main-body">
		<div class="button inner"></div>
		<div class="button inner"></div>
		<div class="button inner"></div>
		<div class="button inner"></div>
	</div>
	<div id="legs">
		<div class="leg leftleg"></div>
		<div class="foot leftleg"></div>
		<div class="leg rightleg"></div>
		<div class="foot rightleg"></div>
	</div>
	<div id="board">
		<div class="tyre"></div>
		<div class="tyre"></div>
		<div class="tyre"></div>
		<div class="tyre"></div>
	</div>
</div>
</div>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* moving man.
	*/

	#man {
	position: relative;
	width:350px;
	transform: scale(.4);
	left: -15%;
	}
	@keyframes moving {
	from { transform: translate(0); }
	to {transform: translate(3200px); }
	}
	#walking {
	animation: moving 5s ease-in infinite;
	}

	@keyframes rotate {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
	}
	#rotate {
	animation: rotate 5s infinite;
	}
	/ face./
	#face {
	width: 70px;
	height: 65px;
	border:5px solid brown;
	border-radius: 50%;
	position: relative;
	left: 36%;
	}

	.inner {
	position:absolute;
	}
	.eye {
	width:6px;
	height:3px;
	border: 2px solid black;
	border-radius: 50%;
	float: left;
	top:25%;

	}
	.lefteye {
	left:25%;
	}
	.righteye {
	right:25%;
	}
	.nose {
	width:5px;
	height:25px;
	background: brown;
	top:25%;
	left:47%;
	}
	.mouth {
	width:30px;
	height:5px;
	background: brown;
	left: 30%;
	bottom: 15%;
	border-bottom-left-radius: 20px 10px;
	border-bottom-right-radius: 20px 10px;
	}
	#neck {
	width:30px;
	height:20px;
	background: brown;
	position:relative;
	left:43%;
	}
	/ hands./
	.bisep {
	width:40px;
	height:25px;
	position: absolute;
	top: 22%;
	background: green;
	}
	.bisep.lefthand {
	left:9%;
	border-top-left-radius: 40px 30px;
	}
	.bisep.righthand {
	right: 12%;
	border-top-right-radius: 40px 30px;
	}
	.arm {
	width: 30px;
	height: 120px;
	position: absolute;
	top: 25%;
	background-image: linear-gradient(top, green, gray);
	transform-origin: top;
	}
	.arm.lefthand {
	left: 9%;
	border-top-left-radius: 10px 20px;
	transform: rotate(10deg);
	}
	.arm.righthand {
	right: 12%;
	border-top-right-radius: 10px 20px;
	transform: rotate(-10deg);
	}
	/ main body. /
	#main-body {
	width:200px;
	height:200px;
	background-image: linear-gradient(top, gray, green);
	position: relative;
	left:20%;
	border-radius: 20px;
	}
	.button{
	width:5px;
	height:5px;
	border: 2px solid black;
	left: 45%;
	top: 10%;
	border-radius:50%;
	}
	.button:nth-child(2) {
	top: 30%;
	}
	.button:nth-child(3) {
	top: 50%;
	}
	.button:nth-child(4) {
	top: 70%;
	}

	/ legs and foot./
	#legs {
	width: 200px;
	height: 130px;
	position: relative;
	left: 20%;
	}
	.leg {
	width: 30px;
	height: 100px;
	background: gray;
	position: absolute;
	}
	.leg.leftleg {
	left: 20%;
	}
	.leg.rightleg {
	right: 20%;
	}
	.foot {
	width: 60px;
	height: 30px;
	background: black;
	position: absolute;
	top: 100px;
	border-top-right-radius: 30px;
	}
	.foot.leftleg{
	left: 20%;
	}
	.foot.rightleg {
	right: 5%;
	}
	#board {
	width: 300px;
	height: 50px;
	background: red;
	position: relative;
	left: 10%;
	}
	.tyre {
	width: 40px;
	height: 40px;
	border-radius:50%;
	background-image: linear-gradient(top, red, green);
	float: left;
	position: absolute;
	top: 100%;
	left: 5%;
	transform: rotate(540deg);
	transition: transform 10s;
	}
	.tyre:nth-child(2) {
	left: 30%;
	}
	.tyre:nth-child(3) {
	left: 55%;
	}
	.tyre:nth-child(4) {
	left: 80%;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="man">
	<div id="walking">
	<div id="rotate">
	<div id="face">
	<div class="eye lefteye inner"></div>
	<div class=" nose inner"></div>
	<div class="eye righteye inner"></div>
	<div class="mouth inner"></div>
	</div>
	<div id="neck"></div>
	<div class="bisep lefthand"></div>
	<div class="arm lefthand"></div>
	<div class="bisep righthand"></div>
	<div class="arm righthand"></div>
	<div id="main-body">
	<div class="button inner"></div>
	<div class="button inner"></div>
	<div class="button inner"></div>
	<div class="button inner"></div>
	</div>
	<div id="legs">
	<div class="leg leftleg"></div>
	<div class="foot leftleg"></div>
	<div class="leg rightleg"></div>
	<div class="foot rightleg"></div>
	</div>
	<div id="board">
	<div class="tyre"></div>
	<div class="tyre"></div>
	<div class="tyre"></div>
	<div class="tyre"></div>
	</div>
	</div>
	</div>
	</div>