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.

            
              .container
  .circle
    input(type="radio" name="tabs" id="tab1")
    label(class="nav-label" for="tab1")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu History
    input(type="radio" name="tabs" id="tab2")
    label(class="nav-label" for="tab2")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu Account
    input(type="radio" name="tabs" id="tab3")
    label(class="nav-label" for="tab3")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu Settings
    input(type="radio" name="tabs" id="tab4" checked)
    label(class="nav-label" for="tab4")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu Profile
    input(type="radio" name="tabs" id="tab5")
    label(class="nav-label" for="tab5")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu Billing
    input(type="radio" name="tabs" id="tab6")
    label(class="nav-label" for="tab6")
      .rain-drop
      .rain-drop
      .rain-drop
      .rain-drop
      .wave
        .wave2
      span.cu Miscellaneous
    .tab-content(id="tab-content1")
      .container-all
        .profile
          img(class="pic" src="http://charlesmarcotte.me/images/12977238_10156780503205082_9096884707636244771_o.jpg")
          p.name Charlie Marcotte
          p.account Pro Account
        .formfield
          .one
            input(id="texter" type="text" placeholder="Name")
            span(class="underline")
            span(class="text") Name
          .two
            input(id="texter" type="text" placeholder="Email")
            span(class="underline")
            span(class="text" id="secondtext") Email
          .three
            input(id="texter" type="text" placeholder="Mobile")
            span(class="underline")
            span(class="text" id="thirdtext") Mobile
        .submit
          p Save
          .ripple
          .ripple2
    .tab-content(id="tab-content2")
      h1.center more content...
    .tab-content(id="tab-content3")
      h1.center cool content...
    .tab-content(id="tab-content4")
      h1.center the best content...
      
      
    
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Varela+Round')

body
  margin: 0
  padding: 0
  font-family: 'Varela Round', sans-serif
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  width: 100vw
  background: #83a4d4
  background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4)
  background: linear-gradient(to right, #b6fbff, #83a4d4)
  overflow-x: hidden

  
@mixin on-circle($item-count, $circle-size, $item-size)
  position: relative
  width:  $circle-size
  height: $circle-size
  padding: 0
  border-radius: 50%
  list-style: none      
  
  > *
    display: block
    position: absolute
    top:  50%
    left: 50%
    width:  $item-size
    height: $item-size
    margin: -($item-size / 2)
  
    $angle: (360 / $item-count)
    $rot: 0

    @for $i from 1 through $item-count
      &:nth-of-type(#{$i})
        transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg)
 
      $rot: $rot + $angle
    
  
.circle
  @include on-circle($item-count: 6, $circle-size: 30em, $item-size: 7.0em)
  border: 3px solid #555
  margin: 5em auto 0
  z-index: 1
  background: white
    
input[type=radio]
  position: absolute
  left: 290px
  display: none
  
label
  border: 3px solid #555555
  border-radius: 100%
  position: relative
  background: #83a4d4
  z-index: 5
  cursor: pointer
  transition: .5s
  &:hover
    background: lighten(#83a4d4, 13%)
  &:hover > span
    color: black
  &:active
    height: 6em
    width: 6em
  
.rain-drop
  position: absolute
  height: 10px
  width: 10px
  background: #83a4d4
  border-radius: 50%
  border-radius: 0 50% 50% 50%
  transform: rotate(45deg)
  animation: rain 1s linear infinite
  display: none
  opacity: 0
  @keyframes rain
    0%
      opacity: 1
    90%
      opacity: 1
    100%
      transform: translateY(100px) rotate(45deg)
  &:nth-child(2)
    left: 30px
    top: -10px
    animation-delay: .5s
  &:nth-child(3)
    left: 50px
    top: 8px
    animation-delay: .2s
  &:nth-child(4)
    left: 95px
    top: -8px
    animation-delay: .4s
  
    
label:hover > .rain-drop
  display: block
  
.cu
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  z-index: 10
  color: white
  opacity: 0
  animation: start .5s ease forwards
  @keyframes start
    0%
      transform: translateY(1px)
    100% 
      opacity: 1
    
.circle [id^="tab"]:checked + .nav-label
  background: #83a4d4
  animation: grow .2s linear forwards
  overflow: hidden
  @keyframes grow
    100%
      height: 8.2em
      width: 8.2em
 
.circle [id^="tab"]:checked + .nav-label > .wave
  display: block
  
.circle [id^="tab"]:checked + .nav-label > .wave > .wave2
  opacity: 1
  
.circle [id^="tab"]:checked + .nav-label > span
  color: black
  
.circle [id^="tab"]:checked + .nav-label > .rain-drop
  display: none

.wave
  position: absolute
  z-index: -1
  height: 200px
  width: 200px
  background: rgba(white, .5)
  border-radius: 30%
  top: -115px
  right: -25px
  animation: wave 5s linear infinite
  display: none
  @keyframes wave
    100%
      transform: rotate(360deg)
    
.wave2
  position: absolute
  z-index: 2
  height: 185px
  width: 185px
  background: white
  border-radius: 30%
  opacity: 0
  border-radius: 100%
  
#tab-content1
  position: absolute
  height: 32em
  width: 32em
  transform: translateX(-200px) translateY(-200px)
  border-radius: 100%
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  opacity: 0
  
.container-all
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column

.profile
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  position: relative
  top: -50px
  
.pic
  height: 75px
  width: 75px
  border-radius: 100%
  margin-bottom: 8px
  border: 3px solid #555
  
p
  margin: 0
  padding: 0
  
.name
  font-size: 18px
  
.account
  color: #ccc
  font-size: 13px

.formfield
  display: flex
  flex-direction: column
  position: relative
  top: -50px
  left: 0px

.one, .two, .three
  position: relative
  width: 250px
  left: 0px
  
#texter
  position: relative
  left: 0px
  width: 100%
  height: 25px
  margin-top: 20px
  border: none
  background: transparent
  padding-bottom: 0px
  font-size: 14px
  z-index: 100
  &:focus
    outline: none

#texter::-webkit-input-placeholder
  padding-left: 1px
  font-size: 12px
  padding-bottom: 0px

#texter:focus::-webkit-input-placeholder
  opacity: 0

.underline
  position: absolute
  left: 0px
  bottom: 0px
  width: 250px
  height: 2px
  background: #555
  z-index: 110
  transition: 1.6s
  &:after
    content: ''
    position: absolute
    width: 0px
    height: 2px
    background: #83A4D4
    opacity: 0
    
.submit
  position: relative
  width: 110px
  height: 60px
  background: #83A4D4
  border-bottom: 8px solid #B2F5FC
  color: white
  border-radius: 11px
  display: flex
  justify-content: center
  align-items: center
  cursor: pointer
  transition: .3s
  top: -20px
  z-index: 200
  &:active
    transform: scale(.90)

.text
  position: absolute
  color: white
  left: 203px
  bottom: 0px
  font-size: 14px
  border-radius: 0
  background: #83a4d4
  border: none
  z-index: -10
  transition: .5s
  height: 0
  padding-top: 5px
  padding-bottom: 20px
  padding-left: 4px
  padding-right: 4px
  opacity: 1
  transition: .5s
  transition-delay: .1s
  opacity: 0
 
#secondtext
  left: 206px
  
#thirdtext
  left: 197px
  
#texter:focus ~ .text
  opacity: 1 !important
  transform: translateY(-4px)
  
#texter:focus ~ .underline:after
  opacity: 1
  animation: growing .2s linear forwards
  @keyframes growing
    100%
      width: 250px
 
.tab-content
  opacity: 0
  display: none
    
#tab4:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3, #tab1:checked ~ #tab-content4
  opacity: 1
  
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3, #tab1:checked ~ #tab-content4
  display: block
  
h1.center
  display: none
  z-index: -100
  
#tab-content3 > h1.center
  position: absolute
  top: -200px
  left: 110px
  display: block
  
#tab-content2 > h1.center
  position: absolute
  top: -200px
  right: 90px
  display: block
  
#tab-content4 > h1.center
  position: absolute
  top: 0px
  left: 230px
  display: block
  
.ripple
  position: absolute
  height: 30px
  width: 30px
  border: 1px solid rgba(white, .3)
  border-radius: 100%
  visibility: hidden
  
.ripple2
  position: absolute
  height: 30px
  width: 30px
  border: 1px solid rgba(white, .3)
  border-radius: 100%
  visibility: hidden
  
.submit:hover > .ripple
  animation: ripple 1.6s ease-out infinite
  @keyframes ripple
    0%
      visibility: visible
    40%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
    100%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
  
.submit:hover > .ripple2
  animation: ripple2 1.6s ease-out infinite
  animation-delay: .4s
  @keyframes ripple2
    0%
      visibility: visible
    40%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
    100%
      visibility: visible
      transform: scale(2.9)
      border: 1px solid rgba(white, 0)
            
          
!
999px
Loading ..................

Console