cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              .artboard
  .telescope-base
    .sparkles
      .one.white.small.pulse-1
      .two.white.small.pulse-2
      .three.white.med.pulse-3
      .four.blue.pulse-2
      .five.blue.pulse-1
      .six.blue.small.pulse
      .seven.white.small.pulse
      .eight.white.small.pulse-3
      .nine.blue.pulse
      .ten.blue.small-1.pulse
      .eleven.blue.small.pulse
      .twelve.blue.small.pulse-2
      .thirteen.blue.small.pulse
      .fourteen.blue.blue.med.pulse-3
      .fifteen.blue.small.pulse-1
      .sixteen.blue.small.pulse
      
  .telescope-top
    .telescope-part1
      .telescope-shadow1
      .telescope-shadow2
    .telescope-part2
      .telescope-shadow3
    .telescope-part3
       .telescope-shadow4
       .telescope-shadow5
       .telescope-shadow6
       .telescope-body-line1
       .telescope-body-line2
    .telescope-part4
      .telescope-shadow7
      .telescope-shadow8
    .telescope-part5
      .telescope-shadow9      
    
  .telescope-bottom
    .telescope-hold
      .telescope-hold-shadow
    .telescope-hold-line1  
    .telescope-hold-line2 
    .telescope-hold-line3  
 
.author.
  Original Illustration by <a href="https://dribbble.com/shots/2482018-Responsive-Icons" target="_blank">Justas Galaburda</a>
            
          
!
            
              // Variables
$bg: #F5FAFC
$base: #EBF2FA
$stroke: #323062
$white: #fff
$blue: #323062

// Global
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono)

body
  background: #eee
  
h3, h4
  font-family: 'Roboto Mono'
  text-align: center
  text-transform: uppercase

// Styles
*
  box-sizing: border-box
  
.artboard
  width: 800px
  height: 600px
  background: $bg
  box-shadow: 0px 3px 20px rgba(0,0,0,0.2)
  border-radius: 3px
  margin: 50px auto
  border: 20px white solid
  position: relative
  overflow: hidden
  
.telescope-base
  width: 200px
  height: 200px
  background: #29629f
  position: absolute
  border-radius: 50%
  top: 180px
  left: 0px
  right: 0px
  margin-left: auto
  margin-right: auto
  border: solid 8px $stroke
  
.sparkles > div
  width: 20px
  height: 20px
  position: absolute

  &:before,
  &:after
    content: ''
    display: block
    width: 40%
    height: 100%
    border-radius: 20px
    background: $white
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)

  &:after
    transform: translate(-50%, -50%) rotate(90deg)

  &.white:before,
  &.white:after
    background: $white

  &.blue:before,
  &.blue:after
    background: $blue

  &.med
    transform: scale(0.6)

  &.small
    transform: scale(0.4)

  &.one
    top: 125px
    left: 30px

  &.two
    top: 10px
    left: 90px

  &.three
    top: 26px
    left: 24px

  &.four
    top: 104px
    left: -90px

  &.five
    top: 215px
    left: 173px

  &.six
    top: 174px
    left: 0px

  &.seven
    top: 136px
    left: 118px

  &.eight
    top: 88px
    left: 134px

  &.nine
    top: 63px
    left: 235px

  &.ten
    top: 124px
    left: -35px

  &.eleven
    top: 140px
    left: 181px

  &.twelve
    top: 7px
    left: -34px

  &.thirteen
    top: -53px
    left: -15px

  &.fourteen
    top: -43px
    left: 55px

  &.fifteen
    top: 208px
    left: 88px

  &.sixteen
    top: -23px
    left: 125px

  &.pulse
    animation: pulse 1s linear infinite

  &.pulse-1
    animation: pulse 1s 300ms linear infinite

  &.pulse-2
    animation: pulse 1s 600ms linear infinite

  &.pulse-3
    animation: pulse 1s 900ms linear infinite 
 
.telescope-top
  position: absolute
  top: 122px
  left: 180px
  transform: rotate(-13deg)
  z-index: 5
    
.telescope-part1
  position: absolute
  width: 130px
  height: 45px
  background: #ffedb9
  top: 151px
  left: 190px
  transform: rotate(90deg)
  border-radius: 25px
  border: solid 8px $stroke
  z-index: 1
  overflow: hidden
  
.telescope-part2
  position: absolute
  width: 90px
  height: 30px
  background: #40c8e1
  top:  158px
  left: 237px
  transform: rotate(90deg)
  border: solid 8px $stroke
  border-top-left-radius: 70px
  border-top-right-radius: 70px
  overflow: hidden
  
.telescope-shadow1
  position: absolute
  width: 75px
  height: 55px
  background: #ffda94
  border-radius: 25px
  left: 24px
  top: -12px
  z-index: 2
  
.telescope-shadow2
  position: absolute
  width: 98px
  height: 55px
  background: #ecc178
  border-radius: 25px
  left: 16px
  top: -15px
  
.telescope-shadow3
  position: absolute
  width: 35px
  height: 35px
  background: #33b1d3
  border-radius: 25px
  left: 18px
  top: -10px
  
.telescope-part3
  position: absolute
  top: 130px
  left: 125px
  width: 115px
  height: 85px
  background: #fff
  border: solid 8px $stroke
  overflow: hidden
  z-index: 3
  border-radius: 10px
  
.telescope-shadow4
  position: absolute
  width: 100%
  height: 22.3px
  background: #b5d3f6
  bottom: 0
  
.telescope-shadow5
  position: absolute
  width: 100%
  height: 22.3px
  background: #eaf2ff
  top: 25px

.telescope-part4
  position: absolute
  width: 100px
  height: 50px
  background: #fff
  border: solid 8px $stroke
  top: 149px
  left: 35px
  z-index: 1
  border-radius: 10px

.telescope-shadow7
  position: absolute
  background: #b5d3f6
  width: 100%
  height: 12px
  bottom: 0px
  
.telescope-shadow8
  position: absolute
  background: #eaf2ff
  width: 100%
  height: 12px
  top: 10px
  
.telescope-body-line1
  position: absolute
  width: 40px
  height: 8px
  background: $stroke
  top: 7px
  left: 48px
  border-radius: 5px
  
.telescope-body-line2
  position: absolute
  width: 17px
  height: 8px
  background: $stroke
  top: 7px
  left: 25px
  border-radius: 5px
  
.telescope-part5
  position: absolute
  height: 30px
  width: 30px
  background: #ffedb9
  border: solid 8px $stroke
  top: 160px
  left: 21px
  border-radius: 10px
  
.telescope-bottom
  position: absolute
  width: 60px
  border-width: 50px 18px 0
  border-style: solid 
  border-color: $stroke transparent
  top: 282px
  left: 348px
  
  &:after
    content: ""
    position: absolute
    width: 16px
    border-width: 36px 13px 0
    border-style: solid 
    border-color: #96b4dc transparent
    top: -43px
    left: -9px
  
.telescope-hold-shadow
  position: absolute
  width: 51px
  height: 0px
  border-width: 25px 16px 0 6px
  border-style: solid
  border-color: #7094c1 transparent
  z-index: 1
  top: -51px
  left: -10px
  transform: rotate(-13deg)

.telescope-hold-line1
  width: 8px
  height: 82px
  position: absolute
  background: #323062
  transform: rotate(20deg)
  top: -42px
  left: -1px
  
.telescope-hold-line2
  width: 8px
  height: 83px
  position: absolute
  background: #323062
  top: -42px
  left: 9.5px
  
.telescope-hold-line3
  width: 8px
  height: 62px
  position: absolute
  background: #323062
  top: -20px
  left: 23px
  transform: rotate(-20deg)
  
.author
  text-align: center
  
@keyframes pulse
  0%
    transform: scale(1)
  90%
    transform: scale(0.3)

  100%
    transform: scale(1)
            
          
!
            
              /*

Psychiatrist: How would you describe your life right now?
Me: Have you ever wrote JavaScript?

*/ 
            
          
!
999px
Loading ..................

Console