<div class="doge">
  <div class="doge__trunk"></div>
  <div class="doge__tail"></div>
  <div class="doge__head">
    <div class="head__left-ear"></div>
    <div class="head__right-ear"></div>
    <div class="head__left-eye"></div>
    <div class="head__right-eye"></div>
    <div class="head__mouth"></div>
    <div class="head__nose"></div>
  </div>  
  <div class="doge__collar">
    <div class="doge__medal"></div> 
  </div>
  <div class="doge__front-left-paw"></div>
  <div class="doge__front-right-paw"></div>
  <div class="doge__back-left-paw"></div>
  <div class="doge__back-right-paw"></div>
</div>
<div class="doge">
  <div class="doge__trunk"></div>
  <div class="doge__tail"></div>
  <div class="doge__head">
    <div class="head__left-ear"></div>
    <div class="head__right-ear"></div>
    <div class="head__left-eye"></div>
    <div class="head__right-eye"></div>
    <div class="head__mouth"></div>
    <div class="head__nose"></div>
  </div>  
  <div class="doge__collar">
    <div class="doge__medal"></div> 
  </div>
  <div class="doge__front-left-paw"></div>
  <div class="doge__front-right-paw"></div>
  <div class="doge__back-left-paw"></div>
  <div class="doge__back-right-paw"></div>
</div>


<div id="dog-container">
  





<div id="white-arrow"> </div>
<div id="rectangle"> <p id="replace-text" onclick="showName()"> Click here </p>

</div>
$green: #38cd9f;
$dg: #fef9e8;
$sal: #f27779;
$dark: #2d2d2d;
$light: #808080;
$nose: #232323;
$front-paw: #fef9e8;
$back-paw: #f1e9d3;
$medal: #f7e191;

@mixin transform($arg) {
	transform: $arg;
	-webkit-transform: $arg;
	-moz-transform: $arg;
	-o-transform: $arg;
	-ms-transform: $arg;
}

@keyframes dog-head {
  0% {
      @include transform(rotate(80deg));
  }
  
  20% {
      @include transform(rotate(80deg));
  }
  
  60% {
      @include transform(rotate(90deg));
  }
  
  100% {
      @include transform(rotate(80deg));
  }
}


@keyframes paw {
  0% {
      @include transform(rotate(-10deg) translate(0, -10px));          
  }
  
  20% {
      @include transform(rotate(20deg) translate(0, 0));
  }  
  
  100% {
      @include transform(rotate(-10deg) translate(0, -10px));
  }
}

@keyframes shadow {
  0% {
      @include transform(scale(1) rotate(-5deg));          
  }
  
  50% {
      @include transform(scale(1.04) rotate(-5deg));          
  }
  
  100% {
      @include transform(scale(1) rotate(-5deg));          
  }
}  

@keyframes run {
  0% {
      @include transform(scale(1));          
  }
  
  20% {
      @include transform(scale(1.02) translate(0, -3px));
  }  
  
  100% {
      @include transform(scale(1));
  }
}

@keyframes eye {
  0% {
      @include transform(translate(0, 0px));          
  }
  
  38% {
      @include transform(translate(0, 0px));          
  }
  
  40% {
      @include transform(translate(-3px, 5px));
  } 
  
  45% {
      @include transform(translate(6px, 9px));
  }
  
  92% {
      @include transform(translate(6px, 9px));
  }
  
  95% {
      @include transform(translate(-3px, 5px));
  } 
  
  100% {
      @include transform(translate(0, 0px));
  }
}

@keyframes medal {
  0% {
    bottom: 0px;
    left: 50px;
  }
  
  60% {
    bottom: 10px;
    left: 55px;
  }
  
  100% {
    bottom: 0px;
    left: 50px;
  }
}

body {
  background: $green;
}

.doge {
  position: absolute;
  left: 50%;
  top: 50%;
  @include transform(translate(-50%, -50%));
  
  &__trunk {
    width: 154px;
    height: 120px;
    border-radius: 47%;
    background: $dg;
    @include transform(rotate(-15deg));
    z-index: 5;
    animation: run 0.4s infinite 0.2s cubic-bezier(0.4,     0.34, 0.16, 0.79);
  }
  
  &__tail {
    position: absolute;
    width: 30px;
    height: 28px;
    background: $dg;
    right: -10px;
    top: 13px;
    border-radius: 50%;
    animation: run 0.4s infinite 0.21s cubic-bezier(0.4,     0.34, 0.16, 0.79);
  }
  
  &__collar {
      width: 60px;
      height: 77px;
      background: $sal;
      top: 10px;
      left: 10px;
      position: absolute;
      border-radius: 50%;
      @include transform(rotate(60deg));
      z-index: 9;      
    
      .doge__medal {
        width: 21px;
        height: 18px;
        background: $medal;
        border-radius: 50%;
        bottom: 0px;
        left: 50px;
        z-index: 999;
        position: absolute;
        animation: medal 2.2s infinite 0.5s cubic-bezier(0.4, 0.34, 0.16, 0.79);
      }
    }
  
  &__head {
    border-radius: 47%;
    position: absolute;
    background: $dg;
    @include transform(rotate(80deg));    
    width: 105px;
    height: 110px;
    top: -32px;
    left: -30px;
    z-index: 13;
    animation: dog-head 3.8s infinite 1s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    
    .head__left-ear {
      position: absolute;
      border: 32px solid transparent;
      border-left: 30px solid $dark;
      border-radius: 10px;
      @include transform(rotate(-110deg));
      top: -55px;
      right: 40px;
    }
    
    .head__right-ear {
      position: absolute;
      border: 32px solid transparent;
      border-left: 30px solid $dark;
      border-radius: 10px;
      @include transform(rotate(-250deg));
      bottom: -55px;
      right: 40px;
    }
    
    .head__left-eye {
      position: absolute;
      height: 22px;
      width: 22px;
      background: $dark;
      border-radius: 50%;
      top: 12px;
      left: 38px;
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        z-index: 99999;
        top: 4px;
        left: 6px;
        animation: eye 10s infinite 0.18s linear;
      }
    }
    
    .head__right-eye {
      position: absolute;
      height: 22px;
      width: 22px;
      background: $dark;
      border-radius: 50%;
      top: 75px;
      left: 38px;
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        z-index: 99999;
        top: 4px;
        left: 6px;
        animation: eye 10s infinite 0.18s linear;
      }
    }
    
    .head__mouth {
      position: absolute;
      @include transform(rotate(-180deg));
      border: 34px solid transparent;
      border-left: 48px solid #434244;
      border-radius: 17px;
      bottom: 23px;
      right: 2px;
      
      &:after {
        content: "";
        position: absolute;
        @include transform(rotate(0deg));
        border: 18px solid transparent;
        border-left: 18px solid rgba(43, 46, 42, 0.6);
        border-radius: 17px;
        bottom: -18px;
        right: 13px;
      }
    }
    
    .head__nose {
        position: absolute;
        @include transform(rotate(0deg));
        border: 10px solid transparent;
        border-left: 10px solid $nose;
        border-radius: 17px;
        bottom: 47px;
        right: 19px;
    }
  }
  
  &__front-left-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -29px;
    left: 19px;
    background: $front-paw;
    animation: paw 0.8s infinite 0.18s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__front-right-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -34px;
    left: 75px;
    background: $front-paw;
    animation: paw 0.8s infinite 0s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__back-left-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -13px;
    left: 117px;
    background: $back-paw;
    z-index: -1;
    animation: paw 0.8s infinite 0.3s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__back-right-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -11px;
    left: 52px;
    background: $back-paw;
    z-index: -1;
    animation: paw 0.9s infinite 0.2s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &:after {
content: "";
    position: absolute;
    display: block;
    width: 190px;
    height: 60px;
    border-radius: 90%;
    animation: shadow 0.4s infinite 0.4s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    background: rgba(0, 0, 0, 0.24);
    z-index: -2;
    @include transform(rotate(-5deg));
    top: 102px;
    left: -10px;
  }
}

$green: #38cd9f;
$dg: #fef9e8;
$sal: #f27779;
$dark: #2d2d2d;
$light: #808080;
$nose: #232323;
$front-paw: #fef9e8;
$back-paw: #f1e9d3;
$medal: #f7e191;

@mixin transform($arg) {
	transform: $arg;
	-webkit-transform: $arg;
	-moz-transform: $arg;
	-o-transform: $arg;
	-ms-transform: $arg;
}

@keyframes dog-head {
  0% {
      @include transform(rotate(80deg));
  }
  
  20% {
      @include transform(rotate(80deg));
  }
  
  60% {
      @include transform(rotate(90deg));
  }
  
  100% {
      @include transform(rotate(80deg));
  }
}


@keyframes paw {
  0% {
      @include transform(rotate(-10deg) translate(0, -10px));          
  }
  
  20% {
      @include transform(rotate(20deg) translate(0, 0));
  }  
  
  100% {
      @include transform(rotate(-10deg) translate(0, -10px));
  }
}

@keyframes shadow {
  0% {
      @include transform(scale(1) rotate(-5deg));          
  }
  
  50% {
      @include transform(scale(1.04) rotate(-5deg));          
  }
  
  100% {
      @include transform(scale(1) rotate(-5deg));          
  }
}  

@keyframes run {
  0% {
      @include transform(scale(1));          
  }
  
  20% {
      @include transform(scale(1.02) translate(0, -3px));
  }  
  
  100% {
      @include transform(scale(1));
  }
}

@keyframes eye {
  0% {
      @include transform(translate(0, 0px));          
  }
  
  38% {
      @include transform(translate(0, 0px));          
  }
  
  40% {
      @include transform(translate(-3px, 5px));
  } 
  
  45% {
      @include transform(translate(6px, 9px));
  }
  
  92% {
      @include transform(translate(6px, 9px));
  }
  
  95% {
      @include transform(translate(-3px, 5px));
  } 
  
  100% {
      @include transform(translate(0, 0px));
  }
}

@keyframes medal {
  0% {
    bottom: 0px;
    left: 50px;
  }
  
  60% {
    bottom: 10px;
    left: 55px;
  }
  
  100% {
    bottom: 0px;
    left: 50px;
  }
}

body {
  background: $green;
}

.doge {
  position: absolute;
  left: 50%;
  top: 50%;
  @include transform(translate(-50%, -50%));
  
  &__trunk {
    width: 154px;
    height: 120px;
    border-radius: 47%;
    background: $dg;
    @include transform(rotate(-15deg));
    z-index: 5;
    animation: run 0.4s infinite 0.2s cubic-bezier(0.4,     0.34, 0.16, 0.79);
  }
  
  &__tail {
    position: absolute;
    width: 30px;
    height: 28px;
    background: $dg;
    right: -10px;
    top: 13px;
    border-radius: 50%;
    animation: run 0.4s infinite 0.21s cubic-bezier(0.4,     0.34, 0.16, 0.79);
  }
  
  &__collar {
      width: 60px;
      height: 77px;
      background: $sal;
      top: 10px;
      left: 10px;
      position: absolute;
      border-radius: 50%;
      @include transform(rotate(60deg));
      z-index: 9;      
    
      .doge__medal {
        width: 21px;
        height: 18px;
        background: $medal;
        border-radius: 50%;
        bottom: 0px;
        left: 50px;
        z-index: 999;
        position: absolute;
        animation: medal 2.2s infinite 0.5s cubic-bezier(0.4, 0.34, 0.16, 0.79);
      }
    }
  
  &__head {
    border-radius: 47%;
    position: absolute;
    background: $dg;
    @include transform(rotate(80deg));    
    width: 105px;
    height: 110px;
    top: -32px;
    left: -30px;
    z-index: 13;
    animation: dog-head 3.8s infinite 1s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    
    .head__left-ear {
      position: absolute;
      border: 32px solid transparent;
      border-left: 30px solid $dark;
      border-radius: 10px;
      @include transform(rotate(-110deg));
      top: -55px;
      right: 40px;
    }
    
    .head__right-ear {
      position: absolute;
      border: 32px solid transparent;
      border-left: 30px solid $dark;
      border-radius: 10px;
      @include transform(rotate(-250deg));
      bottom: -55px;
      right: 40px;
    }
    
    .head__left-eye {
      position: absolute;
      height: 22px;
      width: 22px;
      background: $dark;
      border-radius: 50%;
      top: 12px;
      left: 38px;
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        z-index: 99999;
        top: 4px;
        left: 6px;
        animation: eye 10s infinite 0.18s linear;
      }
    }
    
    .head__right-eye {
      position: absolute;
      height: 22px;
      width: 22px;
      background: $dark;
      border-radius: 50%;
      top: 75px;
      left: 38px;
      
      &:before {
        content: "";
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
        z-index: 99999;
        top: 4px;
        left: 6px;
        animation: eye 10s infinite 0.18s linear;
      }
    }
    
    .head__mouth {
      position: absolute;
      @include transform(rotate(-180deg));
      border: 34px solid transparent;
      border-left: 48px solid #434244;
      border-radius: 17px;
      bottom: 23px;
      right: 2px;
      
      &:after {
        content: "";
        position: absolute;
        @include transform(rotate(0deg));
        border: 18px solid transparent;
        border-left: 18px solid rgba(43, 46, 42, 0.6);
        border-radius: 17px;
        bottom: -18px;
        right: 13px;
      }
    }
    
    .head__nose {
        position: absolute;
        @include transform(rotate(0deg));
        border: 10px solid transparent;
        border-left: 10px solid $nose;
        border-radius: 17px;
        bottom: 47px;
        right: 19px;
    }
  }
  
  &__front-left-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -29px;
    left: 19px;
    background: $front-paw;
    animation: paw 0.8s infinite 0.18s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__front-right-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -34px;
    left: 75px;
    background: $front-paw;
    animation: paw 0.8s infinite 0s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__back-left-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -13px;
    left: 117px;
    background: $back-paw;
    z-index: -1;
    animation: paw 0.8s infinite 0.3s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &__back-right-paw {
    width: 20px;
    height: 60px;
    border-radius: 10px;
    position: absolute;
    bottom: -11px;
    left: 52px;
    background: $back-paw;
    z-index: -1;
    animation: paw 0.9s infinite 0.2s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    transform-origin: 50% 0%;
  }
  
  &:after {
content: "";
    position: absolute;
    display: block;
    width: 190px;
    height: 60px;
    border-radius: 90%;
    animation: shadow 0.4s infinite 0.4s cubic-bezier(0.4, 0.34, 0.16, 0.79);
    background: rgba(0, 0, 0, 0.24);
    z-index: -2;
    @include transform(rotate(-5deg));
    top: 102px;
    left: -10px;
  }
}
body {
  background-color: #a0a0a0;
}

#dog-container {
  width: 800px;
  height: 300px;
  margin: auto;
}

#head {
  width: 110px;
  height: 90px;
  background-color: #f6f6f8;
  border-radius: 40% 40% 10% 10%;
  position: absolute;
  top: 100px;
  left: 500px;
}

#left-eye, #right-eye {
  width: 10px;
  height: 15px;
  background-color: #a0a0a0;
  border-radius: 100%;
  display: inline;
  position: absolute;
  top: 35px;
  overflow:hidden;
}

#left-eye {
  left: 33px;
}

#right-eye {
  left: 63px;
}

#nose {
  width: 10px;
  height: 8px;
  background-color: #000;
  border-radius: 100%;
  position: absolute;
  top: 56px;
  left: 47px;
  z-index: 4;
}

#njuska {
  width: 100px;
  height: 30px;
  background-color: #63461a;
  border-radius: 100% 100% 10% 10%;
  position: absolute;
  top: 60px;
  left: 4.5px;
  z-index: 3;
}

#right-ear, #left-ear {
  width: 50px;
  height: 50px;
  border-radius: 10%;
  background-color: #f6f6f8;
  position: absolute;
  top: 110px;
}

#right-ear-lower, #left-ear-lower {
  position: absolute;
  top: 110px;
  background-color: #e6ebf3;
  border-radius: 10%;
  width: 40px;
  height: 40px;
}

#left-ear {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  left: 600px;
}

#left-ear-lower {
  clip-path: polygon(0 0, 0 100%, 100% 0);
  left: 460px;
}

#right-ear {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  left: 460px;
}

#right-ear-lower {
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  border-radius: 10%;
  position: absolute;
  top: 110px;
  left: 610px;
}

#dog-body {
  width: 90px;
  height: 80px;
  background-color: #f6f6f8;
  position: absolute;
  top: 195px;
  left: 512px;
  border-radius: 10%;
}

#left-leg, #right-leg {
  width: 20px;
  height: 60px;
  background-color: #f6f6f8;
  border: 2px solid;
  border-color: #f6f6f8 #a0a0a0 #a0a0a0 #a0a0a0;
  border-radius: 0 0 40% 40%;
  position: absolute;
  top: 225px;
}

#left-leg {
  left: 525px;
}

#right-leg {
  left: 565px;
}

#tail {
  width: 30px;
  height: 70px;
  background-color: #f6f6f8;
  position: absolute;
  top: 200px;
  left: 625px;
  border-radius: 70% 0% 70% 0%;
  transform: rotate(45deg);
}

#replace-text {
  padding: 10px 5px;
  font-family: 'Roboto Mono';
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
}

#rectangle {
  width: 300px;
  height: 100px;
  background-color: #fff;
  position: absolute;
  left: 1050px;
  top: 200px;
  border-radius: 10px;
}

#white-arrow {
  width: 60px;
  height: 60px;
  background-color: #FFF;
  position: absolute;
  left: 1000px;
  top: 260px;
  clip-path: polygon(100% 0, 4% 100%, 100% 64%);
  border-radius: 5px;
}

#follower{
  position: relative;
  background-color: #000;
  width: 4px;
  height: 4px;
  border-radius: 50px;
}
#follower2{
  position: relative;
  background-color: #000;
  width: 4px;
  height: 4px;
  border-radius: 50px;
}
View Compiled
function showName() {

  var question = prompt("What is your name?");
  var name = question.toUpperCase();


if (name.length > 10) {
  document.getElementById("replace-text").innerHTML = "your name is too long";
} else {
    if (name === "JOSIP") {
      document.getElementById("replace-text").innerHTML = "HELLO " + name + " &lt;3 ";
    } else {
      document.getElementById("replace-text").innerHTML = "HELLO" + " " + name +  " "+ "will you donate?";
    }
  }
}

var mouseX = 0, mouseY = 0, limitX = 8-2, limitY = 12-2;
$(window).mousemove(function(e){
  var offset = $('#left-eye, #right-eye').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

var follower = $("#follower, #follower2");
var xp = 0, yp = 0;
var loop = setInterval(function(){

    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});
    
}, 10);

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.