<div class="broom">
  <div class="stick"></div> 
  <div class="fibers-container">
    <div class="fiber-top"></div>
    <div class="fibers">
      <span class="fiber string-1"></span>
      <span class="fiber string-2"></span>
      <span class="fiber string-3"></span>
      <span class="fiber string-4"></span>
      <span class="fiber string-5"></span>
      <span class="fiber string-6"></span>
    </div>
  </div>
</div>

<section class="pumpkin-container">
  <button class="pumpkin">
    <div class="pumpkin-eye pumpkin-eye-1">    </div>
    <div class="pumpkin-eye pumpkin-eye-2"></div>
    <div class="mouth"></div>
  </button>
</section>
<div class="text">You can click the pumkin, but if you resize it bad things may happen!</div>
.broom {
  padding:50px 0;
}
.stick {
  height: 100px;
  width: 5px;
  background-color: black;
  margin: auto;
  border-top-left-radius: 30%;
  border-top-right-radius: 30%;
}
.fibers-container {
  text-align: center;
  .fiber-top{
    width: 18px;
    height: 3px;
    background-color: black;
    display: block;
    margin: auto;
  }
  .fibers {
    display: inline-block;
    margin-top: -5px;
    .fiber{
      height: 30px;
      width: 1px;
      background-color: black;
      margin: 2px;
      display: block;
      float: left;
    }
    .string{
      &-1{
        transform: rotate(20deg);
      }
      &-2{
        transform: rotate(12deg);
      }
      &-3{
        transform: rotate(4deg);
      }
      &-4{
        transform: rotate(-4deg);
      }
      &-5{
        transform: rotate(-12deg);
      }
      &-6{
        transform: rotate(-18deg);
      }
    }
  }
}
// [draggable=true] {
//     cursor: move;
// }
.pumpkin-container {
    overflow: scroll;
    resize: both;
    width: 20%;
    min-height: 140px;
    max-height: 500px;
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    margin: auto;
    padding: 20px;
}
.pumpkin {
  cursor: pointer;
  background-color: #f19308;
  border-radius: 45% 45%;
  height: 100%;
  min-height: 130px;
  width: 80%;
  font-size: 18px;
  display: block;
  margin: auto;
  // margin-top: 50px;
  padding-topy: 50px;
  border: none;
  position: relative;
  border: 2px solid rgba(0,0,0,0.2);

  &:before{
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    height: 10px;
    width: 4px;
    border: 3px solid #5a7d5b;
    background-color: #5a7d5b;
    border-top-left-radius: 40% 20px;
    border-top-right-radius: -40% -20px;
  }
  &:after {
    content: '';
    position: absolute;
    width: 55%;
    height: 100%;
    left: 22%;
    top: 0;
    border-left: 2px solid rgba(0,0,0,.3);
        border-right: 2px solid rgba(0,0,0,.3);
    border-radius: 43%;
  }
  &:focus {
    outline: none;
  }
  .pumpkin-eye {
    height: 20px;
    width: 20px;
    background: black;
    border-radius: 50%;
    // float: left;
    display: inline-block;
    float: none;
    &-1 {
      margin-left: 2px;
    }
    &-2 {
      margin-left: 20px;
    }
  }
  .mouth {
    height: 30px;
    width: 60px;
    border: 1px solid black;
    border-radius: 40%;
    margin: auto;
    background: black;
  }
}

.text {
  text-align: center;
  padding-top: 20px;
}

.flying {
  animation: fly 3s linear;
 
}

@keyframes fly {
  0%   { 
    transform: translate(0, 0) rotate(70deg);
  }
  49% {
    opacity: 1;
  }
  50% { 
    transform: translate(55%, 90%) rotate(90deg); 
    opacity: 0;
 
  }
  51% { 
    transform: translate(-55%, 90%) rotate(90deg); 
    opacity: 0;
  }
  52% {

    opacity: 1;

  }
  90% { 
    transform: translate(0%, 0) rotate(10deg); 
    opacity: 0.8;
  }
  100% { 
    transform: translate(0%, 0) rotate(0deg); 
  }
  
}
View Compiled
function fly() { 
  
  document.querySelector('.broom').classList.add('flying');
  
  setTimeout(function(){
    document.querySelector('.broom').classList.remove('flying');
  }, 3000);

}

document.querySelector('.pumpkin').addEventListener('click', function () {
  fly();
});

// document.querySelector('.pumpkin-container').addEventListener('click', function () {
//   // alert('hi');
//   // if(document.querySelector('.pumpkin-container').width>3) {
//     alert('wide');
//   // }
// });

var pc = document.querySelector('.pumpkin-container');

pc.addEventListener('click', function () {
    
    // console.log(pc.offsetWidth);
  if (pc.offsetWidth>400) {
    pc.style.background = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/220px-Cat03.jpg') center center no-repeat";
    pc.style.backgroundSize = "100%";
    
    document.querySelector('.pumpkin').style.display = "none";
  }
  else {
    document.querySelector('.pumpkin').style.display = "block";
    pc.style.background = "none";
  }
  
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.