Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .container
  .cup
  .straw
  .shine
  .tea
  - for(var i = 0; i < 10; i++)
    div(class='bubble-' + i)
  .logo
    .nose
    for val in [1,2]
      div(class='toothline-' + val)
    .eye
      for eye in [1,2]
        .div(class='eye-' + eye)
          if eye%2
            .heart
    .lashes
      for val in ['left', 'right']
        div(class='lash-' + val)

script(src="https://codepen.io/ryanzola/pen/qePagj.js")
            
          
!
            
              // mixins
// Flexbox display
=flexbox() 
  display:  -webkit-box
  display:  -moz-box
  display:  -ms-flexbox
  display:  -webkit-flex
  display:  flex
  
// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
=flex-direction($direction)
  -webkit-flex-direction:   $direction
  -moz-flex-direction:      $direction
  -ms-flex-direction:       $direction
  flex-direction:           $direction
  
// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
=justify-content($justify)
  -webkit-justify-content:  $justify
  -moz-justify-content:     $justify
  -ms-justify-content:      $justify
  justify-content:          $justify
  -ms-flex-pack:            $justify
  
// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
=align-items($align) 
  -webkit-align-items:  $align
  -moz-align-items:     $align
  -ms-align-items:      $align
  align-items:          $align

// generic transform
=transform($transforms)
  -moz-transform:           $transforms
  -o-transform:             $transforms
  -ms-transform:            $transforms
  -webkit-transform:        $transforms
  transform:                $transforms
// scale
=scale($scale)
  +transform(scale($scale))
    
=rotate($degrees)
  +transform(rotate($degrees))
    
    
// transform-origin
=transform-origin ($origin1, $origin2) 
  moz-transform-origin:     $origin1 $origin2
  -o-transform-origin:      $origin1 $origin2
  -ms-transform-origin:     $origin1 $origin2
  -webkit-transform-origin: $origin1 $origin2
  transform-origin:         $origin1 $origin2
  
// border-radius: allows for 1 - 4 arguments
=border-radius($tl, $tr: $tl, $br: $tl, $bl: $tl)
  -moz-border-radius:       $tl $tr $br $bl
  -webkit-border-radius:    $tl $tr $br $bl
  border-radius:            $tl $tr $br $bl

=filter($value) 
  -webkit-filter:   $value
  -moz-filter:      $value
  -o-filter:        $value
  filter:           $value

  
//box shadow (allows for multiple box shadows)
=box-shadow($shadow...)
  -webkit-box-shadow:       $shadow
  -moz-box-shadow:          $shadow   
  box-shadow:               $shadow
 
//box sizing
=box-sizing($sizing)
  -webkit-box-sizing:   $sizing
  -moz-box-sizing:      $sizing
  box-sizing:           $sizing

// animation
=animation($name, $duration: 0, $times: 1, $transition: ease, $direction: normal)
  -webkit-animation:   $name $duration $times $transition, $direction
  -moz-animation-name: $name $duration $times $transition, $direction
  -o-animation:        $name $duration $times $transition, $direction
  animation:           $name $duration $times $transition, $direction

// color palette
$pink:        #E85C82
$light-pink:  #EDD8DA
$choco:       #D69369
$beige:       #CB9D7D
$orange:      #F49341
$cup:         #F5F5F5

body
  margin: 0
  padding: 0
  height: 100vh
  width: 100vw
  +box-sizing(border-box)
  background: $light-pink
  
.container, .cup, .tea, .logo, .straw, .bubble, .eye, .toothline-1, .toothline-2, .shine, .nose, .heart, .lashes, .lash-left, .lash-right
  position: absolute
  
.container
  margin: auto
  top: 0
  right: 0
  bottom: 0
  left: 0
  height: 200px
  width: 200px
  
  .cup
    width: 100px
    border-top:  250px solid $cup
    border-left:  25px solid transparent
    border-right: 25px solid transparent
    opacity: 0.5
    &:before, &:after
      position: absolute
      content: ''
      background-color: $cup
    &:before
      height: 4px
      width: 160px
      top: -250px
      left: -30px
      +border-radius(2px)
      +box-shadow(0 1px rgba(#DEDBD2, 0.5))
    
  .straw
    height: 300px
    width: 20px
    top: -50px
    left: 100px
    +rotate(10deg)
    background: $pink
    z-index: -1
    
  //thai milk tea!
  .tea
    width: 98px
    top: 30px
    left: 4px
    +border-radius(2px)
    border-top:  219px solid $orange
    border-right: 22px solid transparent
    border-left:  22px solid transparent

  .logo
    height: 50px
    width: 60px
    top: 85px
    left: 45px
    +border-radius(50%)
    +rotate(10deg)
    background-color: #FFF
    border:  2px solid #000
    z-index: 5
    
    .eye
      background-color: #000
      .eye-1
        @extend .eye
        top: 18px, 
        left: 5px
        height: 20px
        width: 20px
        +border-radius(100%)
        
        .heart
          top: -34px
          left: -40px
          height: 90px
          width: 100px
          +scale(0.155)
        .heart:before, .heart:after
          position: absolute
          content: ''
          top: 0
          left: 50px
          height: 80px
          width: 50px
          +border-radius(50px, 50px, 0, 0)
          +rotate(-45deg)
          +transform-origin(0, 100%)
          background: #FFF
        .heart:after
          left: 0
          +rotate(45deg)
          +transform-origin(100%, 100%)
      .eye-2
        @extend .eye
        top: 20px
        left: 38px
        height: 18px
        width: 18px
        +border-radius(100%)
        &:before, &:after
          position: absolute
          content: ''
          background-color: #FFF
        &:before
          top: 4px
          left: 3px
          height: 9px
          width: 8px
          +border-radius(100%)
          +rotate(25deg)
        &:after
          top: 10px
          left: 12px
          height: 2px
          width: 2px
          +border-radius(100%)
    .lashes
      .lash-left
        top: 15px
        left: 4px
        height: 2px
        +rotate(-50deg)
        border-bottom: 6px solid black
        border-left: 1px solid transparent
        border-right: 1px solid transparent
        &:before, &:after
          position: absolute
          content: ''
          border-bottom: 6px solid black
          border-left: 1px solid transparent
          border-right: 1px solid transparent
        &:before
          top: 1px
          left: 3px
          height: 2px
          +rotate(20deg)
        &:after
          top: 1px
          left: -5px
          height: 2px
          +rotate(-25deg)
      .lash-right
        top: 18px
        left: 55px
        border-bottom: 6px solid black
        border-left: 1px solid transparent
        border-right: 1px solid transparent
        height: 2px
        +rotate(44deg)
        &:before, &:after
          position: absolute
          content: ''
          border-bottom: 6px solid black
          border-left: 1px solid transparent
          border-right: 1px solid transparent
        &:before
          top: 3px
          left: 2px
          +rotate(25deg)
        &:after
          top: 2px
          left: -4px
          +rotate(-20deg)
    .toothline-1
      top: 47px
      left: 22px
      height: 10px
      width: 2px
      background-color: #000
    .toothline-2
      top: 47px
      left: 34px
      height: 10px
      width: 2px
      background-color: #000
    .nose
      top: 38px
      left: 24px
      height: 3px
      width: 8px
      +border-radius(100%)
      +rotate(-45deg)
      background-color: #000
      &:after
        position: absolute
        content: ''
        top: 3px
        left: 3px
        height: 3px
        width: 8px
        +border-radius(100%)
        +rotate(90deg)
        background-color: #000
    &:before, &:after
      position: absolute
      content: ''
      background-color: #FFF
    &:before
      top: 47px
      left: 13px
      height: 8px
      width: 30px
      +border-radius(0, 0, 40%, 40%)
      border-bottom: 2px solid
      border-left: 2px solid
      border-right: 2px solid
      border: none 2px 2px 2px solid
  .bubble
    height: 20px
    width: 20px
    +border-radius(100%)
    background-color: darken($choco, 45%)
    z-index: 3
    &:before, &:after
      position: absolute
      content: ''
      background: #FFF
      +border-radius(50%)
    &:before
      top: 4px
      left: 4px
      height: 4px
      width: 4px
      opacity: 0.8
    &:after
      top: 8px
      left: 8px
      height: 2px
      width: 2px
      opacity: 0.6
  .bubble-1
    @extend .bubble
    top: 130px
    left: 17px
    opacity: 1
    +animation(bubbles, 2.2s, infinite, ease-in-out)
  .bubble-2
    @extend .bubble
    top: 209px
    left: 32px
    opacity: 0.5
    +animation(bubbles, 3s, infinite, ease-in-out)
  .bubble-3
    @extend .bubble
    top: 149px
    left: 47px
    opacity: 0.3
    +animation(bubbles, 2.8s, infinite, ease-in-out)
  .bubble-4
    @extend .bubble
    top: 68px
    left: 55px
    opacity: 0.7
    +animation(bubbles, 1.8s, infinite, ease-in-out)
  .bubble-5
    @extend .bubble
    top: 188px
    left: 65px
    opacity: 0.9
    +animation(bubbles, 1.5s, infinite, ease-in-out)
  .bubble-6
    @extend .bubble
    top: 226px
    left: 82px
    opacity: 0.7
    +animation(bubbles, 2.4s, infinite, ease-in-out)
  .bubble-7
    @extend .bubble
    top: 142px
    left: 85px
    opacity: 0.6
    +animation(bubbles, 2.4s, infinite, ease-in-out)
  .bubble-8
    @extend .bubble
    top: 106px
    left: 105px
    opacity: 0.9
    +animation(bubbles, 2s, infinite, ease-in-out)
  .bubble-9
    @extend .bubble
    top: 176px
    left: 109px
    opacity: 0.8
    +animation(bubbles, 2s, infinite, ease-in-out)
  .shine
    left: 100px
    width: 15px
    border-top: 246px solid $cup
    border-left: -25px solid transparent
    border-right: 25px solid transparent 
    +border-radius(0, 0, 0, 4px)
    opacity: 0.2
    z-index: 7
    
@keyframes bubbles
  0%
    +transform(translate(0, 0) rotate(0deg))
  50% 
    +transform(translate(0, -5px) rotate(20deg))
  100% 
    +transform(translateY(0, 0px) rotate(0deg))
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console