<div id="container">
<div class="login">
<div class="content">
<h1>Log In</h1>
<form>
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<span class="remember">Remember me</span>
<span class="forget">Forgot password?</span>
<span class="clearfix"></span>
<button onclick="return false;">Log In</button>
</form>
<span class="loginwith">Or Connect with</span>
<a href="https://www.facebook.com/emin.qasimovdia"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>
<a href="https://www.twitter.com/webkoder"><svg class="feather feather-twitter sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
<a href="https://www.github.com/eminqasimov"><svg class="feather feather-github sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
<a href="#"> <svg class="feather feather-linkedin sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a>
<span class="copy">© 2025</span>
</div>
</div>
<div class="page front">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
<h1>Hello, friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button type="" id="register">Register <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle"><circle cx="12" cy="12" r="10"/><polyline points="12 16 16 12 12 8"/><line x1="8" y1="12" x2="16" y2="12"/></svg></button>
</div>
</div>
<div class="page back">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-in"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button type="" id="login"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"/><polyline points="12 8 8 12 12 16"/><line x1="16" y1="12" x2="8" y2="12"/></svg> Log In</button>
</div>
</div>
<div class="register">
<div class="content">
<h1>Sign Up</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
<svg class="feather feather-twitter sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
<svg class="feather feather-github sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<svg class="feather feather-linkedin sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
<span class="loginwith">Or</span>
<form>
<input type="text" placeholder="name">
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<span class="remember">I accept terms</span>
<span class="clearfix"></span>
<button onclick="return false;">Register</button>
</form>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
*,*::after,*::before{
margin: 0;
padding: 0;
box-sizing: inherit;
}
html{
height: 100%;
font-size: 65.2%;
box-sizing: border-box;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
}
body{
height: 100%;
background: #e9ebee;
color: #1d2129;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
perspective: 1500px;
}
h1{
font-weight: 700;
font-size: 3.5em;
text-align: center;
}
.version{
position:absolute;
bottom: 1em;
right: 2em;
border-radius: 40px;
background: #ff4b2b;
color: #fff;
font-size: 1em;
font-weight: bold;
padding: .8em 2em;
letter-spacing: 1px;
transition: transform 80ms ease-in;
}
form input {
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
font-size: 1.4em;
}
span{
color: #333;
font-size: 1.4em;
display: inline-block;
margin: 15px auto;
font-weight: 100;
}
span.remember{
float: left;
&::before{
content:"";
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid #999;
vertical-align: top;
margin-right: 4px;
}
}
span.forget{
float: right;
}
span.clearfix{
clear: both;
display: table;
}
span.loginwith{
display: block;
width: 100%;
margin-top: 1em;
white-space: nowrap;
overflow: hidden;
display: flex;
justify-content: center;
align-items:center;
&::before{
content:"";
display: inline-block;
width: 42%;
height:1px;
background: #aaa;
vertical-align: middle;
margin-right: 5%;
}
&::after{
content:"";
display: inline-block;
width: 45%;
height: 1px;
background: #aaa;
vertical-align: middle;
margin-left: 5%;
}
}
span.copy{
display: block;
position: absolute;
bottom: 0;
font-size: 1em;
}
button {
display: block;
margin: 1em auto;
border-radius: 40px;
border: 1px solid #1DA1F2;
background: #1DA1F2;
color: #fff;
font-size: 1.2em;
font-weight: bold;
padding: .8em 2em;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
svg{
vertical-align: middle;
}
}
button:hover {
cursor:pointer;
}
button:active {
transform: scale(.95);
}
button:focus {
outline: none;
}
#container{
width: 95%;
max-width: 800px;
height: 500px;
position: relative;
border-radius: 20px;
box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .1), 0 10px 10px -10px rgba(0, 0, 0, .02);
transform-style: preserve-3d;
&>div{
position: absolute;
width: 50%;
min-width: 350px;
height: 100%;
top:0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.content{
width: 100%;
padding: 2em 4em;
text-align: center;
p{
font-size: 1.4em;
}
}
.login{
left:0;
background:#FAFAFA;
border-radius: 20px 0 0 20px;
button{
border-radius: 0px;
width: 100%;
}
svg{
margin: 1em;
stroke: #999;
}
}
.register{
right: 0;
z-index: 1;
border-radius: 0 20px 20px 0;
background:#FAFAFA;
button{
border-radius: 0px;
width: 100%;
}
svg{
margin: 1em;
stroke: #999;
}
}
.page{
right:0;
color: #fff;
border-radius: 0 20px 20px 0;
transform-origin: left center;
transition: animation 1s linear;
button{
border-color: #fff;
background: transparent;
}
p{
margin: 2em auto;
}
}
.front{
background:linear-gradient(-45deg, #0d4c72 0%, #1DA1F2 100%) no-repeat 0 0 / 200%;
z-index: 3;
}
.back{
background:linear-gradient(135deg, #1DA1F2 0%, #0d4c72 100%,) no-repeat 0 0 / 200%;
z-index: 2;
.content{
transform: rotateY(180deg)
}
}
.active .front{
animation: rot-front .6s ease-in-out normal forwards;
}
.active .back {
animation: rot-back .6s ease-in-out normal forwards;
}
.close .front {
animation: close-rot-front .6s ease-in-out normal forwards;
}
.close .back{
animation: close-rot-back .6s ease-in-out normal forwards;
}
@keyframes rot-front{
from{
transform: translateZ(2px) rotateY(0deg);
}
to{
transform: translateZ(1px) rotateY(-180deg);
}
}
// reverse version of animation for restart when login button clicked back
@keyframes close-rot-front{
from{
transform: translateZ(1px) rotateY(-180deg);
}
to{
transform: translateZ(2px) rotateY(0deg);
}
}
@keyframes rot-back{
from{
transform: translateZ(1px) rotateY(0deg);
}
to{
transform: translateZ(2px) rotateY(-180deg);
}
}
@keyframes close-rot-back{
from{
transform: translateZ(2px) rotateY(-180deg);
}
to{
transform: translateZ(1px) rotateY(0deg);
}
}
.active .register .content{
animation: show .7s ease-in-out normal forwards
}
.close .register .content{
animation: hide .7s ease-in-out normal forwards
}
.active .login .content{
animation: hide .7s ease-in-out normal forwards
}
.close .login .content{
animation: show .7s ease-in-out normal forwards
}
//--------
@keyframes show{
from{
opacity: 0;
transform: scale(0.8)
}
to{
opacity: .99;
transform: scale(.99)//not 1 sake of smooth animation if it is ,it 'll be shaky a little bit in the end😉
}
}
@keyframes hide{
from{
opacity: .99;
transform: scale(0.99)
}
to{
opacity: 0;
transform: scale(0.8)
}
}const registerButton = document.getElementById('register')
const loginButton = document.getElementById('login')
const container = document.getElementById('container')
registerButton.onclick = function(){
container.className = 'active'
}
loginButton.onclick = function(){
container.className = 'close'
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.