<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 ---------->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="Style/css/bootstrap.min.css">
<script src="Style/js/jquery.min.js"></script>
<script src="Style/js/bootstrap.min.js"></script>
<!--Use this Link For Hover CSS-->
<link rel="stylesheet" href="Style/css/hover-min.css">
<!--Use this Link For Animate CSS -->
<link rel="stylesheet" href="Style/css/animate.css">
</head>
<div class="container-fluid animated bounceIn">
<div class="col-md-9 mx-auto mt-5 mb-5">
<div class="card border-danger shadow-lg shadow1">
<div class="card-header bg-danger border-danger text-light text-center text-uppercase text-monospace">
<h3 class="text-shadow">Login Form</h3>
</div>
<div class="card-body text-dark text-monospace">
<form>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" placeholder="Enter Your Email Address" class="form-control hvr-shadow" id="email" required>
</div>
<div class="form-group">
<label for="pass">Password</label>
<input type="password" placeholder="Enter Accout Passoword" class="form-control hvr-shadow" id="pass" required>
</div>
<div class="form-group hvr-grow">
<input type="checkbox" required><label>Remember me</label>
</div>
<div class="text-center mt-4">
<input type="submit" value="Login" class="btn btn-outline-danger w-50 hvr-grow-shadow">
</div>
<div class="text-center mt-3">
<a class="btn btn-link text-dark hvr-grow" href="Registration.html">
Register Here If You Don't Have Account?
</a>
</div>
</form>
</div>
</div>
</div>
</div>
.text-shadow {
text-shadow: 1px 2px 4px rgba(0, 0, 0, 25)
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.hvr-shadow{
display:inline-block;
vertical-align:middle;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0);
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:box-shadow;
transition-property:box-shadow
}
.hvr-shadow:active,.hvr-shadow:focus,.hvr-shadow:hover{
box-shadow:0 10px 10px -10px rgba(0,0,0,.5)
}
.hvr-grow-shadow{
display:inline-block
;vertical-align:middle;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
box-shadow:0 0 1px rgba(0,0,0,0);
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:box-shadow,transform;
transition-property:box-shadow,transform
}
.hvr-grow-shadow:active,.hvr-grow-shadow:focus,.hvr-grow-shadow:hover{
box-shadow:0 10px 10px -10px rgba(0,0,0,.5);
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.shadow1::before,
.shadow1::after {
content: '';
position: absolute;
top: 80%;
bottom: 13px;
display: block;
width: 50%;
-webkit-box-shadow: 0 15px 15px rgb(37, 37, 37);
box-shadow: 0 15px 15px rgb(37, 37, 37);
z-index: -1;
left: 10px;
}
.shadow1::before {
background: transparent;
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
.shadow1::after {
background: transparent;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
