.png)
Description
A developer's journey through code. I build, I break, and I write about it. Explore articles on modern software development, programming tips, and more.
Foldable Login & Registration form
Published in: 2023-11-21 12:30:26 Author: SunshineIHCTS Section: HTML and CSS
Greetings, adventurers! Today, I am thrilled to share with you a unique and stylish Foldable Login & Registration Form that I have crafted for you and you are free to use the source code on your project as I will be including on this article. This sleek and responsive form is not just functional but adds a touch of creativity to your web projects. Whether you are a developer looking for a cool login solution or someone who appreciates good design, this one is for you.
As you navigate through the folds of this form (Login and Register), you will be greeted by captivating visuals and an interactive design that makes the login and registration process more engaging. The form seamlessly transitions between the login and register views with a smooth flip effect including cool images that illustrates each side of the form, adding an element of surprise for your users.
SOURCE CODES
Let me break down the structure of this form. The HTML structure is clean and organized, providing a solid foundation for the CSS magic to unfold. The use of Font Awesome icons and carefully selected images enhances the overall aesthetics.
HTML:
<!DOCTYPE html>
<!-- Created by SunshineIHCTS |visit sunshineihcts.com-->
<html lang="en">
<head>
<title>Foldable Login & Registration form</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- control responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<input type="checkbox" id="flip">
<div class="cover">
<div class="front">
<img src="images/doorclosed.jpg" alt="closed door">
<div class="text">
<span class="text-1">Access the world of <br> new adventure</span>
<span class="text-2">Let's get connected</span>
</div>
</div>
<div class="back">
<img class="backImg" src="images/reception.jpg" alt="reception">
<div class="text">
<span class="text-1">Start a new adventure<br> in one step</span>
<span class="text-2">Let's get started</span>
</div>
</div>
</div>
<div class="forms">
<div class="form-content">
<div class="login-form">
<div class="title">Login</div>
<form action="#">
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" name="email" placeholder="Enter your email" required>
</div>
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Enter your password" required>
</div>
<div class="text"><a href="#">Forgot password?</a></div>
<div class="button input-box">
<input type="submit" name="login" value="Login">
</div>
<div class="text sign-up-text">Don't have an account? <label for="flip">Register now</label></div>
</div>
</form>
</div>
<div class="signup-form">
<div class="title">Register</div>
<form action="#">
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" name="name" placeholder="Enter your name" required>
</div>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" name="email2" placeholder="Enter your email" required>
</div>
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" name="password2" placeholder="Enter your password" required>
</div>
<div class="button input-box">
<input type="submit" name="register" value="Register">
</div>
<div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #076268;
padding: 30px;
}
.container{
position: relative;
max-width: 850px;
width: 100%;
background: #fff;
padding: 40px 30px;
box-shadow: 5 10px 20px rgba(0,0,0,0.2);
perspective: 2700px;
border-radius: 5%;
}
.container .cover{
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 50%;
z-index: 98;
transition: all 1s ease;
transform-origin: left;
transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
transform: rotateY(-180deg);
backface-visibility: hidden;
}
.container .cover .front,
.container .cover .back{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cover .back{
transform: rotateY(180deg);
}
.container .cover::before,
.container .cover::after{
content: '';
position: absolute;
height: 100%;
width: 100%;
background: #076268;
opacity: 0.5;
z-index: 12;
}
.container .cover::after{
opacity: 0.3;
transform: rotateY(180deg);
backface-visibility: hidden;
}
.container .cover img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 10;
border-radius: 5%;
}
.container .cover .text{
position: absolute;
z-index: 130;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
font-size: 26px;
font-weight: 600;
color: #fff;
text-align: center;
}
.cover .text .text-2{
font-size: 15px;
font-weight: 500;
}
.container .forms{
height: 100%;
width: 100%;
background: #fff;
}
.container .form-content{
display: flex;
align-items: center;
justify-content: space-between;
}
.forms .text a{
text-decoration: dotted;
color: #076268;
}
.form-content .login-form,
.form-content .signup-form{
width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
position: relative;
font-size: 24px;
font-weight: 500;
color: #333;
}
.forms .form-content .title:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 25px;
background: #076268;
}
.forms .signup-form .title:before{
width: 20px;
}
.forms .form-content .input-boxes{
margin-top: 30px;
}
.forms .form-content .input-box{
display: flex;
align-items: center;
height: 50px;
width: 100%;
margin: 10px 0;
position: relative;
}
.form-content .input-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
border-color: #076268;
}
.form-content .input-box i{
position: absolute;
color: #076268;
font-size: 17px;
}
.forms .form-content .text{
font-size: 14px;
font-weight: 500;
color: #333;
}
.forms .form-content .text a{
text-decoration: none;
}
.forms .form-content .text a:hover{
text-decoration: underline;
}
.forms .form-content .button{
color: #fff;
margin-top: 40px;
}
.forms .form-content .button input{
color: #fff;
background: #076268;
border-radius: 6px;
padding: 0;
cursor: pointer;
transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
background: #076268;
}
.forms .form-content label{
color: #076268;
cursor: pointer;
}
.forms .form-content label:hover{
text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
text-align: center;
margin-top: 25px;
}
.container #flip{
display: none;
}
@media (max-width: 730px) {
.container .cover{
display: none;
}
.form-content .login-form,
.form-content .signup-form{
width: 100%;
}
.form-content .signup-form{
display: none;
}
.container #flip:checked ~ .forms .signup-form{
display: block;
}
.container #flip:checked ~ .forms .login-form{
display: none;
}
}
INSTRUCTION:
To make this form truly yours, feel free to customize the images, colors, and content. The CSS is designed to be easily modifiable, allowing you to adapt it to your website's appearance seamlessly. Follow the steps below to implement this form on your project:
- Copy the HTML code into your project or download the source code below.
- Copy the CSS code into your project or download the source code below.
- Make sure you link your HTML and CSS properly.
- The source code is in a zip file, make sure to extract after downloading or follow the guide in the video below.
You may like:
Copyright © 2018 - 2026 SunshineIHCTS | All rights reserved. Powered by 
Comments section
You need to be logged in to comment, Login or Register.Approved comments:
No comments yet! be the first to comment