LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
.burger
  .bun.top
    .eyes
      .eye.left        
        .eyeball
      .eye.right
        .eyeball
    - for(var i = 0; i < 10;i++)   { 
       .teeth 
    - }
  .ham
    - for(var i = 0; i < 3;i++)   { 
       .ham-squiggle 
    - }
  .lettuce
    - for(var i = 0; i < 5;i++)   { 
       .lettuce-squiggle 
    - }
  .text SNACKBAR
  .bun.bottom   
    - for(var i = 0; i < 10;i++)   { 
       .teeth 
    - }
CSS
$logo-width : 100px;
$logo-height : 100px;
$tooth-width : 10px;
@mixin border-radius-top($radius) {
  -webkit-border-radius: $radius $radius 0 0;
     -moz-border-radius: $radius $radius 0 0;
      -ms-border-radius: $radius $radius 0 0;
          border-radius: $radius $radius 0 0;
}
@mixin border-radius-bottom($radius) {
  -webkit-border-radius: 0 0 $radius $radius;
     -moz-border-radius: 0 0 $radius $radius;
      -ms-border-radius: 0 0 $radius $radius;
          border-radius: 0 0 $radius $radius;
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius:$radius;
}
.burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  .bun{
    position : relative;
    width:$logo-width;
    background: #F6D652;
    *{
      position:absolute;
    }
    &.top{      
      height:60px;
      @include border-radius-top(40px);
      .teeth{        
        bottom:0;
        border-bottom:$tooth-width solid #fff;
      }
    }
    &.bottom{
      height: 30px;
      @include border-radius-bottom(40px);
      .teeth{        
        top:0;
        border-top:$tooth-width solid #fff;
      }
    }
    .eyes{
      .eye{
        height:25px;
        width:15px;
        top:15px;
        border-radius:50%;
        background:white;
        .eyeball{
          height:10px;
          width:10px;
          left:5px;
          top:10px;
          border-radius:100%;
          background:#9D3F1B;
        }
        &.left{          
          left:30px;
        }
        &.right{
          left:50px;
        }
      }
    }  
    .teeth{        
      border-left:$tooth-width/2 solid transparent;
      border-right:$tooth-width/2 solid transparent;
    }
    @for $i from 1 through 10 {
      .teeth:nth-child(#{$i}){ 
        left:$tooth-width*($i - 1);
      }
    }
  }  
  .ham{
    display:flex;  
    .ham-squiggle{
      height:10px;
      width:40px;
      @include border-radius-bottom(5px);
      background:#8DC63F;
    }
    .ham-squiggle:first-child{
      border-radius : 5px 0 5px 5px;
    }
    .ham-squiggle:last-child{
      border-radius : 0 5px 5px 5px;
    }
  }
  .lettuce{
    display:flex;   
    .lettuce-squiggle{
      height:10px;
      width:20px;
      @include border-radius(8px);
      background:#E3651F; 
    }
  }
  .text{
    font-family: Courier New, Courier, monospace;
    font-size: 20px;
  }
}
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv