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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="header">
  <div class="paper"></div>
  <div class="paper-2"></div>
  <div class="me">
    <div class="me-body"></div>
    <div class="me-head">
      <div class="hair"></div>
      <div class="face">
        <div class="eye-1"></div>
        <div class="eye-2"></div>
        <div class="mouth"></div>
      </div>
      <div class="hair-front"></div>
    </div>
  </div>
  <div class="table">
    <a href="https://codepen.io/daliannyvieira/" target="_blank"><i class="fa fa-codepen"></i></a>
    <a href="https://www.behance.net/daliannyvieira" target="_blank"><i class="fa fa-behance"></i></a>
    <div class="bowl-2">
      <div class="caneta-1"></div>
      <div class="caneta-2"></div>
    </div>
    <div class="notebook">
      <a href="https://www.precisaser.com.br/"><div class="precisaser"></div></a>
      <a href="https://github.com/daliannyvieira/" target="_blank" alt="github"><i class="fa fa-github"></i></a>
      <a href="https://twitter.com/daliannyvieira" target="_blank"><i class="fa fa-twitter"></i></a>
    </div>
    <a href="https://github.com/daliannyvieira/css-animations-pocket-guide" target="_blank"><div class="book-1"></div></a>
    <div class="book-2"></div>
    <div class="book-3"></div>
    <a href="mailto:vieiradalianny@gmail.com" itemprop="email" target="_blank"><div class="coffee">
      <div class="smoke"></div>
    </div></a>
    <div class="bowl">
      <div class="leaf-1"></div>
      <div class="leaf-2"></div>
      <div class="leaf-3"></div>
      <div class="leaf-4"></div>
      <div class="leaf-5"></div>
    </div>
    <a href="https://open.spotify.com/user/22dzc22xn2lqdp6pcwusqhtrq/playlist/4TZcbxNMZtxFu5xMznMvtq" target="_blank"><div class="box">
      <div class="circle"></div>
      <div class="circle circle-2"></div>
    </div></a>
    <div class="section">
      <p>You can call me Dali. I'm a brazilian <strong>creative developer</strong>. Making some cool things with code, love and dedication. Teaching at <a class="link" href="https://www.vainaweb.com.br/">@vainaweb</a></div>
  </div>
</div>
              
            
!

CSS

              
                primary-color = #ABD9B5
secundary-color = #F8B899

body
  background #444
  
.header
  position relative
  width 500px
  height 240px
  
.section
  position absolute
  text-align center
  top 5px
  max-width 32em
  font-family: 'Open Sans', sans-serif;
  line-height 1.5
  color #fff
  
.paper 
  position absolute
  top 55px
  left 125px
  width 60px
  height 65px
  background #fff
  border-bottom-right-radius 10px
  border-top-left-radius 10px
  
.paper-2 
  position absolute
  top 95px
  left 75px
  width 40px
  height 40px
  background #fff
  border-bottom-right-radius 10px
  border-top-left-radius 10px

.table 
  position absolute
  top 195px
  width 500px
  height 8px
  background #fff
  border-radius 50px

.link
  color #fff
  
.fa 
  font-size 2em
  text-align center
  transition .7s
  
.fa:hover
  animation rotate 1.5s 1
  
.fa-codepen
  top -25px
  left 15px
  color primary-color
  
.fa-behance
  top -123px
  left 101px
  color secundary-color
  
.fa-twitter
  top -12px
  left 46px
  color primary-color

.fa-github
  top 3px
  left 47px
  color secundary-color

.precisaser
  width 10px
  border-left 10px solid #ffc2a5
  border-right 10px solid #8adc9c
  border-bottom 10px solid secundary-color
  border-top 10px solid primary-color
  top 10px
  left 15px
  transition 1s
  
.precisaser:hover
  border-radius 100%
  transform rotate(270deg)
  
.bowl 
  position absolute
  top -25px
  left 400px
  width 50px
  height 25px
  background #fff
  border-bottom-right-radius 30px
  border-top-left-radius 30px
  
.bowl::after
  position absolute
  left 2px
  width 50px
  height 25px
  background #fff
  border-bottom-right-radius 30px
  border-top-left-radius 30px
  content ""
  
.bowl-2 
  position absolute
  top -25px
  left 50px
  width 50px
  height 25px
  background #fff
  border-bottom-right-radius 30px
  border-top-left-radius 30px

.leaf-1 
  position absolute
  top -14px
  left 35px
  width 20px
  height 20px
  border-bottom-right-radius 30px
  border-top-left-radius 30px
  background primary-color
  animation fly 2s infinite alternate ease-in-out
  transform rotate(30deg)

.leaf-2 
  position absolute
  top -14px
  left 15px
  width 20px
  height 20px
  border-bottom-left-radius 30px
  border-top-right-radius 30px
  background primary-color
  animation fly 2s infinite alternate ease-in-out
  transform rotate(-40deg)

.leaf-3 
  position absolute
  top -18px
  left 30px
  width 20px
  height 20px
  border-bottom-right-radius 30px
  border-top-left-radius 30px
  background primary-color
  animation fly 2s infinite alternate ease-in-out
  transform rotate(20deg)

.leaf-4 
  position absolute
  top -18px
  left 20px
  width 20px
  height 20px
  border-bottom-left-radius 30px
  border-top-right-radius 30px
  background primary-color
  animation fly 3s infinite alternate ease-in-out
  transform rotate(30deg)
  
.leaf-5
  position absolute
  top -23px
  left 25px
  width 20px
  height 20px
  border-bottom-left-radius 30px
  border-top-right-radius 30px
  background primary-color
  animation fly 2s infinite alternate ease-in-out
  transform rotate(70deg)

.caneta-1 
  position absolute
  top -20px
  left 25px
  width 3px
  height 20px
  background secundary-color

.caneta-2 
  position absolute
  top -25px
  left 30px
  width 5px
  height 25px
  background primary-color

.notebook 
  position absolute
  top -80px
  left 200px
  width 120px
  height 75px
  border-top-left-radius 10px
  border-top-right-radius 10px
  background #fff

.notebook::after 
  position absolute
  top 70px
  left -10px
  width 140px
  height 10px
  background #fff
  border-bottom-left-radius 20px
  border-bottom-right-radius 20px
  content ""

.apple::before 
  position absolute
  top -10px
  left 15px
  width 3px
  height 15px
  background #eee
  border-bottom-left-radius 15px
  border-bottom-right-radius 15px
  border-top-left-radius 20px
  border-top-right-radius 20px
  content""

.apple::after 
  position absolute
  top -10px
  left 5px
  width 10px
  height 10px
  background #eee
  border-bottom-left-radius 12px
  border-top-right-radius 15px
  content""

.book-1 
  position absolute
  top -24px
  left 35px
  width 70px
  height 12px
  border-top-left-radius 10px
  border-bottom-left-radius 10px
  border 2px solid primary-color
  border-right 0
  background #fff

.book-2 
  position absolute
  top -15px
  left 105px
  width 70px
  height 3px
  border-top-left-radius 10px
  border-bottom-left-radius 10px
  background secundary-color

.book-3 
  position absolute
  top -13px
  left 115px
  width 70px
  height 3px
  border-top-left-radius 10px
  border-bottom-left-radius 10px
  background secundary-color

.coffee 
  position absolute
  top -58px
  left 50px
  width 50px
  height 30px
  border-bottom-left-radius 20px
  border-bottom-right-radius 20px
  background #fff

.coffee::after
  position absolute
  top 3px
  left -15px
  width 22px
  height 18px
  border-bottom-right-radius 30px
  border 4px solid #fff
  border-top 0
  box-sizing border-box
  transform rotate(-270deg)
  content ""

.smoke 
  position absolute
  top -35px
  left 25px
  width 5px
  height 17px
  background #fff
  border-radius 10px
  opacity .1
  animation flyy 1.5s infinite alternate ease-in-out

.smoke::after 
  position absolute
  top -7px
  left 5px
  width 5px
  height 15px
  background #fff
  border-radius 10px
  opacity .9
  content ""

.me 
  position absolute
  top 50px
  left 215px

.me-body 
  position absolute
  top 50px
  width 100px
  height 65px
  border-radius 50%
  background secundary-color
  animation own 1.2s infinite linear

.me-head 
  position absolute
  top -17px
  left 25px
  width 45px
  height 65px
  animation own 1.2s infinite linear
  z-index 1

.face 
  position absolute
  width 45px
  height 65px
  border-radius 25px
  background #fff

.hair 
  position absolute
  left -10px
  width 60px
  height 65px
  border-top-left-radius 30px
  border-top-right-radius 30px
  border-bottom-left-radius 30px
  background #333

.hair-front 
  position absolute
  top -2px
  width 55px
  height 43px
  border-top-right-radius 30px
  border-bottom-left-radius 30px
  background #333

.eye-1 
  position absolute
  top 40px
  left 12px
  width 3px
  height 3px
  background #333
  border-radius 10px
  animation blink 1s infinite alternate ease-in-out

.eye-1::before 
  position absolute
  top -5px
  left -3px
  width 5px
  height 2px
  background #333
  border-radius 10px
  content""
  animation down 3s infinite

.eye-2 
  position absolute
  top 40px
  left 32px
  width 3px
  height 3px
  background #333
  border-radius 10px
  animation blink 1s infinite alternate ease-in-out

.mouth 
  position absolute
  top 55px
  left 19px
  width 10px
  height 3px
  border-bottom-left-radius 100px
  border-bottom-right-radius 100px
  border 2px solid secundary-color
  border-top 0
  box-sizing border-box
  animation smile 5s infinite
  
.box 
  position absolute
  top -70px
  left 270px
  width 40px
  height 60px
  background #fff
  border-radius 10px

.circle  
  position absolute
  top 32px
  left 7px
  width 26px
  height 26px
  background #eee
  border-radius 50%
  
.circle::before 
  position absolute
  top 7px
  left 7px
  width 12px
  height 13px
  background #eee
  border solid 3px #fff
  border-radius 10px
  content ""
  animation beat .5s infinite
  
.circle-2
  position absolute
  top 5px
  left 8px
  width 24px
  height 24px
  
.circle-2::before 
  width 10px
  height 10px
  
@keyframes own {
  0% {transform: rotate(0deg)}
  25% {transform: rotate(-8deg)}
  50% {transform: rotate(0deg)}
  75% {transform: rotate(8deg)}
  100% {transform: rotate(0deg)}
}

@keyframes down {
  0% {transform: translateY(0px)}
  25% {transform: translateY(2px)}
  50% {transform: translateY(0px)}
  75% {transform: translateY(2px)}
  100% {transform: translateY(0px)}
}

@keyframes smile {
   0% {transform: scaleX(1)}
  25% {transform: scaleX(1)}
  50% {transform: scaleX(1.5)}
  75% {transform: scaleX(1.5)}
 100% {transform: scaleX(1)}
}

@keyframes blink {
    0%  {background-color: #000}
    25% {background-color: #000}
    50% {background-color: #000}
    75% {background-color: #000}
   100% {background-color: #fff}
}

@keyframes flyy {
  50% {transform: translateY(15px)}
}
  
@keyframes fly {
  50% {transform: rotate(1deg)}
}

@keyframes beat {
	0% {transform: scaleX(1)}
  25% {transform: scaleX(1.5)}
  50% {transform: scaleY(1)}
  75% {transform: scaleX(1.5)}
	100% {transform: scaleY(1)}
}

@media screen and (max-width: 515px) {
  .header {
    transform: scale(.9)
  }
  .section {
    transform: scale(1)
  }
}

@media screen and (max-width: 460px) {
  .header {
    transform: scale(.8)
  }
  .section {
    transform: scale(1)
  }
}

@media screen and (max-width: 420px) {
  .header {
    transform: scale(.7)
  }
  .section {
    transform: scale(1.1)
  }
}

@media screen and (max-width: 400px) {
  .header {
    transform: scale(.6)
  }
  .section {
    transform: scale(1.2)
  }
}

@media screen and (max-width: 360px) {
  .header {
    transform: scale(.5)
  }
  .section {
    left 50px
    max-width 26em
    transform scale(1.5)
  }
}

@media screen and (max-width: 320px) {
  .section {
    left 40px
    max-width 26em
    transform scale(1.5)
  }
}

@keyframes rotate {
  50% {
    transform: rotate(-20deg);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console