LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Wait, I'm new

Progress

Great! Let's get you started

Now we make a quick profile

A little description

Welcome to Paradise

Reset
CSS
@import url(https://fonts.googleapis.com/css?family=Clicker+Script);
body {
  background: url("http://www.ryanirilli.com/images/fabric_of_squares_gray.png") repeat #F25260;
}

input:focus, textarea:focus {
  background-color: white !important;
}

.banner {
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: rgba(0, 0, 0, 0.5);
}
.banner .icon-chrome {
  font-size: 0.9rem;
}

#codepen-login {
  padding-top: 10%;
  background: transparent;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
}

input[type="text"], input[type="password"], textarea {
  border: none;
  background: rgba(0, 0, 0, 0.1);
  color: black;
  width: 100%;
  padding: 10px 5px;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  transition: all 0.6s;
}

#codepen-login h2, #codepen-login p, #codepen-login li, #codepen-login a, #codepen-login label, #codepen-login .label, #codepen-login .rule {
  color: rgba(0, 0, 0, 0.5);
}
#codepen-login h2 {
  font-family: 'nexa-light';
  margin-bottom: 5px;
  color: #333;
  text-shadow: 1px 1px 0 white;
}

label {
  font-size: 1.2rem;
}

.label {
  position: absolute;
  top: -20px;
  left: 0;
}

legend {
  padding: 10px 0;
  display: block;
  width: 100%;
}

.field {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 3px;
}

.btn {
  border: none;
}

.btn--second {
  background: #333333;
  color: white;
}
.btn--second:hover {
  background: black;
}

.flip-container {
  background: white;
  margin: 0 auto;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.flip-container, .flip-container .front, .flip-container .back {
  width: 320px;
}
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container .flipper {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip-container .flipper .front {
  z-index: 99999;
}
.flip-container .flipper .back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.rule--ornament:after {
  font-family: 'icomoon';
  content: '\e04a';
  padding-top: 9px;
}

.icon-facebook {
  background: white;
  border-radius: 100px;
  color: #32508C !important;
}

.icon-twitter {
  background: white;
  border-radius: 100px;
  color: #34CCFE !important;
}

.nav {
  color: white;
}
.nav li {
  margin-right: 10px;
}

.rotating-steps legend {
  position: absolute;
  -webkit-transform: rotateY(90deg);
  opacity: 0;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
}
.rotating-steps legend.active {
  -webkit-transform: rotateY(0deg);
  opacity: 1;
}
.rotating-steps legend.done {
  -webkit-transform: rotateY(-90deg);
  opacity: 0;
}

#reset {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}

.progress-bar {
  background: rgba(0, 0, 0, 0.1);
  height: 11px;
  border-radius: 100px;
  padding: 3px 3px 0 3px;
  position: relative;
}
.progress-bar .progress {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  width: 10%;
  height: 5px;
  background: #333333;
  border-radius: 100px;
}

.hide-login {
  -webkit-transform: rotateZ(-90deg);
}

.welcome {
  text-align: center;
  margin-top: 150px;
  font-family: 'Clicker Script';
  font-size: 5rem;
  display: none;
}
JS
$('.new-user-init').click ->
  $('.flip-container').addClass 'hover' 
  $('.rotating-steps').find('legend').eq(0).addClass('active')

$('.next').click ->
  $('.active').addClass 'done'
  next = $('.active').next()
  $('.active').removeClass 'active'
  next.addClass 'active'
  progress =  next.data 'progress' 
  $('.progress').css 'width', progress
  
$('#reset').click ->
  $('.hover, .active, .done, #codepen-login').removeClass 'hover active done hide-login'   
  $('.progress').css 'width', '10%'
  $('input[type="text"]').val ''
  $('.welcome').hide()
  
$('#codepen-login').submit ->
  $(this).addClass 'hide-login'
  $('.welcome').fadeIn('slow')
  return false


Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:27

Related Codes

Pen ID
Pen ID
Pen ID