Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript

0
Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript


Hello developers, today in this blog you’ll learn to create a Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript. Earlier we have posted the Responsive Login and Signup form. Now it’s time to create a Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript.

In this blog (Responsive Login and Signup Form with Flip Animation), on the webpage, at first, the login form is displayed. If you are a registered user, you can use this login form, to enter into the page by providing your email id and password and by clicking the Submit button. Whereas, if you are a new user, you can click the button, I’m new here.

When you click that button I’m new here, the login form will flip vertically, and will show you the Register form where you can fill in your name, your email I’d, and password and click the submit button to become a registered user. To flip the form JavaScript code is used.

The source code of this Responsive Login and Signup Form with Flip Animation is given below, if you want the source code of this program, you can copy it. You can use this Responsive Login and Signup Form with Flip Animation on your projects.

Responsive Login and Signup Form with Flip Animation [Source Code]

To make this website (Responsive Login and Signup Form with Flip Animation), you need to create three files: an HTML file, a CSS file, and a JavaScript file.

First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title> LOGIN PAGE</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="bg"> <div class="card"> <div class="inner-box" id="card"> <div class="card-front"> <h2>LOGIN</h2> <form> <input type="email" class="input-box" placeholder="Your Email Id" required> <input type="password" class="input-box" placeholder="Password" required> <button type="submit" class="submit-btn">Submit</button> <input type="checkbox"><span>Remember Me</span> </form> <button type="button" class="btn" onclick="openRegister()">I'm new here</button> <a href="">Forget Password</a> </div> <div class="card-back"> <h2>REGISTER</h2> <form> <input type="text" class="input-box" placeholder="Your Name" required> <input type="email" class="input-box" placeholder="Your Email Id" required> <input type="password" class="input-box" placeholder="Password" required> <button type="submit" class="submit-btn">Submit</button> <input type="checkbox"><span>Remember Me</span> </form> <button type="button" class="btn" onclick="openLogin()">I have an account</button> <a href="">Forget Password</a> </div> </div> </div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension. 

*{
	margin: 0;
	padding: 0;
	}
.bg{
	width: 100%;
	height:100%;
	font-family: sans-serif;
	background-color: #202124;
	color: #495057;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card{
	margin-top: 70px;
	margin-bottom: 70px;
	width: 350px;
	height: 500px;
	box-shadow: 0.15s ease-in-out;
    perspective: 1000px;
	border-radius: 12px;
}
.inner-box{
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
    transition: transform 1s;
}
.card-front, .card-back{
	position: absolute;
	width: 100%;
	height: 100%;;
	background-color: #85FFBD;
	background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
	padding: 55px;
	box-sizing: border-box;
	backface-visibility: hidden;
	border-radius: 12px;
}
.card-back{
	transform: rotateY(180deg);
}
.card h2{
	font-weight: normal;
	font-size: 24px;
	text-align: center;
	margin-bottom: 20px;
	color: #400023;
}
.input-box{
	width: 100%;
	background: transparent;
	border: 1px solid #000;
	margin: 6px 0;
	height: 32px;
	border-radius: 20px;;
	padding: 0 10px;
	box-sizing: border-box;
	outline: none;
	text-align: center;
	color: #000;
}
::placeholder{
	color: 100%;
	font-size: 12px;
}
button{
	width: 100%;
	background: transparent;
	border: 1px solid #000;
	margin: 35px 0 10px;
	height: 32px;
	font-size: 12px;
	border-radius: 20px;
	padding: 0 10px;
	box-sizing: border-box;
	outline: none;
	color: #000;
	cursor: pointer;
}
.submit-btn{
	position: relative;
}

span{
	font-size: 13px;
	margin-left: 10px;
}
.card .btn{
	margin-top: 40px;
}
.card a{
	color: #fff;
	text-decoration: none;
	display: block;
    text-align: center;
    font-size: 13px;
    margin-top: 8px;
    color: #400023;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension. 

var card=document.getElementById("card");         
function openRegister()
     {
     card.style.transform = "rotateY(-180deg)";	
     }	
function openLogin()
     {
         card.style.transform = "rotateY(0deg)";	
     }
We hope you would like this Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Login and Signup Form with Flip Animation using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome