<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Log In / Sign Up Form (Modal)</title>
<link href="https://fonts.googleapis.com/css?family=Cairo:400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e04ccf61b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="modal-wrapper">
<div class="login-wrapper">
<div class="collapsed-section hidden">
<div class="hide-section">
<h2 class="collapsed-heading">Have an Account?</h2>
<p class="collapsed-text">To keep connected with us please<br>login with your personal info</p>
<button class="collapsed-btn" onclick="toggleOpen()">Log In</button>
</div>
</div>
<div class="form-wrapper login">
<h2 class="form-heading">Log In To Your Profile</h2>
<div class="other-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-google"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<form action="" class="form login">
<span>or use your email account:</span>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" value="">
</div>
<div class="input-field">
<i class="fas fa-key"></i>
<input type="password" placeholder="Password" value="">
</div>
<a href="#" id="forgot-password">Forgot Your Password?</a>
<button class="form-btn" type="submit">Log In</button>
</form>
</div>
</div>
<div class="signup-wrapper">
<div class="collapsed-section">
<div class="hide-section">
<h2 class="collapsed-heading">New Here?</h2>
<p class="collapsed-text">Enter your personal details<br>and start journey with us!</p>
<button class="collapsed-btn" onclick="toggleOpen()">Sign Up</button>
</div>
</div>
<div class="form-wrapper signup hidden">
<h2 class="form-heading">Create Account</h2>
<div class="other-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-google"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<form action="" class="form login">
<span>or use your email for registration:</span>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Name" value="">
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email" value="">
</div>
<div class="input-field">
<i class="fas fa-key"></i>
<input type="password" placeholder="Password" value="">
</div>
<button class="form-btn" type="submit">Sign Up</button>
</form>
</div>
</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
body {
font-family: 'Cairo', sans-serif;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #330055;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%23330055' cx='50' cy='0' r='50'/%3E%3Cg fill='%233a015d' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%23410165' cx='50' cy='100' r='50'/%3E%3Cg fill='%2348026e' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23500376' cx='50' cy='200' r='50'/%3E%3Cg fill='%2357047e' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%235f0587' cx='50' cy='300' r='50'/%3E%3Cg fill='%2367068f' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%236f0798' cx='50' cy='400' r='50'/%3E%3Cg fill='%237707a0' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%238008a9' cx='50' cy='500' r='50'/%3E%3Cg fill='%238909b1' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%239109ba' cx='50' cy='600' r='50'/%3E%3Cg fill='%239a09c3' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a309cb' cx='50' cy='700' r='50'/%3E%3Cg fill='%23ad09d4' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b608dc' cx='50' cy='800' r='50'/%3E%3Cg fill='%23c007e5' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23c905ee' cx='50' cy='900' r='50'/%3E%3Cg fill='%23d303f6' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23D0F' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.modal-wrapper {
position: relative;
width: 80vw;
/* max-width: 400px; */
height: 90vh;
display: flex;
flex-flow: column wrap;
background-color: #ffffff;
color: #2b2d42;
overflow: hidden;
/* box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); */
/* border-radius: 1rem; */
}
.login-wrapper,
.signup-wrapper {
width: 100%;
/* display: flex;
align-items: center;
justify-content: flex-start;
flex-flow: column wrap; */
}
.form-wrapper {
height: 100%;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.form-heading {
margin: 3vh auto 1vh auto;
}
.other-icons {
margin-bottom: 2vh;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.other-icons a {
text-decoration: none;
}
.other-icons .fab {
font-size: 20px;
margin: auto 1rem;
color: #3c8ce7;
}
.form {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
}
.form span {
font-size: 12px;
color: #b8bacf;
}
.form .input-field {
position: relative;
min-width: 200px;
width: 70%;
max-width: 300px;
}
.form .input-field i {
position: absolute;
font-size: 16px;
color: #3c8ce7;
top: 16px;
left: 10px;
}
.form input {
font-size: 12px;
padding: 10px 10px 10px 40px;
background-color: #e8ebe4;
outline: none;
border: none;
border-bottom: 2px solid #b8bacf;
width: 100%;
box-sizing: border-box;
}
.form input:focus {
background-color: #d2d5dd;
}
.form input {
margin: 1vh auto;
}
.form input[type='password'] {
margin-bottom: 2vh;
}
#forgot-password {
font-size: 12px;
text-decoration: none;
color: #b8bacf;
position: relative;
}
#forgot-password::after {
display: block;
position: absolute;
left: 10%;
right: 10%;
bottom: 1px;
border-bottom: 1px solid #3c8ce7;
content: '';
}
.form-btn {
margin: 2vh auto;
background-image: linear-gradient(135deg, #3c8ce7 10%, #00eaff 100%);
color: white;
border: 1px solid white;
outline: none;
border-radius: 20px;
padding: 10px 40px;
transition: all ease-in-out 0.2s;
cursor: pointer;
}
.form-btn:hover {
border: 1px solid #3c8ce7;
color: #3c8ce7;
background: transparent;
}
/* .signup-wrapper .collapsed-section {
border-radius: 0 0 1rem 1rem;
}
.login-wrapper .collapsed-section {
border-radius: 1rem 1rem 0 0;
} */
.collapsed-section {
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, #3c8ce7 10%, #00eaff 100%);
position: relative;
z-index: 2;
}
.hide-section {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
color: white;
}
.collapsed-heading {
margin: 0;
}
.collapsed-text {
font-size: 12px;
margin: 0;
margin-bottom: 1vh;
margin-top: -10px;
letter-spacing: 1px;
}
.collapsed-btn {
background: transparent;
color: white;
border: 1px solid white;
font-weight: bold;
outline: none;
border-radius: 20px;
padding: 10px 40px;
transition: all ease-in-out 0.5s;
cursor: pointer;
}
.collapsed-btn:hover {
background-color: white;
color: #3c8ce7;
border: 1px solid white;
}
.hidden {
display: none;
}
@media screen and (min-width: 500px) {
.modal-wrapper {
width: 70%;
}
}
@media screen and (min-width: 800px) {
.modal-wrapper {
width: 80%;
height: 70vh;
flex-flow: row nowrap;
}
.collapsed-text {
font-size: 16px;
margin: 1rem;
}
}
@media screen and (min-width: 1000px) {
.modal-wrapper {
width: 70%;
}
}
@media screen and (min-width: 1200px) {
.modal-wrapper {
width: 60%;
}
}
@keyframes moveCollapsedUp {
0% {
height: 100%;
transform: translateY(0);
}
50% {
height: 200%;
transform: translateY(-83.33%);
}
100% {
height: 100%;
transform: translateY(-233.33%);
}
}
@keyframes moveCollapsedDown {
0% {
height: 100%;
transform: translateY(0);
}
50% {
height: 200%;
transform: translateY(33.33%);
}
100% {
height: 100%;
transform: translateY(233.33%);
}
}
@keyframes moveFormUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-42.85%);
}
}
@keyframes moveFormDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(42.85%);
}
}
@keyframes moveLeft {
0% {
width: 100%;
transform: translateX(0%);
}
50% {
width: 150%;
transform: translateX(-50%);
}
100% {
width: 100%;
transform: translateX(-100%);
}
}
@keyframes moveRight {
0% {
width: 100%;
transform: translateX(0%);
}
50% {
width: 150%;
transform: translateX(16.66%);
}
100% {
width: 100%;
transform: translateX(100%);
}
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
//DIVS to toggle
var loginForm = document.querySelector(".login-wrapper").querySelector(".form-wrapper");
var loginCollapsed = document.querySelector(".login-wrapper").querySelector(".collapsed-section");
var signupForm = document.querySelector(".signup-wrapper").querySelector(".form-wrapper");
var signupCollapsed = document.querySelector(".signup-wrapper").querySelector(".collapsed-section");
var loginHide = loginCollapsed.querySelector(".hide-section");
var signupHide = signupCollapsed.querySelector(".hide-section");
var loginOpen = true;
var animationDuration = 1000;
function toggleOpen() {
loginOpen = !loginOpen;
//Animation
if (window.matchMedia("(max-width: 799px)").matches) {
//MOBILE
if (!loginOpen) {
signupCollapsed.style.animation = `moveCollapsedUp ${animationDuration}ms ease-in-out 0s`;
signupHide.style.animation = `fade ${animationDuration}ms ease-in-out 0s`;
loginForm.style.animation = `moveFormDown ${animationDuration}ms ease-in-out 0s, fade ${animationDuration}ms ease-in-out 0s`;
}
else {
loginCollapsed.style.animation = `moveCollapsedDown ${animationDuration}ms ease-in-out 0s`;
loginHide.style.animation = `fade ${animationDuration}ms ease-in-out 0s`;
signupForm.style.animation = `moveFormUp ${animationDuration}ms ease-in-out 0s, fade ${animationDuration}ms ease-in-out 0s`;
}
}
else {
//DESKTOP
if (!loginOpen) {
signupCollapsed.style.animation = `moveLeft ${animationDuration}ms ease-in-out 0s`;
signupHide.style.animation = `fade ${animationDuration}ms ease-in-out 0s`;
loginForm.style.animation = `moveRight ${animationDuration}ms ease-in-out 0s, fade ${animationDuration}ms ease-in-out 0s`;
}
else {
loginCollapsed.style.animation = `moveRight ${animationDuration}ms ease-in-out 0s`;
loginHide.style.animation = `fade ${animationDuration}ms ease-in-out 0s`;
signupForm.style.animation = `moveLeft ${animationDuration}ms ease-in-out 0s, fade ${animationDuration}ms ease-in-out 0s`;
}
}
setTimeout(makeChanges, animationDuration);
}
function makeChanges() {
//CHANGE VISIBILITY OF ALL ELEMENTS
loginForm.classList.toggle("hidden");
loginCollapsed.classList.toggle("hidden");
signupForm.classList.toggle("hidden");
signupCollapsed.classList.toggle("hidden");
changeOrientation();
//Remove Aniamtions
signupCollapsed.style.animation = "none";
signupForm.style.animation = "none";
signupHide.style.animation = "none";
loginCollapsed.style.animation = "none";
loginHide.style.animation = "none";
loginForm.style.animation = "none";
}
function changeOrientation() {
if (window.matchMedia("(max-width: 799px)").matches) {
if (loginOpen) {
document.querySelector(".login-wrapper").style.height = "70%";
document.querySelector(".signup-wrapper").style.height = "30%";
}
else {
document.querySelector(".login-wrapper").style.height = "30%";
document.querySelector(".signup-wrapper").style.height = "70%";
}
}
else {
document.querySelector(".login-wrapper").style.height = "100%";
document.querySelector(".signup-wrapper").style.height = "100%";
}
}
window.addEventListener("resize", changeOrientation);
changeOrientation();