Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                .container
  .box
  .container-forms
    .container-info
      .info-item
        .table
          .table-cell
            p Have an account?
            .btn Log in
      .info-item
        .table
          .table-cell
            p Don't have an account? 
            .btn Sign up
    .container-form
      .form-item.log-in
        .table
          .table-cell
            input type="text" name="Username" placeholder="Username"
            input type="Password" name="Password" placeholder="Password"
            .btn Log in
      .form-item.sign-up
        .table
          .table-cell
            input type="text" name="email" placeholder="Email"
            input type="text" name="fullName" placeholder="Full Name"
            input type="text" name="Username" placeholder="Username"
            input type="Password" name="Password" placeholder="Password"
            .btn Sign up
a.box-item href="https://codepen.io/Anna_Batura/" target="_blank"
  svg class="rabbit" viewBox="0 0 600 600" version="1.2"
    path id="rabbit" d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z"
              
            
!

CSS

              
                @import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
$width: 600px
$height: 320px
$padding: 10px 15px
body
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  font-family: 'Roboto', sans-serif
  background-color: #5356ad
  overflow: hidden
.table
  display: table
  width: 100%
  height: 100%
.table-cell
  display: table-cell
  vertical-align: middle
  @include transition(all 0.5s)
.container
  position: relative
  width: $width
  margin: 30px auto 0
  height: $height
  background-color: #999ede
  top: 50%
  margin-top: -160px
  @include transition(all 0.5s)
  .box
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    overflow: hidden
    &:before, &:after
      content: " "
      position: absolute
      left: 152px
      top: 50px
      background-color: #9297e0
      transform: rotateX(52deg) rotateY(15deg) rotateZ(-38deg)
      width: 300px
      height: 285px
      @include transition(all 0.5s)
    &:after
      background-color: #a5aae4
      top: -10px
      left: 80px
      width: 320px
      height: 180px
  .container-forms
    position: relative
  .btn
    cursor: pointer
    text-align: center
    margin: 0 auto
    width: 60px
    color: #fff
    background-color: #ff73b3
    opacity: 1
    @include transition(all 0.5s)
    &:hover
      opacity: 0.7
      
  .btn, input
    padding: $padding
  input
    margin: 0 auto 15px
    display: block
    width: $width/2-80px
    @include transition(all 0.3s)
  .container-forms
    .container-info
      text-align: left
      font-size: 0
      .info-item
        text-align: center
        font-size: 16px
        width: $width/2
        height: $height
        display: inline-block
        vertical-align: top
        color: #fff
        opacity: 1
        @include transition(all 0.3s)
        p
          font-size: 20px
          margin: 20px
        .btn
          background-color: transparent
          border: 1px solid #fff
        .table-cell
          padding-right: 35px
        &:nth-child(2)
          .table-cell
            padding-left: 35px
            padding-right: 0
            
  .container-form
    overflow: hidden
    position: absolute
    left: 30px
    top: -30px
    width: 305px
    height: $height + 60px
    background-color: #fff
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2)
    @include transition(all 0.5s)
    &:before
      content: "✔"
      position: absolute
      left: 160px
      top: -50px
      color: #5356ad
      font-size: 130px
      opacity: 0
      @include transition(all 0.5s)
    .btn
      position: relative
      box-shadow: 0 0 10px 1px #ff73b3
      margin-top: 30px
  .form-item
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    opacity: 1
    @include transition(all 0.5s)
    &.sign-up
      position: absolute
      left: -100%
      opacity: 0
  &.log-in
    .box
      &:before
        position: absolute
        left: 180px
        top: 62px
        height: 265px
      &:after
        top: 22px
        left: 192px
        width: 324px
        height: 220px
    .container-form
      left: 265px
      .form-item
        &.sign-up
          left: 0
          opacity: 1
        &.log-in
          left: -100%
          opacity: 0
  &.active
    width: 260px
    height: 140px
    margin-top: -70px
    .container-form
      left: 30px
      width: 200px
      height: 200px
      &:before
        content: "✔"
        position: absolute
        left: 51px
        top: 5px
        color: #5356ad
        font-size: 130px
        opacity: 1
    input, .btn, .info-item
      display: none
      opacity: 0
      padding: 0px
      margin: 0 auto
      height: 0
    .form-item
      height: 100%
    .container-forms
      .container-info
        .info-item
          height: 0%
          opacity: 0
.rabbit
  width: 50px
  height: 50px
  position: absolute
  bottom: 20px
  right: 20px
  z-index: 3
  fill: #fff
              
            
!

JS

              
                $(".info-item .btn").click(function(){
  $(".container").toggleClass("log-in");
});
$(".container-form .btn").click(function(){
  $(".container").addClass("active");
});
              
            
!
999px

Console