Responsive Sign In & Sign Up Form Using HTML , CSS And JS With Source Code
Introduction
Hello developers, all of you are welcome to this blog post. Today we have created a sign in and sign up form. It is user friendly as well as fully responsive. To create this form, we have used HTML CSS and JavaScript.
We have divided this form into two parts, one is sign in form and the other is sign up form. If you go to sign form and you have to do sign up, then you can go from sign in to sign up form in one click. We have added this because when the user comes to our website, he will not have any problem in signing in or signing up, due to which the user will have a good experience towards our website.
Steps to Create a Sign In & Sign Up Form:-
To use the code of this form, you have to keep some things in mind like how to create a folder and how to link other important files in the HTML file. It is important to keep these things in mind, so let us know. is step b step.
- To use Sign In Form and Sign Up Form, create a folder in your computer or laptop, which you can name as per your choice.
- If you have created a folder in your computer, now open it in whatever code editor you use.
- If you have opened the folder in your code editor, then now you will have to create important files which are index.html, style.css and script.js.
- Now you will have to link these three files to each other. Use this tag to link css to the HTML file.<link rel=”stylesheet” href=”style.css”> Use this tag to link JavaScript <script src=”script.js”></script> Now all your files are linked.
HTML (index.html)
Get Discount on Top Educational Courses
<title>Sign in & Sign up Form</title>
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
</div>
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
</div>
<p class="social-text">Or Sign up with social platforms</p>
<div class="social-media">
<a href="#" class="social-icon">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-google"></i>
</a>
<a href="#" class="social-icon">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Discover a world of possibilities! Join us and explore a vibrant
community where ideas flourish and connections thrive.
</p>
<button class="btn transparent" id="sign-up-btn">
Sign up
</button>
</div>
<img decoding="async" src="https://i.ibb.co/6HXL6q1/Privacy-policy-rafiki.png" class="image" alt="" />
</div>
<div class="panel right-panel">
<div class="content">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>
Thank you for being part of our community. Your presence enriches our
shared experiences. Let's continue this journey together!
</p>
<button class="btn transparent" id="sign-in-btn">
Sign in
</button>
</div>
<img decoding="async" src="https://i.ibb.co/nP8H853/Mobile-login-rafiki.png" class="image" alt="" />
</div>
</div>
</div>
CSS (Style.css)
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body,
input {
font-family: 'Montserrat', sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #fff;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.signin-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.sign-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: black;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 5px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #333;
border-radius: 50%;
border: 1px solid #333;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: orangered;
border-color: orangered;
}
.btn {
width: 150px;
background-color: black;
border: none;
outline: none;
height: 49px;
border-radius: 4px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #000000;
color: white;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, black 0%, rgb(0, 255, 170) 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: none;
border: 2px solid #fff;
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .signin-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.sign-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
@media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.signin-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.signin-signup,
.container.sign-up-mode .signin-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .signin-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
@media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
Javascript (Script.js)
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
Drawing Chhatrapati Shivaji Maharaj Using Python Chhatrapati Shivaji Maharaj, the legendary Maratha warrior and founder of the Maratha Empire, is an inspiration …
Resume Builder Application using Java With Source Code Graphical User Interface [GUI] Introduction: The Resume Builder Application is a powerful and user-friendly …
Encryption Tool using java with complete source Code GUI Introduction: The Encryption Tool is a Java-based GUI application designed to help users …
Movie Ticket Booking System using Java With Source Code Graphical User Interface [GUI] Introduction: The Movie Ticket Booking System is a Java …
Get Huge Discounts
More Python Projects
