simple login form using materializecss

index.html

<div class="container">
      <div class="row">

          <div class="col s6 offset-s3 z-depth-1" id="panell">
            <h5 id="title">Login Form</h5>
            <form>

            <div class="input-field" id="username">
              <input  type="text" class="validate">
              <label for="username">Username</label>
          </div>
          <div class="input-field" id="password">
            <input  type="password" class="validate">
            <label for="password">Password</label>
        </div>
        <p>
            <input type="checkbox" id="remember"/>
            <label for="remember" id="checkbox" >Remember me</label>
        </p>
        <a class="waves-effect waves-light btn" id="loginbtn">Login</a>
        
        </form>

        </div>
      </div>

    </div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

simple login form using materializecss.markdown

simple login form using materializecss

A Pen by hamza azri on CodePen.

License.

style.css

#panell{
     margin-top: 100px;
     padding: 0px;
   }
   #loginbtn{
     float: right;
     margin-bottom: 10px;
     margin-right: 10px;
   }
   #title{
     background-color: #2bbbad;
     color: white;
     padding: 8px;
     margin-top: 0px
   }
   form{
     padding:0px;
     border-radius: 3px;
     box-sizing: border-box;
   }
   #username,#password{
    margin-left: 20px;
    margin-right: 20px;
   }
   #checkbox{
    margin-left: 30px;
   }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet" />