Chicken with a grolsch bottle

dabblet.css

/**
 * Chicken with a grolsch bottle
 */
@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo);
figure {
	margin:0;
}
.chick {
  width: 102px;
  height: 113px;
  background: #ffeb57;
  position: absolute;
  z-index: 2;
  margin: 100px;
  border-radius: 50%/60% 60% 40% 40%;
}
.chick:before {
  width: 70%;
  height: 35%;
  content: "";
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  bottom: 10px;
  background: #fff;
  opacity: .5;
  border-radius: 45% 41% 31% 36%/48% 36% 50% 50%;
}
.eye-left,
.eye-right {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #ffffff;
  margin: 0;
  margin-left: 10px;
  float: left;
  border: 2px solid #ffeb57;
}
.eye-left:before,
.eye-right:before {
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  margin-top: 15px;
  margin-left: 5px;
  border-radius: 100%;
  background: black;
}
.eye-right {
  margin-left: 23px;
}
.eye-right:before {
  margin-top: 7px;
  margin-left: 21px;
}
.lock {
  width: 8px;
  height: 20px;
  background: #ffeb57;
  position: absolute;
  top: -18px;
  transform: rotate(6deg);
  border-radius: 15px 15px 0px 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.lock:before,
.lock:after {
  width: 10px;
  height: 20px;
  position: absolute;
  content: "";
  border-radius: 15px 15px 0px 0px;
  left: -17px;
  right: 0;
  top: 5px;
  margin: 0 auto;
  background: #ffeb57;
  transform: rotate(-20deg);
}
.lock:after {
  width: 10px;
  transform: rotate(16deg);
  left: 0;
  right: -14px;
}
.beak {
  width: 0px;
  height: 0px;
  position: absolute;
  margin: -15px 50px;
  left: 0;
  right: 0;
  border-radius: 100%;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #ffd97b;
  top: 30%;
}
.beak:before {
  width: 15px;
  height: 1px;
  background: #ff0000;
  position: absolute;
  content: "";
  right: 0px;
  top: -0.5px;
  border-radius: 100%;
  opacity: 0.4;
}
.wing-left,
.wing-right {
  width: 8px;
  height: 20px;
  background: #ffeb57;
  position: absolute;
  top: -18px;
  transform: rotate(6deg);
  border-radius: 15px 15px 0px 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50px;
  left: -10px;
  right: inherit;
  transform: rotate(-90deg);
}
.wing-left:before,
.wing-right:before,
.wing-left:after,
.wing-right:after {
  width: 10px;
  height: 20px;
  position: absolute;
  content: "";
  border-radius: 15px 15px 0px 0px;
  left: -17px;
  right: 0;
  top: 5px;
  margin: 0 auto;
  background: #ffeb57;
  transform: rotate(-20deg);
}
.wing-left:after,
.wing-right:after {
  width: 10px;
  transform: rotate(16deg);
  left: 0;
  right: -14px;
}
.wing-left:before,
.wing-right:before {
  transform: rotate(-6deg);
}
.wing-left:after,
.wing-right:after {
  transform: rotate(10deg);
}
.wing-right {
  right: -10px;
  left: inherit;
  transform: rotate(90deg);
}
.leg-left,
.leg-right {
  width: 2px;
  height: 12px;
  background: #FF6600;
  position: absolute;
  left: 30px;
  bottom: -7px;
  border-radius: 5px;
}
.leg-left:after,
.leg-right:after {
  width: 8px;
  height: 4px;
  border-radius: 8px 8px 0 0;
  position: absolute;
  content: "";
  bottom: 0;
  right: -5px;
  border: 2px solid #FF6600;
  border-bottom: none;
}
.leg-right {
  left: inherit;
  right: 30px;
}
#grolsch-chick {
  position: absolute;
  bottom:0;
  left:100px;
  margin: 0;
  transform: rotate(-10deg);
  z-index: 5;
}
#grolsch-chick .chick {
  position: absolute;
  transform: scale(1.4);
  bottom: 75px;
  margin: 0;
}
#grolsch-chick .grolsch {
  width: 44px;
  height: 100px;
  background: green;
  margin: 300px auto 0;
  border-radius: 10%;
  border-top-left-radius: 50% 12%;
  border-top-right-radius: 50% 12%;
  position: absolute;
  bottom: 1px;
  left: 90px;
  transform: scale(0.5);
}
#grolsch-chick .grolsch:before {
  content: "";
  width: 22.2px;
  height: 0;
  position: absolute;
  border-bottom: 56px solid green;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  z-index: -1;
  top: -42px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 4;
}
#grolsch-chick .grolsch:after {
  position: absolute;
  content: "Grolsch";
  transform: rotate(-90deg);
  left: -12px;
  top: 36px;
  font-family: 'Swanky and Moo Moo', cursive;
  font-size: 23px;
  color: #ccc;
}
#grolsch-chick .grolsch .cork {
  width: 17px;
  height: 27px;
  border-radius: 0px 0px 50% 50%;
  border: 4px solid #bbb;
  border-top: none;
  z-index: 5;
  position: absolute;
  top: -42px;
  left: 14px;
  transform: skew(20deg);
  z-index: 6;
}
#grolsch-chick .grolsch .cork:before {
  width: 22px;
  height: 5px;
  content: "";
  position: absolute;
  background: #008a00;
  background: -moz-linear-gradient(top, #008a00 1%, #005700 33%, #002400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #008a00), color-stop(33%, #005700), color-stop(100%, #002400));
  background: -webkit-linear-gradient(top, #008a00 1%, #005700 33%, #002400 100%);
  background: -o-linear-gradient(top, #008a00 1%, #005700 33%, #002400 100%);
  background: -ms-linear-gradient(top, #008a00 1%, #005700 33%, #002400 100%);
  background: linear-gradient(to bottom, #008a00 1%, #005700 33%, #002400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008a00', endColorstr='#002400', GradientType=0);
  transform: skew(-20deg);
  left: -3px;
  z-index: 1;
}
#grolsch-chick .grolsch .cork:after {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e8b3cb;
  content: "";
  position: absolute;
  top: 20px;
  left: 3px;
  z-index: 7;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<section id="grolsch-chick">
	<figure class="chick">
		<figure class="lock"></figure>
		<figure class="eye-left"></figure>
		<figure class="eye-right"></figure>
		<figure class="beak"></figure>
		<figure class="wing-left"></figure>
		<figure class="wing-right"></figure>
		<figure class="leg-left"></figure>
		<figure class="leg-right"></figure>
		<figure class="grolsch">
			<figure class="cork"></figure>
		</figure>
	</figure>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}