<!DOCTYPE>
<html>
  <head>
    <title>Login form</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <div class="container">
    <div class="form">
      <h3 class="title">Login to Fitness Champ</h3>
      <form>
        <div class="form-group">
          <input type="text" required/><label>Username</label>
        </div>
        <div class="form-group">
          <input type="password" required/><label>Password</label>
        </div>
        <input type="button" value="Sign In" class="submit"> 
        <div class="row">
          <p>Not Yet Registered? <a href="#">Sign Up</a></p>
        </div>
      </form>
    </div>
    <div class="last">
      <a href="#">T&C</a>
      <a href="#">Policy</a>
    </div>
  </div>
</body>
</html>
html{
  font-family:sans-serif;
} 
body{
      background: url(https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); /*Any Image or color*/
    color: white;
    background-size: cover;
    }
.container{
    width: 330px;
    margin: auto;
    margin-top: 10%;
    padding: 5px;
    backdrop-filter: blur(17px) saturate(200%);
    -webkit-backdrop-filter: blur(17px) saturate(200%);
    background-color: rgba(190, 190, 190, 0.44);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
}
.title{
  text-align: center;
    color: #b82800;
    font-weight: 400;
}
.form{
  padding: 15px;
}
.form-group {
position: relative;
padding: 20px 0;
margin: auto;
max-width: 100%;
}

.form-group input {
background-color: transparent;
border: none;
border-bottom: 1.4px solid #d8d7d7;
font-size: 18px;
padding: 10px 0;
display: block;
width: 100%;
}

.form-group label {
color: #f0eaea;
font-size: 16px;
font-weight: 100;
position: absolute;
pointer-events: none;
top: 0;
transform: translateY(30px);
transition: all 0.2s ease-in-out;
left: 0px;
}

.form-group input:valid,
.form-group input:focus {
border-bottom-color: #dddddd;
outline: none;
}

.form-group input:valid + label,
.form-group input:focus + label {
color: rgb(247, 247, 247);
font-size: 14px;
transform: translateY(0);
}
.submit{
  background: rgb(218 51 3);
    padding: 7px 0;
    outline: none;
    font-size: 18px;
    width: 100%;
    margin: 17px 0;
    cursor: pointer;
    color: rgb(226, 224, 224);
    border-radius: 5px;
    transition: 0.1s;
    border: 1px solid rgb(218 51 3);
}
.submit:hover{
  background: rgba(216, 214, 214, 0.301);
  color: rgb(218 51 3);
}
a{ /*globally*/
  text-decoration: none;
}
.row a{
  color: rgb(218 51 3);
}
a:hover{ /*For all links*/
  color: white;
}
.last{
  text-align: center;
    padding: 5px;
}
.last a{
  margin: 0 10px;
  font-size: 14px;
  color: #66C1E5;
}
//https://www.instagram.com/coding_dev_/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.