Posted on May 20, 2021, 8 p.m. by Bishal ( 7902)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Login Form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
div
containers.
<div class="wrapper">
<div class="form-title">
<div class="form-field">
<div class="link">
</div>
</div>
</div>
</div>
div
now add the label and the input fields. Make sure to put them inside "form-field"
<input type="text" id="email" placeholder="Email Address" required>
<input type="password" id="password" placeholder="Email Address" required>
<input type="submit" value="Login" title="Login Now">
style.css
<head> </head>
of your HTML document:
<link href="style.css" rel="stylesheet">
style.css
file:@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 370px;
border-radius: 20px;
box-shadow: 1px 1px 15px 15px rgba(0,0,0,0.5);
}
.wrapper > .form-title{
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 100px;
color:white;
user-select: none;
border-radius: 15px 15px 0 0;
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.wrapper > form{
padding: 20px 40px 60px 30px;
}
.wrapper > form > .form-field{
height: 50px;
width: 100%;
margin-top: 20px;
position: relative;
}
.wrapper > form .form-field > input{
height: 100%;
width: 100%;
outline: none;
font-size: 20px;
padding-left: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 25px;
}
.wrapper > form .form-field > input:focus{
border-color: #1030d3;
}
.wrapper > form > .form-field label{
position: absolute;
top: 50%;
left: 20px;
color: #6d6d6d;
font-weight: 400;
font-size: 20px;
pointer-events: none;
transform: translateY(-50%);
}
form > .form-field > input:focus ~ label{
top: 0%;
font-size: 20px;
border-color: #052fff;
}
form > .form-field > input[type="submit"]{
color: #fff;
border: none;
padding-left: 0;
font-size: 20px;
font-weight: 500;
cursor: pointer;
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
form > .form-field > input[type="submit"]:hover{
background: #12c2e9bd; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
background: linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
transform: scale(1.11);
}
form > .link{
margin-top: 25px;
text-align: center;
}
form > .link a{
color: #132ecc;
}
<!DOCTYPE html>
<html>
<head>
<title>Login Form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="wrapper">
<div class="form-title">Login Form</div>
<form>
<div class="form-field">
<input type="text" id="email" placeholder="Email Address" required>
</div>
<div class="form-field">
<input type="password" id="password" placeholder="Password" required>
</div>
<div class="form-field">
<input type="submit" value="Login" title="Login Now">
</div>
<div class="link">Not a member? <a href="#" title="Sign up now">Signup now</a></div>
</form>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 370px;
border-radius: 20px;
box-shadow: 1px 1px 15px 15px rgba(0,0,0,0.5);
}
.wrapper > .form-title{
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 100px;
color:white;
user-select: none;
border-radius: 15px 15px 0 0;
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.wrapper > form{
padding: 20px 40px 60px 30px;
}
.wrapper > form > .form-field{
height: 50px;
width: 100%;
margin-top: 20px;
position: relative;
}
.wrapper > form .form-field > input{
height: 100%;
width: 100%;
outline: none;
font-size: 20px;
padding-left: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 25px;
}
.wrapper > form .form-field > input:focus{
border-color: #1030d3;
}
.wrapper > form > .form-field label{
position: absolute;
top: 50%;
left: 20px;
color: #6d6d6d;
font-weight: 400;
font-size: 20px;
pointer-events: none;
transform: translateY(-50%);
}
form > .form-field > input:focus ~ label{
top: 0%;
font-size: 20px;
border-color: #052fff;
}
form > .form-field > input[type="submit"]{
color: #fff;
border: none;
padding-left: 0;
font-size: 20px;
font-weight: 500;
cursor: pointer;
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
form > .form-field > input[type="submit"]:hover{
background: #12c2e9bd; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
background: linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
transform: scale(1.11);
}
form > .link{
margin-top: 25px;
text-align: center;
}
form > .link a{
color: #132ecc;
}