Responsive Flip Effect Sign in and Sign up Form in HTML and CSS
Designing of attractive sign-in/sign-up forms is critical to any site that demands users to register or login. A good design is the Responsive Flip Effect Sign in and Sign up Form in HTML having a professional interface and an HTML5 CSS3 flip transition when switching between the two forms.
The form design with this interface is not only logical and practical but also provides a stylish look and feel to the users.
If you want to know how to implement this?
Good news – I will show you an easy way with free source code of responsive flip effect form to implement with your website.
GitHub Source: Responsive Flip Effect Sign in and Sign up Form
Features
This Responsive Flip Effect Sign in and Sign up Form includes the following features:
- Customization: Design is quite simple and this is useful when changing the color, size and the format of the layout.
- Compatibility: It can be easily installed in WordPress, Joomla or any other CMS.
- Clean Code: : The HTML and CSS code is very clean and well-commented so it is easy to follow along using the tutorial provided.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Video Tutorial
Steps to Build Form
- Create Project Folder: First, let’s create a new folder where you will save all the necessary files.
- Create index.html: In the folder, create an HTML document by using an index.html file.
- Create style.css: Create a style.css file to put the layout for the flip as well as the layout of the site.
- Copy & Paste the Code Below: Just use the code snippets given below and you have to just place our HTML and CSS code in your HTML and CSS files respectively.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<!-- Coding by JV Codes | www.jvcodes.com-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Responsive Flip Effect Sign in and Sign up Form </title>
<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">
</head>
<body>
<div class="container">
<input type="checkbox" id="flip">
<div class="cover">
<div class="front">
<img src="https://plus.unsplash.com/premium_photo-1661274209157-118069b926f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="text">
<span class="text-1">Every new friend is a <br> new adventure</span>
<span class="text-2">Let's get connected</span>
</div>
</div>
<div class="back">
<img class="backImg" src="https://plus.unsplash.com/premium_photo-1661274209157-118069b926f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
<div class="text">
<span class="text-1">Complete miles of journey <br> with 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" placeholder="Enter your email" required>
</div>
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="text"><a href="#">Forgot password?</a></div>
<div class="button input-box">
<input type="submit" value="Sumbit">
</div>
<div class="text sign-up-text">Don't have an account? <label for="flip">Sigup now</label></div>
</div>
</form>
</div>
<div class="signup-form">
<div class="title">Signup</div>
<form action="#">
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" placeholder="Enter your name" required>
</div>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email" required>
</div>
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="button input-box">
<input type="submit" value="Sumbit">
</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
Here is the complete code for style.css file to style the form:
/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
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: #ff5411;
padding: 30px;
}
.container {
position: relative;
max-width: 850px;
width: 100%;
background: #fff;
padding: 40px 30px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
perspective: 2700px;
}
.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;
backface-visibility: hidden;
}
.container #flip:checked ~ .cover {
transform: rotateY(-180deg);
}
.container #flip:checked ~ .forms .login-form {
pointer-events: none;
}
.container .cover .front,
.container .cover .back {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cover .back {
transform: rotateY(180deg);
}
.container .cover img {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 10;
}
.container .cover .text {
position: absolute;
z-index: 10;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container .cover .text::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
opacity: 0.5;
background: #2a76e8;
}
.cover .text .text-1,
.cover .text .text-2 {
z-index: 20;
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;
}
.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: #004bbb;
}
.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: #004bbb;
}
.form-content .input-box i {
position: absolute;
color: #004bbb;
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;
}
.text a {
color: #004bbb; /* Replace #007bff with your preferred color */
text-decoration: none; /* Optional: removes underline */
}
.text a:hover {
color: #002c6e; /* Replace #0056b3 with your preferred hover color */
}
.forms .form-content .button {
color: #fff;
margin-top: 40px;
}
.forms .form-content .button input {
color: #fff;
background: #004bbb;
border-radius: 6px;
padding: 0;
cursor: pointer;
transition: all 0.4s ease;
}
.forms .form-content .button input:hover {
background: #002c6e;
}
.forms .form-content label {
color: #004bbb;
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;
}
}
Download Source Code
So you can get the whole source code of the Responsive Flip Effect Sign in and Sign up Form in HTML without any problem of copyright infringement. All you have to do is click the button below to obtain the code, and you can then implement this stylish form on your website.
Conclusion
Please feel free to integrate this code in your websites and do not forget to link back to JV Source Codes. I hope you liked the video make sure to subscribe to our channel for more tutorials. If there are any questions regarding this code – feel free to comment – I am happy to assist!
