Bootstrap Login Form Gradient Pink And Blue Template Free Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
.register-photo {
background: #f1f7fc;
padding: 80px 0;
}
.register-photo .image-holder {
display: table-cell;
background: url("../../assets/img/graphic-design.png") space, #ffffff;
background-size: auto, auto;
text-align: right;
width: 484px;
}
.register-photo .form-container {
display: table;
max-width: 900px;
width: 90%;
margin: 0 auto;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.register-photo form {
display: table-cell;
width: 400px;
background-color: #ffffff;
padding: 40px 60px;
color: #505e6c;
}
@media (max-width:991px) {
.register-photo form {
padding: 40px;
}
}
.register-photo form h2 {
font-size: 24px;
line-height: 1.5;
margin-bottom: 30px;
}
.register-photo form .form-control {
background: #f7f9fc;
border: none;
border-bottom: 1px solid #dfe7f1;
border-radius: 0;
box-shadow: none;
outline: none;
color: inherit;
text-indent: 6px;
height: 40px;
}
.register-photo form .form-check {
font-size: 13px;
line-height: 20px;
}
.register-photo form .btn-primary {
background: #f4476b;
border: none;
border-radius: 4px;
padding: 11px;
box-shadow: none;
margin-top: 35px;
text-shadow: none;
outline: none !important;
}
.register-photo form .btn-primary:hover,
.register-photo form .btn-primary:active {
background: #eb3b60;
}
.register-photo form .btn-primary:active {
transform: translateY(1px);
}
.register-photo form .already {
display: block;
text-align: center;
font-size: 12px;
color: #6f7a85;
opacity: 0.9;
text-decoration: none;
}
.register-photo form .btn-primary {
background: linear-gradient(-120deg, rgb(255, 0, 168), rgb(5, 0, 255));
}
.register-photo {
background: linear-gradient(rgb(255, 0, 153), rgb(51, 0, 255));
height: 650px;
}
</style>
</head>
<body>
<section class="register-photo">
<div class="form-container">
<form method="post">
<h2 class="text-center"><strong>LOGIN</strong></h2>
<div class="form-group"><input class="form-control" type="email" name="email" placeholder="Email"
style="box-shadow: 0px 0px 9px 2px rgb(0,0,0);"></div>
<div class="form-group"><input class="form-control" type="password" name="password"
placeholder="Password" style="box-shadow: 0px 0px 9px 6px;"></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input class="form-check-input"
type="checkbox">I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a
class="already" href="#">You already have an account? Login here.</a>
</form>
</div>
</section>
</body>
</html>
Solve This Problem
- Bootstrap Login Page Template Free Download
- Bootstrap Login And Registration Form Template Free Download
- Responsive Login Page Template Free Download
- Responsive Login Page Template Bootstrap 4
- Login Page Design In Html With Source Code Free Download
- Login And Registration Form In Html Template Free Download
- Bootstrap Login Modal Template Free Download
- Login Template Html