<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Amimated Form</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-4 col-md-offset-4" id="login">
<section id="inner-wrapper" class="login">
<article>
<h2 class="text-center" style="color:#1d586a"><b>Welcome Student</b></h2>
<form>
<h2 class="text-center" style="color:#2bab92"><strong>Login Here</strong></h2>
<hr>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"> </i></span>
<input type="text" class="form-control" placeholder="UserName">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"> </i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<button type="submit" class="btn btn-success btn-block">Submit</button>
</form>
</article>
</section>
</div>
</body>
</html>
body {
background-image: radial-gradient( circle farthest-corner at -3.1% -30.3%, rgba(57,255,186,1) 20%, rgba(21,38,82,1) 60% )
}
#login {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
margin-top:50px;
margin-left:30%;
height:700px;
}
.login {
font-family: 'Josefin Sans', sans-serif;
-webkit-transition: .1s;
-moz-transition: .1s;
transition: .1s;
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
transform: rotateX(50deg);
}
.login:hover {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
}
.login article {
}
.login .form-group {
margin-bottom:17px;
}
.login .form-control,
.login .btn {
border-radius:0;
}
.login .btn {
text-transform:uppercase;
letter-spacing:3px;
}
.input-group-addon {
border-radius:0;
color:#fff;
background:#f3aa0c;
border:#f3aa0c;
}
.forgot {
font-size:16px;
}
.forgot a {
color:#333;
}
.forgot a:hover {
color:#5cb85c;
}
#inner-wrapper, #contact-us .contact-form, #contact-us .our-address {
color: #1d1d1d;
font-size: 19px;
line-height: 1.7em;
font-weight: 300;
padding: 50px;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin-top:170px;
border: 10px solid #2bab92;
border-radius: 5%;
}
.input-group-addon {
border-radius: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
color: #fff;
background: #f3aa0c;
border: #f3aa0c;
border-right-color: rgb(243, 170, 12);
border-right-style: none;
border-right-width: medium;
}
.btn-success {
color: #fff;
background-color: #2bab92;
}
