octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="full">
                
                <div class="cap-detail">
                        <div class="it-1"></div>
                        <div class="it-2"></div>
                        <div class="it-3"></div>
                        <div class="it-4"></div>
                        <div class="it-5"></div>
                </div>
                
                <div class="head">
                        
                        <div class="head-content">
                        
                                <div class="cap">
                                        <div class="cap-content">
                                                <div class="cap-borda">
                                                </div>
                                        </div>        
                                </div>
                        
                                <div class="countenance-full">
                                
                                        <div class="countenance-content">
                                        
                                                <div class="countenance">
                                                 
                                                        <div class="countenance-model countenance-2">
                                                        
                                                                <div class="eyes-2">
                                                                        <div class="eye-2 left-top"> 
                                                                        </div>
                                                                        <div class="eye-2 left-bottom"> 
                                                                        </div>
                                                                        
                                                                        <div class="eye-2 right-top"> 
                                                                        </div>
                                                                        <div class="eye-2 right-bottom"> 
                                                                        </div>
                                                                </div> 
                                                        
                                                                <div class="mouth-2">
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="tooth"></div>
                                                                        <div class="lip left"></div>
                                                                        <div class="lip right"></div>
                                                                </div>
                                                                
                                                                <div class="chin"></div>
                                                                
                                                                <div class="fat"></div>
                                                                
                                                        </div>
                                                        
                                                        <div class="countenance-model countenance-1">
                                                        
                                                                <div class="eyes-2">
                                                                        <div class="eye-detail">
                                                                        </div>
                                                                
                                                                        <div class="eye left">
                                                                                <div class="iris"></div>
                                                                        </div>
                                                                        
                                                                        <div class="eye right">
                                                                                <div class="iris"></div>
                                                                        </div>
                                                                </div>
                                                        
                                                                <div class="mouth"></div>
                                                                
                                                                <div class="chin"></div>
                                                                
                                                                <div class="fat"></div>
                                                                
                                                        </div>
                                        
                                                </div>
                                                
                                        </div>
                                        
                                </div>
                        
                        </div>
                </div>
                
                <div class="body">
                
                        <div class="hand left">
                                <div class="finger"></div>
                        </div>
                        <div class="hand right">
                                <div class="finger"></div>
                        </div>
                
                        <div class="shirt det-1"></div>
                        <div class="shirt det-2"></div>
                
                        <div class="zipper">
                                <div class="button"></div>
                                <div class="button"></div>
                                <div class="button"></div>
                        </div>
                
                </div>
                
                <div class="leg">
                        <div class="thigh left"></div>
                        <div class="thigh right"></div>
                        <div class="foot left"></div>
                        <div class="foot right"></div>
                </div>
        
        </div>
        
        <p class="author">
                Luiz Felipe Tartarotti Fialho<br>
                <a title="@LFeh" href="http://twitter.com/LFeh">@LFeh</a><br>
                <a title="@LFeh" href="http://www.felipefialho.com/">http://www.felipefialho.com/</a><br>
        </p>
            
          
!
            
              /****************** Default **********************/   

.full{
    height: 275px;
    margin: 30px auto 0;
    position: relative;
    width: 300px;
}

/****************** HEAD **********************/   

.head{
    left: 50%;
    margin: 0 0 0 -112px;
    position: relative;
    top: 10px;
    z-index: 2;
}

.head-content{
    border-radius: 50%;
    height: 182px;
    width: 224px;
        overflow: hidden;
}
 
.cap{ 
    left: 0;
    position: absolute;
    top:0;
    z-index: 2;
}

.cap-content,
.countenance-content{
    border-radius: 50%;
    height: 182px;
    width: 224px;
        overflow: hidden;
}

.cap-content{background: #00BBC9; }

.cap-detail{
    height: 20px;
    left: 120px;
    position: absolute;
    top: 0;
    width: 55px;
    z-index: 5;
}

.cap-detail div{
    border-radius: 50%;
        background: #ffe11d;
        width: 20px;
        height: 14px;
    position: absolute;
}

.cap-detail .it-1{
    top: 5px;
        left: 1px;
}
.cap-detail .it-2{
    top: 1px;
        left: 10px;
}
.cap-detail .it-3{
    left: 15px;
    top: 5px;
}
.cap-detail .it-4{
    left: 24px;
    top: 3px;
}
.cap-detail .it-5{
    left: 33px;
    top: 6px;
}

.cap-borda{
        background: #FEE01C; 
    border-radius: 50%;
    height: 182px;
    margin: 48px 0 0 -29px;
    width: 300px;
    z-index: 3;
}

.countenance-full{ 
    left: 0;
    position: relative;
    top:0;
    z-index: 4;
}

.countenance{
        background: #fdd6aa;  
    border-radius: 50%;
    height: 182px;
    margin: 57px 0 0 -30px;
    width: 306px;
}

.countenance-1{
        -webkit-animation: countenance 7s infinite step-start 0s;
        -moz-animation: countenance 7s infinite step-start 0s;
        -o-animation: countenance 7s infinite step-start 0s;
        -ms-animation: countenance 7s infinite step-start 0s;
        animation: countenance 7s infinite step-start 0s;
}

.countenance-2{
        -webkit-animation: countenance-2 7s infinite step-start 0s;
        -moz-animation: countenance-2 7s infinite step-start 0s;
        -o-animation: countenance-2 7s infinite step-start 0s;
        -ms-animation: countenance-2 7s infinite step-start 0s;
        animation: countenance-2 7s infinite step-start 0s;
}

.countenance-model{
        background: #fdd6aa;  
}

.eye-detail{
    border-left: 1px solid #666666;
    border-radius: 50%;
    height: 31px;
    left: 55px;
    position: absolute;
    top: 15px;
    width: 28px;
    z-index: 5;
}

.eye{
        -webkit-animation: eyes 3s infinite step-start 0s;
        -moz-animation: eyes 3s infinite step-start 0s;
        -o-animation: eyes 3s infinite step-start 0s;
        -ms-animation: eyes 3s infinite step-start 0s;
        animation: eyes 3s infinite step-start 0s;
        background: none repeat scroll 0 0 #FFF;  
        border:2px solid #D8D2C7;
    border-radius: 50%;
    height: 60px;
    position: absolute;
    top: 2px;
    width: 53px;
    z-index: 6;
}


.eye.left{
    left: 1px;
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        transform: rotate(30deg);
}
.eye.right{
    right: 0;
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        transform: rotate(-30deg);
}

.iris{
        -webkit-animation: iris 3s infinite step-start 0s;
        -moz-animation: iris 3s infinite step-start 0s;
        -o-animation: iris 3s infinite step-start 0s;
        -ms-animation: iris 3s infinite step-start 0s;
        animation: iris 3s infinite step-start 0s;
        background: none repeat scroll 0 0 #000000;
    border-radius: 50%;
    height: 6px;
    position: absolute;
    top: 20px;
    width: 6px;
    z-index: 7;
}

.eye.left .iris{right: 13px}
.eye.right .iris{left: 13px}

.mouth{
    border-bottom: 2px solid #333333;
    border-radius: 50%;
    bottom: 32px;
    height: 12px;
    left: 50%;
        margin: 0 0 0 -15px;
    position: absolute;
    width: 30px;
    z-index: 8;
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg)
        -o-transform: rotate(5deg)
        transform: rotate(5deg)
}

.mouth-2{
        background: #333;
    border-bottom: 2px solid #333333;    
        bottom: 25px;
    height: 25px;
    left: 50%;
        margin: 0 0 0 -40px;
    position: absolute;
    width: 80px;
    z-index: 8;
}

.tooth{   
        background: #fff;
    border-radius: 10%;
        border-top: none;
        float: left;    
        height: 13px;
    margin: 0 1px;
    width: 14px;
    border-top: 2px solid #333; 
}

.lip{
        background: #FDD6AA;
        height: 48px;
    position: absolute;
    top: 0;
    width: 25px;
}

.lip.left{
        left: 0;
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    border-right: 2px solid #333333;    
}

.lip.right{
        right: 0;
        -moz-transform: rotate(60deg);
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    border-left: 2px solid #333333;  
}

.eyes-2{
    height: 20px;
    left: 50%;
    margin: 0 0 0 -55px;
    position: absolute;
    top: 57px;
    width: 110px;
}

.eye-2{
        background: #333;
        height: 2px;
    position: absolute;
    width: 55px;
}

.eye-2.left-top{
        -moz-transform: rotate(20deg);
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg); 
    left: 0; 
    top: 21px;
}
.eye-2.left-bottom{
        left: 0;
        -moz-transform: rotate(-20deg); 
        -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg); 
    top: 40px;
}

.eye-2.right-top{
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg); 
    right: 0; 
    top: 21px;
}
.eye-2.right-bottom{
        right: 0;
        -moz-transform: rotate(20deg); 
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg); 
    top: 40px;
}

.chin{
    border-bottom: 1px solid #333333;
    border-radius: 50%;
    bottom: 20px;
    height: 12px;
    left: 50%;
        margin: 0 0 0 -23px;
    position: absolute;
    width: 46px;
    z-index: 8;
}

.fat{
    border-bottom: 1px solid #333333;
    border-radius: 50%;
    bottom: 10px;
    height: 113px;
    left: 50%;
        margin: 0 0 0 -95px;
    position: absolute;
    width: 190px;
    z-index: 8;
}
 
/****************** BODY **********************/    

.body{
        background: #ED314C;
    border-radius: 50%;
    height: 155px;
    left: 4px;
    position: absolute;
    top: 106px;
    width: 295px;
    z-index: 1;
}

.shirt{
        background: #ED314C;
    border-radius: 50%;
    height: 82px;
    position: absolute;
    width: 165px;
    z-index: 2;
}

.shirt.det-1{
        bottom: 0px;
    right: 8px;
}

.shirt.det-2{
        bottom: 0px;
    left: 12px;
}

.hand{
        background: #FFE11D;
    border-radius: 50%;
    height: 45px;
    position: absolute;
    top: 63px;
    width: 50px;
    z-index: 3;
}

.hand.left{left: -11px;}
.hand.right{right: -11px;}

.finger{
        background: #FFE11D;
    border: 1px solid #aaa;
    border-radius: 50%;
    height: 15px;
    position: absolute;
    top: 5px;
    width: 15px;
    z-index: 4;
}

.hand.left .finger{right: -5px;}
.hand.right .finger{left: -5px;}

.zipper{
    border-radius: 20% 20% 20% 20%;
    border-right: 1px solid #333333;
    height: 70px;
    left: 120px;
    position: absolute;
    top: 85px;
    width: 35px;
    z-index: 5;
}

.button{
        background: none repeat scroll 0 0 #333333;
    border-radius: 50%;
    height: 10px;
    margin: 10px 27px;
    width: 4px;
    z-index: 6;
}


/***********************************************************/  
/****************** CORPO **********************/  
/***********************************************************/  

.leg{
        background: #7d4935;
    height: 70px;
    left: 58px;
    position: absolute;
    top: 202px;
    width: 190px;
    z-index: 0;
}

.foot{
        background: #2d2b38;
    border-radius: 38%;
        border-top: 1px solid #2D2B38;
        box-shadow:         -2px 6px 6px rgba(50, 50, 50, 0.42);
    bottom: -7px;
    height: 11px;
    position: absolute;
    width: 120px;
    z-index: 1;
}

.foot.left{left: -25px;}
.foot.right{right: -25px;}

.thigh{
        background: #7d4935;
    height: 58px;
    position: absolute;
        top: 10px;
    width: 25px;
    z-index: 1;
}

.thigh.left{
        left: -22px;
        -webkit-transform: rotate(-16deg);
        -moz-transform: rotate(-16deg);
        transform: rotate(-16deg);
}
.thigh.right{
        right: -22px;
        -webkit-transform: rotate(16deg);
        -moz-transform: rotate(16deg);
        transform: rotate(16deg);
}
 
/****************** AUTHOR **********************/  

.author {
        bottom: 50px;
    color: #777777;
    font-size: 1.6em;
    line-height: 1.2em;
    position: absolute;
    right: 20px;
}

.author a {
    color: #2B2B2B;
    font-size: 0.8em;
    font-weight: bolder;
        text-decoration: underline;
}
 
/****************** ANIMATION **********************/  

@-webkit-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@-moz-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@-o-keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}
@keyframes iris {
        0%, 100% {
                opacity: 0;
        }
        15%, 95% {
                opacity: 1;
        }
}

@-moz-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-webkit-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-o-keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@keyframes eyes {
   0%, 100% {
        background:#FDD6AA;
        border-top: none;
   }
   15%, 95% {
        background:#fff; 
        border: none;
        border-top:2px solid #D8D2C7;
   }
}

@-moz-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   25%, 65% {
                opacity: 1;
   }
}

@-webkit-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@-o-keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@keyframes countenance {
   0%, 100% {
                opacity: 0;
   }
   35%, 65% {
                opacity: 1;
   }
}

@-moz-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@-webkit-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@-o-keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}

@keyframes countenance-2 {
   0%, 100% {
                opacity: 1;
   }
   35%, 65% {
                opacity: 0;
   }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console