<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 ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
<div class="box">
<div class="form">
<h2>Login</h2>
<form action="index.html">
<div class="inputBx">
<input type="text" placeholder="Username" required />
<i class="fa fa-user"></i>
<!-- <img src="" alt="" class="fa fa-user" /> -->
</div>
<div class="inputBx">
<input type="password" placeholder="Password" required />
<i class="fa fa-lock"></i>
<!-- <img src="" alt="" class="fa fa-lock" /> -->
</div>
<label class="remember">
<input type="checkbox" required /> Remebre Me
</label>
<div class="inputBx">
<input type="submit" value="Submit" />
</div>
</form>
<p>Forgot <a href="#">Password</a></p>
<p>Need an <a href="#">Account</a></p>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(
-30deg,
#03a9f4 0%,
#3a78b7 50%,
#262626 50%,
#607d8b 100%
);
filter: hue-rotate(120deg);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.box {
position: relative;
padding: 50px;
width: 360px;
height: 480px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
}
.box:after {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 5px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.1) 15%,
transparent 85%,
rgba(255, 255, 255, 0.3) 100%
);
}
.box .form {
position: relative;
width: 100%;
}
.box .form h2 {
color: #fff;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 30px;
}
.box .form .inputBx {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.box .form .inputBx input {
width: 100%;
outline: none;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
padding: 8px 10px;
padding-left: 35px;
border-radius: 6px;
color: #fff;
font: 16px;
font-weight: 300;
box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
}
.box .form .inputBx input::placeholder {
color: #fff;
}
.box .form .inputBx input[type="submit"] {
background: #fff;
color: #111;
max-width: 100px;
padding: 8px 10px;
box-shadow: none;
letter-spacing: 1px;
font-weight: 500;
cursor: pointer;
}
.box .form .inputBx .fa {
position: absolute;
top: 8px;
left: 10px;
font-size: 26px;
color: #fff;
transform: scale(0.7);
filter: invert(1);
}
.remember {
position: relative;
display: inline-block;
color: #fff;
font-weight: 300;
margin-bottom: 10px;
cursor: pointer;
}
.box .form p {
color: #fff;
font-weight: 300;
font-size: 15px;
margin-top: 5px;
}
.box .form a {
color: #fff;
}
