<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/npr/pen/yemLvG?depth=everything&order=popularity&page=60&q=mobile&show_forks=false" />
<link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
html *{
transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1) !important;
font-family: 'Open Sans';
font-weight: 300;
letter-spacing: .5px
}
body{
background-image: url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png');
}
hr{
width: 10%;
margin: 20px auto
}
i{
position: relative;
z-index: 3
}
.icon-bar{
position: relative;
cursor: pointer;
}
.container{
width: 320px;
height: 580px;
margin: 0 auto;
margin-bottom: 100px;
position: relative;
overflow: hidden;
top: 50px;
}
.layer{
position: absolute;
height: 100%;
width: 100%;
}
.layer-1{
height: 100%;
padding: 15px;
background: #1a237e;
background: -moz-linear-gradient(top, #1a237e 0%, #3f51b5 100%);
background: -webkit-linear-gradient(top, #1a237e 0%,#3f51b5 100%);
background: linear-gradient(to bottom, #1a237e 0%,#3f51b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a237e', endColorstr='#3f51b5',GradientType=0 );
}
.layer-2{
transition-delay: .3s;
background: #eee;
top: 0;
padding: 30px;
/* background: url(https://www.wpfaster.org/wp-content/uploads/2013/06/blurry-city-lights.jpg); */
background: #2989d8;
background: -moz-linear-gradient(top, #2989d8 0%, #1b3e89 100%);
background: -webkit-linear-gradient(top, #2989d8 0%,#1b3e89 100%);
background: linear-gradient(to bottom, #2989d8 0%,#1b3e89 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1b3e89',GradientType=0 );
}
.layer-2:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* background-image: linear-gradient(to bottom right,#002f4b,#dc4225); */
opacity: .6;
}
.layer-3{
transition-delay: .2s;
background: #ccc;
top: 520px
}
.btn{
margin: 0 auto;
width: 100%;
position: relative;
bottom: 0;
box-shadow: none !important;
/* border: 1px solid white; */
}
.move-down{
top: 580px;
}
.completed{
bottom: 0 !important;
opacity: 1;
transform: scale(1);
}
.bg-content{
margin: 30% 0;
}
.preloader-wrapper{
position: absolute;
top: 30%;
left: 40%;
}
.collection{
border: none;
position: relative;
height: 455px;
overflow: ;
}
.meet{
bottom: 220px !important;
transition-delay: .5s !important;
}
.collection-item{
overflow: hidden;
position: relative !important;
top: 0;
border: none !important;
text-align: left;
transition: all .2s ease-in-out !important;
}
.collection-item p{
margin: 0;
}
.merge{
top: -15px !important;
position: relative;
opacity: 0;
}
.show-input{
}
.circle{
height: 75px;
width: 75px;
margin-bottom: 20px;
background: url(http://www3.pictures.zimbio.com/mp/qi2r5cwgejjl.jpg) no-repeat top center transparent;
background-size: 150%;
margin: 0 auto;
}
.grow{
transform: translateZ(0);
height: 100px;
width: 100px;
transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1) !important;
/* background-size: 190%; */
transition-delay: .5s !important;
}
input{
border: none !important;
box-shadow: none !important;
}
input[type=text]:focus{
border: none !important;
box-shadow: none !important;
}
.input-field{
margin-top: 0 !important;
padding: 0 15px;
}
#last_name{
height: 50px !important;
margin-bottom: 0 !important;
font-size: 18px;
margin-top: 3px;
}
.input-field label.active {
color: #1E5799 !important;
position: absolute;
top: 1.8rem;
left: -0.25rem;
cursor: text;
transition: .2s ease-out;
padding-left: 15px;
}
.sign-in{
padding-bottom: 0;
opacity: 0;
height: 50px;
top: 170px;
position: absolute;
width: 100%;
}
.reveal{
/* height: 50px !important; */
background: white !important;
top: 200px !important;
opacity: 1;
transition-delay: .5s !important;
z-index:3;
}
.delay-one{
transition-delay: .4s !important;
}
.delay-two{
transition-delay: .3s !important;
}
.delay-three{
transition-delay: .2s !important;
}
.delay-four{
transition-delay: .1s !important;
}
.opacity-0{
opacity: 0;
transform-origin: 50% 0;
transform: scaleX(0);
}
.profile-content{
margin-top: 50px;
}
.peek .collection-item:hover{
transform: scale(1.1);
/* background: rgba(255,255,255, 0.1) !important; */
}
</style></head><body>
<h1 class="center grey-text">Password morph</h1>
<p class="center grey-text">A simple sign in concept for mobile.</p>
<div class="container z-depth-3">
<div class="layer layer-1 darken-4 white-text">
<div class="icon-bar">
<i class="material-icons menu">menu</i>
<!-- <i class="material-icons right">info_outline</i> -->
</div>
<div class="bg-content">
<i class="large material-icons"></i>
<ul class="collection left-align">
<li class="collection-item transparent"><h5>Your options</h5></li>
<li class="collection-item transparent">Enable touch ID<div class="switch right">
<label>
<input class="blue" type="checkbox">
<span class="lever"></span>
</label>
</div></li>
<li class="collection-item transparent">Save user ID<div class="switch right">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
</div></li>
<li class="collection-item transparent">Forgot password</li>
<li class="collection-item transparent">Confirm card</li>
<li class="collection-item transparent">Create an account</li>
<li class="collection-item transparent">Contact us</li>
<li><hr /></li>
<li class="collection-item transparent">Sign out</li>
</ul>
</div>
</div>
<div class="layer layer-2 z-depth-1">
<div class="preloader-wrapper big">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="center">
<!-- <i class="large material-icons grey-text">list</i> -->
<ul class="collection peek">
<li class="profile-content">
<div class="circle z-depth-1"></div>
<h5 class="white-text">Hello, Anton!</h5>
<hr />
</li>
<li class="white ">
<div class="input-field sign-in z-depth-1">
<input id="last_name" type="password" class="validate">
<label for="last_name">Password</label>
</div>
</li>
<li class="collection-item transparent delay-four">
<p class=" white-text">$2,465.00</p>
<span class="white-text"><small>Statement balance</small></span>
</li>
<li class="collection-item transparent delay-three">
<p class=" white-text">$2,500.00</p>
<span class="white-text"><small>Current balance</small>
</span>
</li>
<li class="collection-item transparent delay-two">
<p class=" white-text">March 2nd</p>
<span class="white-text"><small>Payment due date</small></span>
</li>
<li class="collection-item transparent delay-one">
<p class=" white-text">$35.00</p>
<span class="white-text"><small>Minimum amount due</small></span>
</li>
</ul>
<br />
<div class="btn transparent darken-3 add-item btn-flat white-text">
<span class="left opacity-0 close"><i class="material-icons">close</i></span>
<span class="right"><i class="material-icons">arrow_forward</i></span></div>
</div>
</div>
<!-- <div class="layer layer-3 z-depth-1 grey-text">
<p class="task-count center">You have no completed tasks</p>
</div> -->
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'></script>
<script >var s = false;
$('body').on('click', '.btn', function(){
s = true
console.log(s)
$(this).toggleClass('meet');
$('.collection-item').toggleClass('merge');
$('hr').toggleClass('opacity-0')
$('.sign-in').toggleClass('reveal').find('input');
$('.close').toggleClass('opacity-0');
$('.circle').toggleClass('grow')
}).on('click', '.icon-bar', function(){
var one = $(this),
two = $('.layer-2'),
three = $('.layer-3');
if (s){
s = false;
$('.collection-item').removeClass('merge');
$('.sign-in').removeClass('reveal');
$('.btn').removeClass('meet');
$('hr').removeClass('opacity-0');
$('.close').addClass('opacity-0');
$('.circle').removeClass('grow')
}
two.toggleClass('move-down');
});
//# sourceURL=pen.js
</script>
</body></html>
