Project Gallery
Explore All-in-One Login & Sign-Up in detail
3
/3
100%
100%
100%
Project Overview
All-in-One Login & Sign-Up
Project Description
This fully self-contained HTML file combines HTML, CSS, and JavaScript for a smooth, double-slider login and sign-up experience. Open it directly in any browser to see perfectly aligned, responsive forms with seamless transitions and modern design.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In / Sign Up</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- Boxicons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div id="container" class="container">
<div class="row">
<!-- SIGN UP -->
<div class="col align-items-center flex-col sign-up">
<div class="form-wrapper align-items-center">
<div class="form sign-up">
<div class="input-group">
<i class='bx bxs-user'></i>
<input type="text" placeholder="Username">
</div>
<div class="input-group">
<i class='bx bx-mail-send'></i>
<input type="email" placeholder="Email">
</div>
<div class="input-group">
<i class='bx bxs-lock-alt'></i>
<input type="password" placeholder="Password">
</div>
<div class="input-group">
<i class='bx bxs-lock-alt'></i>
<input type="password" placeholder="Confirm password">
</div>
<button>Sign up</button>
<p>
<span>Already have an account?</span>
<b onclick="toggle()" class="pointer">Sign in here</b>
</p>
</div>
</div>
</div>
<!-- SIGN IN -->
<div class="col align-items-center flex-col sign-in">
<div class="form-wrapper align-items-center">
<div class="form sign-in">
<div class="input-group">
<i class='bx bxs-user'></i>
<input type="text" placeholder="Username">
</div>
<div class="input-group">
<i class='bx bxs-lock-alt'></i>
<input type="password" placeholder="Password">
</div>
<button>Sign in</button>
<p><b>Forgot password?</b></p>
<p>
<span>Don't have an account?</span>
<b onclick="toggle()" class="pointer">Sign up here</b>
</p>
</div>
</div>
</div>
</div>
<!-- CONTENT -->
<div class="row content-row">
<div class="col align-items-center flex-col">
<div class="text sign-in"><h2>Welcome</h2></div>
</div>
<div class="col align-items-center flex-col">
<div class="text sign-up"><h2>Join with us</h2></div>
</div>
</div>
</div>
</body>
</html>CSS
<style>
:root {
--success-color: #66c729;
--secondary-color: #66c729;
--black: #000000;
--white: #ffffff;
--gray: #efefef;
--gray-2: #757575;
--facebook-color: #4267B2;
--google-color: #DB4437;
--twitter-color: #1DA1F2;
--insta-color: #E1306C;
}
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
overflow: hidden;
}
.container {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.row {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.col {
width: 50%;
}
.align-items-center {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.form-wrapper {
width: 100%;
max-width: 28rem;
}
.form {
padding: 1rem;
background-color: var(--white);
border-radius: 1.5rem;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transform: scale(0);
transition: .5s ease-in-out;
transition-delay: 1s;
}
.input-group {
position: relative;
width: 100%;
margin: 1rem 0;
}
.input-group i {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
font-size: 1.4rem;
color: var(--gray-2);
}
.input-group input {
width: 100%;
padding: 1rem 3rem;
font-size: 1rem;
background-color: var(--gray);
border-radius: .5rem;
border: 0.125rem solid var(--white);
outline: none;
}
.input-group input:focus {
border: 0.125rem solid var(--primary-color);
}
.form button {
cursor: pointer;
width: 100%;
padding: .6rem 0;
border-radius: .5rem;
border: none;
background-color:#57ba29;
color: var(--white);
font-size: 1.2rem;
outline: none;
transition: .3s ease-in-out;
}
.form button:hover {
background-color: var(--secondary-color);
}
.form p {
margin: 1rem 0;
font-size: .7rem;
}
.flex-col {
flex-direction: column;
}
.pointer {
cursor: pointer;
}
.container.sign-in .form.sign-in,
.container.sign-up .form.sign-up {
transform: scale(1);
}
.content-row {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 6;
width: 100%;
}
.text {
margin: 4rem;
color: var(--white);
}
.text h2 {
font-size: 3.5rem;
font-weight: 800;
margin: 2rem 0;
transition: 1s ease-in-out;
}
.text.sign-in h2 {
transform: translateX(-250%);
}
.text.sign-up h2 {
transform: translateX(250%);
}
.container.sign-in .text.sign-in h2,
.container.sign-up .text.sign-up h2 {
transform: translateX(0);
}
/* BACKGROUND */
.container::before {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 300vw;
transform: translate(35%, 0);
background-image: linear-gradient(-45deg, var(--success-color) 0%, var(--secondary-color) 100%);
transition: 1s ease-in-out;
z-index: 6;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-bottom-right-radius: max(50vw, 50vh);
border-top-left-radius: max(50vw, 50vh);
}
.container.sign-in::before {
transform: translate(0, 0);
right: 50%;
}
.container.sign-up::before {
transform: translate(100%, 0);
right: 50%;
}
/* RESPONSIVE */
@media only screen and (max-width: 425px) {
.container::before,
.container.sign-in::before,
.container.sign-up::before {
height: 100vh;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
z-index: 0;
transform: none;
right: 0;
}
.col {
width: 100%;
position: absolute;
padding: 2rem;
background-color: var(--white);
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
transform: translateY(100%);
transition: 1s ease-in-out;
}
.row {
align-items: flex-end;
justify-content: flex-end;
}
.form {
box-shadow: none;
margin: 0;
padding: 0;
}
.text {
margin: 0;
}
.text h2 {
margin: .5rem;
font-size: 2rem;
}
}
</style>JavaScript
<script>
let container = document.getElementById('container');
const toggle = () => {
container.classList.toggle('sign-in');
container.classList.toggle('sign-up');
}
setTimeout(() => {
container.classList.add('sign-in');
}, 200);
</script>