<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/Rabrennie/pen/oWXwzV?depth=everything&order=popularity&page=73&q=mobile&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">body {
background: #ededed;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.mobile-body {
position: absolute;
width: 320px;
height: 568px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #FFFFFF;
box-shadow: 0px 0px 74px 0px rgba(0, 0, 0, 0.4);
border-radius: 10px;
overflow: hidden;
}
.header {
width: 100%;
height: 5rem;
}
.body {
width: 100%;
height: 15rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.body h1 {
font-size: 2rem;
color: #e64980;
}
.sign-up {
width: 100%;
height: 15rem;
background: #ffffff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.sign-up .facebook, .sign-up .email {
box-sizing: border-box;
width: 90%;
height: 3rem;
margin: 1rem auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.sign-up .facebook.active, .sign-up .email.active {
cursor: default;
}
.sign-up .facebook.active::after, .sign-up .email.active::after {
-webkit-animation: 1s button-grow forwards;
animation: 1s button-grow forwards;
opacity: 1;
}
.sign-up .facebook.closing::after, .sign-up .email.closing::after {
width: 101%;
height: 200%;
opacity: 1 !important;
}
.sign-up .facebook.closed::after, .sign-up .email.closed::after {
-webkit-animation: 1s button-grow reverse;
animation: 1s button-grow reverse;
}
.sign-up .facebook {
background: #1c7cd6;
color: white;
}
.sign-up .facebook svg {
position: absolute;
left: 2rem;
}
.sign-up .facebook::after {
content: "";
position: absolute;
width: 90%;
height: 3rem;
background: #1c7cd6;
opacity: 0;
}
.sign-up .email {
border: 1px solid #1c7cd6;
color: #1c7cd6;
}
.sign-up .email::after {
content: "";
position: absolute;
width: 90%;
height: 3rem;
background: #ffffff;
opacity: 0;
box-sizing: border-box;
border: 1px solid #1c7cd6;
}
.login {
position: absolute;
top: 0px;
left: 0px;
color: white;
opacity: 1;
-webkit-transition: opacity .3s;
transition: opacity .3s;
width: 100%;
height: 100%;
}
.login.hidden {
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0s linear .3s, opacity .3s;
transition: visibility 0s linear .3s, opacity .3s;
}
.login .back {
position: absolute;
top: 1rem;
left: 1rem;
cursor: pointer;
}
.login.dark .back svg g path {
fill: #1c7cd6 !important;
}
.login.dark .form input {
border: 1px solid #1c7cd6;
}
.login.dark .form input[type="button"] {
background: #1c7cd6;
color: white;
}
.login .form {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.login .form input {
box-sizing: border-box;
width: 90%;
height: 3rem;
margin: 1rem;
border: none;
padding: 0 0.5rem;
background: white;
color: #1c7cd6;
}
@-webkit-keyframes button-grow {
0% {
width: 90%;
height: 3rem;
}
30% {
width: 101%;
height: 3rem;
}
100% {
width: 101%;
height: 200%;
}
}
@keyframes button-grow {
0% {
width: 90%;
height: 3rem;
}
30% {
width: 101%;
height: 3rem;
}
100% {
width: 101%;
height: 200%;
}
}
</style></head><body>
<div class="mobile-body">
<div class="header"></div>
<div class="body">
<h1>App Logo</h1>
</div>
<div class="sign-up">
<div class="facebook">
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="20px" height="20px" viewbox="0 0 60.734 60.733" style="enable-background:new 0 0 60.734 60.733" xml:space="preserve">
<g>
<path d="M57.378.001H3.352C1.502.001 0 1.5 0 3.353v54.026c0 1.853 1.502 3.354 3.352 3.354h29.086V37.214h-7.914v-9.167h7.914v-6.76c0-7.843 4.789-12.116 11.787-12.116 3.355 0 6.232.251 7.071.36v8.198l-4.854.002c-3.805 0-4.539 1.809-4.539 4.462v5.851h9.078l-1.187 9.166h-7.892v23.52h15.475c1.852 0 3.355-1.503 3.355-3.351V3.351C60.731 1.5 59.23.001 57.378.001z" fill="#FFFFFF"></path>
</g>
</svg><span>Sign in using Facebook</span>
</div>
<div class="email"><span>Sign in using Email</span></div>
</div>
<div class="login hidden">
<div class="back">
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewbox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175" xml:space="preserve" width="20px" height="20px">
<g>
<path d="M145.188 238.575l215.5-215.5c5.3-5.3 5.3-13.8 0-19.1s-13.8-5.3-19.1 0l-225.1 225.1c-5.3 5.3-5.3 13.8 0 19.1l225.1 225c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.3-5.3 5.3-13.8 0-19.1L145.188 238.575z" fill="#FFFFFF"></path>
</g>
</svg>
</div>
<div class="form">
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="button" value="Sign In"/>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
var facebookBtn = document.querySelector('.facebook');
var emailBtn = document.querySelector('.email');
var backBtn = document.querySelector('.login .back');
facebookBtn.addEventListener('click', function (e) {
if (facebookBtn.classList.contains('active') || facebookBtn.classList.contains('closing')) return;
facebookBtn.classList.add('active');
setTimeout(function () {
document.querySelector('.login').classList.remove('hidden');
}, 1000);
});
emailBtn.addEventListener('click', function (e) {
if (emailBtn.classList.contains('active') || emailBtn.classList.contains('closing')) return;
emailBtn.classList.add('active');
setTimeout(function () {
document.querySelector('.login').classList.remove('hidden');
document.querySelector('.login').classList.add('dark');
}, 1000);
});
backBtn.addEventListener('click', function (e) {
document.querySelector('.login').classList.add('hidden');
document.querySelector('.login').classList.remove('dark');
if (facebookBtn.classList.contains('active') && !facebookBtn.classList.contains('closing')) {
facebookBtn.classList.remove('active');
facebookBtn.classList.add('closing');
setTimeout(function () {
facebookBtn.classList.add('closed');
}, 301);
setTimeout(function () {
facebookBtn.classList.remove('closing');
facebookBtn.classList.remove('closed');
}, 1301);
}
if (emailBtn.classList.contains('active') && !emailBtn.classList.contains('closing')) {
emailBtn.classList.remove('active');
emailBtn.classList.add('closing');
setTimeout(function () {
emailBtn.classList.add('closed');
}, 301);
setTimeout(function () {
emailBtn.classList.remove('closing');
emailBtn.classList.remove('closed');
}, 1301);
}
});
//# sourceURL=pen.js
</script>
</body></html>
