<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
</head>

<body>
  <div class="section"></div>
  <main>
    <section class="center">
      <div class="container">
        <div class="z-depth-1 withe lighten-4 row  login-card">

          <form class="col s12" method="post">
            <div class='row'>
              <div class='col s12'>
                <img class="responsive-img img"  src="http://res.cloudinary.com/demeloweb/image/upload/v1503013242/imersa-logo200_dxil1i.png" />
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='email' name='email' id='email' required="required" />
                <label for='email'>Endereço de email</label>
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='password' name='password' id='password' required="required" />
                <label for='password'>Senha</label>
              </div>
              <label style='float: right;'>
                                <a class='pink-text' href='#!'><b>Esqueceu sua senha?</b></a>
                            </label>
            </div>

            <br />
            <section class="center">
              <div class='row'>
                <button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect login'>Entrar</button>
              </div>
            </section>
          </form>
        </div>
      </div>
      <a href="#!">Criar conta do cliente</a>
    </section>
  </main>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</body>

</html>

    body {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    main {
      flex: 1 0 auto;
    }

    body {
      background: #fff;
    }

    .input-field input[type=date]:focus + label,
    .input-field input[type=text]:focus + label,
    .input-field input[type=email]:focus + label,
    .input-field input[type=password]:focus + label {
      color: #39c2d7;
    }

    .input-field input[type=date]:focus,
    .input-field input[type=text]:focus,
    .input-field input[type=email]:focus,
    .input-field input[type=password]:focus {
      border-bottom: 2px solid #e91e63;
      box-shadow: none;
    }

.login {
  color-background: #00d1dc;
}

.login-card {
  display: inline-block; 
  padding: 32px 48px 0px 48px; 
  border: 1px solid #EEE;
}

.img {
  width: 200px;
}

.center {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.