JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
.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"
@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
$(".info-item .btn").click(function(){
$(".container").toggleClass("log-in");
});
$(".container-form .btn").click(function(){
$(".container").addClass("active");
});
Also see: Tab Triggers