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 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.

Quick-add: + add another resource

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.

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