<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/EricPorter/pen/LpwBNm?depth=everything&order=popularity&page=75&q=services&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html {
height: 100%;
background: #fbb343;
background: -webkit-linear-gradient(left, rgba(251, 180, 67, 1) 0%, rgba(247, 153, 13, 1) 100%);
background: linear-gradient(to right, rgba(251, 180, 67, 1) 0%, rgba(247, 153, 13, 1) 100%);
}
body {
background-color: brown;
background: -webkit-radial-gradient(center, ellipse cover, rgba(252, 252, 252, 1) 0%, rgba(254, 182, 69, 1) 100%);
background: -webkit-radial-gradient(center ellipse, rgba(252, 252, 252, 1) 0%, rgba(254, 182, 69, 1) 100%);
background: radial-gradient(ellipse at center, rgba(252, 252, 252, 1) 0%, rgba(254, 182, 69, 1) 100%);
background-repeat: no-repeat;
height: 438px;
}
.JT {
position: absolute;
top: 302px;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.JT-leg {
position: absolute;
top: 90px;
z-index: -100;
}
.JT-leg_left {
left: 48%;
}
.JT-leg_right {
left: 63%;
}
.JT-leg-shin {
width: 10px;
height: 40px;
background: #f8931f;
position: relative;
z-index: 100;
background: -webkit-linear-gradient(left, #f7ad59 0%, #f9a94a 100%);
background: linear-gradient(to right, #f7ad59 0%, #f9a94a 100%);
}
.JT-leg-foot {
width: 40px;
height: 10px;
background-color: #f8931f;
border-top-left-radius: 100% 100%;
border-top-right-radius: 100% 100%;
border-bottom-right-radius: 14% 100%;
border-bottom-left-radius: 14% 100%;
position: absolute;
z-index: 200;
bottom: -5px;
}
.JT-leg-foot-left {
left: -30px;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
position: absolute;
}
.JT-leg-foot-right {
left: 0px;
position: absolute;
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-animation: shake .5s infinite;
animation: shake .5s infinite;
}
.JT-feathers {
position: absolute;
z-index: 50;
left: -100%;
top: 20%;
-webkit-transform: tronsform-origin(left bottom);
transform: tronsform-origin(left bottom);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.JT-feather {
width: 180px;
height: 60px;
background-color: #aa6615;
border-top-left-radius: 40% 100%;
border-top-right-radius: 100% 70%;
border-bottom-right-radius: 100% 100%;
border-bottom-left-radius: 40% 100%;
box-shadow: 0px 0px 0px #000000;
position: absolute;
-webkit-transform-origin: right center;
transform-origin: right center;
}
.JT-feather-1 {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
background-color: #a95026;
}
.JT-feather-2 {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
background-color: #ab8427;
}
.JT-feather-3 {
-webkit-transform: rotate(60deg);
transform: rotate(60deg)
}
.JT-feather-4 {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
background-color: #f8931f;
}
.JT-feather-5 {
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
background-color: #f8931f;
}
.JT-feather-6 {
-webkit-transform: rotate(120deg);
transform: rotate(120deg)
}
.JT-feather-7 {
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
background-color: #ab8427;
}
.JT-feather-8 {
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
background-color: #a95026;
}
.JT-feather-9 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.JT-bod {
position: relative;
width: 120px;
height: 100px;
background-color: #7b2e12;
background: -webkit-linear-gradient(left, rgba(123, 46, 18, 1) 0%, rgba(64, 19, 3, 1) 100%);
background: linear-gradient(to right, rgba(123, 46, 18, 1) 0%, rgba(64, 19, 3, 1) 100%);
border-top-left-radius: 100% 100%;
border-top-right-radius: 100% 100%;
border-bottom-right-radius: 50% 80%;
border-bottom-left-radius: 50% 80%;
z-index: 900;
}
.JT-sign {
position: absolute;
z-index: 1300;
width: 140px;
height: 40px;
line-height: 45px;
left: -10px;
background: #fff;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(207, 205, 207, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(207, 205, 207, 1) 100%);
top: 45px;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 26px;
font-weight: bold;
}
.JT-sign::before {
content: "";
width: 20px;
height: 20px;
display: block;
position: absolute;
left: -10px;
top: -5px;
background-color: #7b2e12;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 30% 30%;
border-bottom-left-radius: 30% 30%;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.JT-sign::after {
content: "";
width: 20px;
height: 20px;
background-color: #7b2e12;
display: block;
position: absolute;
right: -12px;
top: 15px;
background-color: #7b2e12;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 30% 30%;
border-bottom-left-radius: 30% 30%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.JT-head {
position: absolute;
z-index: 1000;
left: 20%;
top: -50px;
width: 70px;
height: 75px;
background-color: #c4694a;
background: -webkit-linear-gradient(left, rgba(194, 142, 124, 1) 0%, rgba(196, 104, 74, 1) 100%);
background: linear-gradient(to right, rgba(194, 142, 124, 1) 0%, rgba(196, 104, 74, 1) 100%);
border-radius: 100%;
}
.JT-eye {
border-radius: 100%;
width: 50px;
height: 50px;
background: #fff;
position: absolute;
top: -55px;
z-index: 1050;
}
.JT-eye-left {
left: 15px;
}
.JT-eye-right {
left: 55px;
}
.JT-eye-iris {
position: absolute;
top: 36px;
left: 20px;
z-index: 1060;
border-radius: 100%;
width: 10px;
height: 10px;
background: #000;
}
.JT-beak {
position: absolute;
top: -14px;
left: 40px;
z-index: 1040;
width: 0;
height: 0;
border-style: solid;
border-width: 35px 20px 0 20px;
border-color: #f8d04f transparent transparent transparent;
border-radius: 200px;
}
.JT-hat {
position: absolute;
top: -115px;
left: 15px;
z-index: 1100;
-webkit-transform: tronsform-origin(left bottom);
transform: tronsform-origin(left bottom);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.JT-hat-pipe {
width: 70px;
height: 60px;
background-color: #000;
background: -webkit-linear-gradient(left, rgba(74, 74, 74, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to right, rgba(74, 74, 74, 1) 0%, rgba(0, 0, 0, 1) 100%);
border-bottom: 15px solid #fff;
z-index: 1200;
position: relative;
}
.JT-hat-brim {
position: absolute;
bottom: -15px;
left: -60%;
z-index: 1150;
width: 160px;
height: 26px;
background-color: #000;
background: -webkit-linear-gradient(left, rgba(74, 74, 74, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to right, rgba(74, 74, 74, 1) 0%, rgba(0, 0, 0, 1) 100%);
border-top-left-radius: 100% 100%;
border-top-right-radius: 100% 100%;
border-bottom-right-radius: 57% 32%;
border-bottom-left-radius: 66% 32%;
}
.JT-shake {
-webkit-animation: shake 3.5s infinite;
animation: shake 3.5s infinite;
}
.JT-rock {
-webkit-animation: rock 3.5s infinite;
animation: rock 3.5s infinite;
}
.JT-bounce {
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
@-webkit-keyframes shake {
0% {
-webkt-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkt-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
100% {
-webkt-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shake {
0% {
-webkt-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkt-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
100% {
-webkt-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes rock {
0% {
-webkit-transform: translate(10px);
transform: translate(10px);
}
50% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
100% {
-webkit-transform: translate(10px);
transform: translate(10px);
}
}
@keyframes rock {
0% {
-webkit-transform: translate(10px);
transform: translate(10px);
}
50% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
100% {
-webkit-transform: translate(10px);
transform: translate(10px);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
30% {
-webkit-transform: translate(0px, 3px);
transform: translate(0px, 3px);
}
75% {
-webkit-transform: translate(0px, -3px);
transform: translate(0px, -3px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes bounce {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
30% {
-webkit-transform: translate(0px, 3px);
transform: translate(0px, 3px);
}
75% {
-webkit-transform: translate(0px, -3px);
transform: translate(0px, -3px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}</style></head><body>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<div class="JT">
<div class="JT-leg JT-leg_left">
<div class="JT-leg-shin"></div>
<div class="JT-leg-foot JT-leg-foot-left"></div>
</div>
<div class="JT-leg JT-leg_right">
<div class="JT-leg-shin"></div>
<div class="JT-leg-foot JT-leg-foot-right"></div>
</div>
<div class="JT-bounce">
<div class="JT-rock">
<div class="JT-shake">
<div class="JT-feathers">
<div class="JT-feather JT-feather-0"></div>
<div class="JT-feather JT-feather-1"></div>
<div class="JT-feather JT-feather-2"></div>
<div class="JT-feather JT-feather-3"></div>
<div class="JT-feather JT-feather-4"></div>
<div class="JT-feather JT-feather-9"></div>
<div class="JT-feather JT-feather-8"></div>
<div class="JT-feather JT-feather-7"></div>
<div class="JT-feather JT-feather-6"></div>
<div class="JT-feather JT-feather-5"></div>
</div>
<div class="JT-bod"></div>
<div class="JT-sign">EET BEEF</div>
</div>
<div class="JT-head"></div>
<div class="JT-eye JT-eye-right">
<div class="JT-eye-iris"></div>
</div>
<div class="JT-eye JT-eye-left">
<div class="JT-eye-iris"></div>
</div>
<div class="JT-beak"></div>
<div class="JT-hat">
<div class="JT-hat-brim"></div>
<div class="JT-hat-pipe"></div>
</div>
</div>
</div>
</div>
</body></html>
