Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="contenedor">
  <div class="nube-1"></div>
  <div class="nube-2"></div>
  <div class="cuerpo">
      <div class="cabeza"></div>
      <div class="ojos">
       <p class="ojo-izq">
         <spam class="retina-izq">
           <span class="iris-izq">
             <spam class="brillo-izq"></spam>
           </span>
         </spam>
       </p>
       <p class="ojo-der">
         <spam class="retina-der">
           <span class="iris-der">
             <spam class="brillo-der"></spam>
           </span>
         </spam>
       </p>
      </div>
      <div class="pico">
      </div>
      <div class="pico-abajo"></div>
      <div class="plumas">
              <div class="pluma-left"></div>
              <div class="pluma-right"></div>
              <div class="pluma-center"></div>
      </div>
      
      <div class="ala-izq"></div>
      <div class="ala-der"></div> 
      <div class="pies">
        
      </div>
      <div class="pies-d">
        
      </div>
        
  </div>
      
  
</div>

              
            
!

CSS

              
                body{
   background #2b71c9

}
.contenedor{
  height 100vh
  display grid
  place-items center 
  

}
.nube-1{
  background:white;
  width:280px;
  height:80px;
  border-radius:50px;
  position:relative;
   box-shadow: inset 1px 20px 20px 0px #2b71c9;
  left:200px;
  transition:5s;
  animation: 15s infinite alternate nube-1;
  z-index:999;
}
.nube-1:after{
  content:""
  position:absolute;
  width:100px;
  height:100px;
  background:white;
  border-radius:50%;
  top:-50%;
  left:30px;
  box-shadow: inset 1px 20px 20px 0px #2b71c9;
  
}
.nube-1:before{
  content:""
  position:absolute;
  width:150px;
  height:150px;
  background:white;
  border-radius:50%;
  top:-90%;
  left:85px;
   box-shadow: inset 1px 20px 20px 0px #2b71c9;
   
}

.nube-2{
  background:white;
  width:280px;
  height:80px;
  border-radius:50px;
  position:relative;
   box-shadow: inset 1px 20px 20px 0px #2b71c9;
   right:200px;
   z-index:999;
    animation: 15s infinite alternate nube-2;
    z-index:999;
}
.nube-2:after{
  content:""
  position:absolute;
  width:100px;
  height:100px;
  background:white;
  border-radius:50%;
  top:-50%;
  left:30px;
  box-shadow: inset 1px 20px 20px 0px #2b71c9;

}
.nube-2:before{
  content:""
  position:absolute;
  width:150px;
  height:150px;
  background:white;
  border-radius:50%;
  top:-90%;
  left:85px;
   box-shadow: inset 1px 20px 20px 0px #2b71c9;
   
}

.cuerpo{
  width 180px
  height 180px
  background #57cc02
  border-radius 13% 13% 50% 50%
  position relative
  z-index:998;
}
.cabeza{
  width 180px
  height 90px
  background #2b71c9
  
  position absolute
  border-radius 0 0 100px 100px
  left 0%
  top -73px
  z-index:1;
}
.cuerpo::after{
  
  content ''
  width 80px
  height 80px
  background #2b71c9 
  //border 1px solid red
  position absolute
  border-radius 50% 50% 0 0
  left 5px
  top -77px
  transform rotate(130deg)
  z-index:-1;
}
.cuerpo::before{
  
  content ''
  width 80px
  height 80px
  background #2b71c9 
  //border 1px solid red
  position absolute
  border-radius 50% 50% 0 0
  right 5px
  top -77px
  transform rotate(130deg)
  z-index:-1;
}

.ojos{
  display flex 
  justify-content space-around
  margin-top 13px
  position relative
  .ojo-izq,
  .ojo-der{
    background #8ae117
    width 75px
    height 75px
    border-radius 50%
    position relative
    .retina-izq,
    .retina-der{
      width 40px
      height 55px
      //border 1px solid red
      background white
      position relative
      z-index 999
      margin 10px 0 0 17px
      display flex
      border-radius 38%
      .iris-izq,
      .iris-der{
        width 20px
        height 40px
        background black
        position relative
        top 10px
        display flex
        border-radius 38%
        .brillo-izq,
        .brillo-der{
          width 10px
          height 10px
          border-radius 50%
          background white
          position relative
          left -2px
        }
      }
      .iris-der{
        position absolute
        right 13px
      }
      .iris-izq{
        position absolute
        left 13px
      }
      }
  }
}
.ojos::before{
  content ''
  background #8ae117
  width 50px 
  height 45px
  top 30%
  position absolute
}

.ojo-izq::before{
  content ''
  width 15px
  height 60px
  background #8ae117
  //border 1px solid red
  position absolute
  left 54px
  top -18px
  border-radius 3px
  transform rotate(130deg)  
}
.ojo-izq::after{
  content ''
  width 30px
  height 30px
  background #8ae117
  //border 1px solid red
  position absolute
  left 15px
  top 0px
  border-radius 5px
  transform rotate(130deg)  
}

.ojo-der::after{
  content ''
  width 15px
  height 60px
  background #8ae117
  //border 1px solid blue
  position absolute
  right 54px
  top -18px
  border-radius 3px
  transform rotate(230deg)  
}
.ojo-der::before{
  content ''
  width 30px
  height 30px
  background #8ae117
  //border 1px solid red
  position absolute
  right 15px
  top 0px
  border-radius 5px
  transform rotate(230deg)  
}
.retina-izq::before{
  content ''
  width 45px
  height 25px
  background #8ae117
  position absolute
  transform rotate(198deg)
  top 38px
  right 2px
  border-radius 50% 50% 0 0
  z-index 998
}
.retina-der::before{
  content ''
  width 45px
  height 25px
  background #8ae117
  position absolute
  transform rotate(-198deg)
  top 38px
  left 2px
  border-radius 50% 50% 0 0
  z-index 998
}
.pico{
  width:48px;
  height:20px;
  background-color:#f9eda5;
  position:absolute;
  border-radius:100px 100px 0 0;
  top:38%;
  left:37%;
  z-index:1000;
  //border:1px solid blue;
  box-shadow: inset 8px -15px 7px rgb(250, 194, 1, 1);

  
}

.pico::after{
  content:"";
  width:50px;
  height:30px;
  top:-7px;
  left:-2px;
  background:#fac801;
  position:absolute;
  clip-path: polygon(4% 87%, 49% 100%, 100% 88%);

}
.pico-abajo{
  width:35px;
  height:40px;
  background:#ef9004;
  border-radius:0 0 100px 100px;
  position:absolute;
  top:48%;
  left:50%;
  transform:translateX(-50%);
  
}
.pico-abajo::after{
  content:"";
  width:28px;
  height:32px;
  left:50%;
  transform:translateX(-50%);
  background:#b86c2d;
  position:absolute;
  border-radius:0 0 100px 100px;
}

.plumas{
  position:absolute;
  left:55%;
  bottom:22%;
  .pluma-left{
    width:15px;
    height:8px;
    background:#89e119;
    border-radius:100px 100px 15px 15px;
    transform:rotate(180deg);
    position:absolute;

  }
  .pluma-right{
    width:15px;
    height:8px;
    background:#89e119;
    border-radius:100px 100px 15px 15px;
    transform:rotate(180deg);
    position:absolute;
    margin-left:-30px;

  }
  .pluma-center{
    width:15px;
    height:8px;
    background:#89e119;
    border-radius:100px 100px 15px 15px;
    transform:rotate(180deg);
    position:absolute;
    bottom:-20px;
    left:-15px;
  }
}

.ala-izq{
  width:65px;
  height:58px;
  background: #57cc02;
  transform:rotate(11deg);
  border-radius:8px 0% 0px 100px;
  position:absolute;
  left:-53px;
  top:35%;
  z-index:-1;
     animation: 1s infinite alternate alasp;

}
.ala-der{
  width:65px;
  height:58px;
  background: #57cc02;
  transform:rotate(-11deg);
  border-radius:0 8px 100% 0 ;
  position:absolute;
  right:-52px;
  top:35%;
  z-index:-1;
   animation: 1s infinite alternate alas;

}
.pies{
    width:40px;
    height:20px;
    background:#f38f01;
    border-radius:50px;
    position:relative;
    top:45px;
    transform:rotate(30deg);
    animation: 1s infinite alternate abajop;

  }
  .pies-d{
  
   width:40px;
   height:20px;
   background:#f38f01;
   border-radius:50px;
   position:relative;
   top:25px;
   left:140px;
   transform:rotate(-32deg);
   animation: 1s infinite alternate abajo;
  }
  
  @keyframes abajo{
    from{
      
      margin-left:-10px;   
    }
  to{
      margin-left:0;   


    }
  }

  @keyframes abajop{
    from{
      
      margin-left:10px;   
    }
  to{
      margin-left:0;   


    }
  }
  
  @keyframes alas{
    from{
      transform:rotate(11deg);
      margin-top:8px;
    }
   
    to{
      margin-top:0px;
      transform:rotate(-11deg);

    }
  }
   @keyframes alasp{
    from{
     transform:rotate(-11deg);
      margin-top:8px;
    }
   
    to{
      margin-top:0px;
      transform:rotate(11deg);

    }
  }
   @keyframes nube-1{
     0%{
       left:-200px;
     }
     30%{
       top:2px;
     }
     45%{
       top:4px;
     }
     50%{
       top:6px;
     }
     100%{
       left:200px;
     }
   }
   @keyframes nube-2{
     0%{
       top:15px;
       right:-200px;
     }
     30%{
       top:15px;
     }
     45%{
       top:25px;
     }
     50%{
       top:35px;
     }
     75%{
       top:25px;
     }
     80%{
       top:15px;
     }
     95%{
       top:8px;
     }
     100%{
       right:200px;
     }
   }
              
            
!

JS

              
                
              
            
!
999px

Console