Material Design Sign In Form

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css">

<div class="view">
    
  <div class="container">
      <div class="row">
          <div class="col-md-5 m-x-auto pull-xs-none">
              
              <!--Panel-->
              <div class="card card-block z-depth-5 white-text">
                  <a href="#" class="card-link white-text active">SING IN</a>
                  <a href="#" class="card-link white-text">SING UP</a>

                  <div class="md-form m-t-3">
                      <input type="text" id="form1" class="form-control">
                      <label for="form1" class="">Username</label>
                  </div>


                  <div class="md-form">
                      <input type="password" id="form1" class="form-control">
                      <label for="form1" class="">Password</label>
                  </div>

                  <div class="text-xs-center">
                      <a href="#" class="btn btn-indigo">LOGIN</a>
                      <h5><a href="#" class="white-text">Forgot password?</a></h5>
                  </div>
              </div>
              <!--/.Panel-->

          </div>
      </div>
  </div>
</div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/js/mdb.min.js"></script>

html,
        body,
        .view {
            height: 100%;
        }
        
        .view {
            background: url("https://mdbootstrap.com/images/regular/nature/img%20(14).jpg")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
         
         .card {
             margin: 3rem 0;
             background-color: rgba(0, 0, 0, 0.15);
             padding: 30px;
         }
         .card-link {
             font-size: 19px;
         }
         
         .card-link.active {
             padding-bottom: 3px;
             border-bottom: 2px solid #0d47a1;
         }
         h5 {
             margin-top: 1rem;
         }
         input[type="text"]:focus:not([readonly]) {
			border-color:#0d47a1;
			box-shadow:0 1px 0 0 #0d47a1;
			color:#fff;
		}

    input[type="password"]:focus:not([readonly]) {
			border-color:#0d47a1;
			box-shadow:0 1px 0 0 #0d47a1;
			color:#fff;
		}

		input[type="text"]:not([readonly])+label {
			color:#fff;
		}

		input[type="text"]:focus:not([readonly])+label {
			color:#fff;
		}

    input[type="password"]:not([readonly])+label {
			color:#fff;
		}

		input[type="password"]:focus:not([readonly])+label {
			color:#fff;
		}