"card"
Bootstrap 3.0.0 Snippet by evarevirus

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

Related: See More


Questions / Comments: