Hello Guys In This Post I will teach you how to create amazing How to Create Responsive Signup and Login Form Using HTML and CSS only.
Full Video Tutorial is on my Youtube Channel.
Here Is the HTML code for Signup Form.👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custon CSS -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome CDN -->
<script src="https://kit.fontawesome.com/8385bc9e15.js" crossorigin="anonymous">
</script>
<title>Form</title>
</head>
<body>
<div class="container">
<div class="form">
<h1>Sign Up</h1>
<form action="">
<div class="form-input">
<i class="fa-solid fa-user"></i>
<input type="text" placeholder="Name">
<span class="bar"></span>
</div>
<div class="form-input">
<i class="fa-solid fa-envelope"></i>
<input type="email" placeholder="Email">
<span class="bar"></span>
</div>
<div class="form-input">
<i class="fa-solid fa-phone"></i>
<input type="tel" placeholder="Contact Number">
<span class="bar"></span>
</div>
<div class="form-input">
<i class="fa-solid fa-lock"></i>
<input type="password" placeholder="password">
<span class="bar"></span>
</div>
<button type="submit" class="submit-btn">Sign Up</button>
<span class="switch-login">Already Have an account. <a href="#">
Login</a></span>
</form>
</div>
</div>
</body>
</html>
Here Is the CSS code for Signup Form.👇
*{ margin: 0; padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html{
font-size: 62.5%;
}
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #161834;
}
.container .form{
flex-basis: 100%;
max-width: 40rem;
/* overflow: hidden; */
background-color: #fff;
z-index: 1;
padding: 10rem 0;
position: relative;
border-radius: 14px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.1)
}
.container .form::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20rem;
background: linear-gradient(to left, #E97777, #FCDDB0);
border-radius: 0 0 100% 100%;
transition: all .3s;
z-index: -1;
}
.form h1{
position: absolute;
top: 4rem;
left:10rem;
color: #432C7A;
font-size: 2.5rem;
transition: all 0.3s;
}
.form form{
background-color: #fff;
padding: 4rem 2rem;
border-radius: 14px;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.1)
}
.form form{
transform: translateX(10rem);
transition: all 0.3s;
}
.form .form-input{
position: relative;
display: flex;
align-items: baseline;
margin: 0 auto;
}
.form-input i{
font-size: 1.5rem;
color: #fc6767;
margin-right: 1rem;
}
.form-input input{
width: 100%;
border: none;
outline: none;
font-size: 1.5rem;
color: #000;
padding: 1rem 0;
}
.form-input .bar{
position: absolute;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 1px;
}
.form-input .bar::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: #fc6767;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s;
}
.form-input input:focus+ .bar::after{
transform: scaleX(1);
}
form .submit-btn{
display: block;
border: none;
outline: none;
font-size: 1.5rem;
color: #432C7A;
font-weight: 600;
background: linear-gradient(to right, #E97777, #FCDDB0);
border-radius: 30px;
padding: 1rem 3.5rem;
margin: 3rem auto 2rem;
text-align: center;
cursor: pointer;
transition: all .3s;
}
form .submit-btn:hover{
background: linear-gradient(to left, #E97777, #FCDDB0);
}
form .switch-login{
display: block;
text-align: center;
font-size: 1.5rem;
color: #000;
}
form .switch-login a{
text-decoration: none;
color: #432C7A;
font-weight: 600;
}
form .switch-login a:hover{
text-decoration: underline;
}
@media (max-width:1024px){
.form h1{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.form form{
transform: translateX(0);
border-radius: unset;
box-shadow: unset;
}
.container .form::before{
height: 10rem;
}
}
