 <div class="account-info mdl-color--primary">

            <div class="account-navigation"> <!-- top icons -->
              <a class="mdl-button mdl-js-button mdl-button--icon left" href="index.html">
                <i class="material-icons">arrow_back</i>
              </a>
              <button class="mdl-button mdl-js-button mdl-button--icon right">
                <i class="material-icons">close</i>
              </button>
              <div class="clr"></div>

              <div class="minilogo-account user1"></div> <!-- user -->
              <span>Sign in to your Account</span>
            </div>
          </div>

          <div class="account-data"> <!-- text fields -->
            <form action="#">
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
                <input class="mdl-textfield__input" type="text" id="sample1" />
                <label class="mdl-textfield__label" for="sample1">Enter your email</label>
              </div>
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
                <input class="mdl-textfield__input" type="password" id="sample2" />
                <label class="mdl-textfield__label" for="sample2">Password</label>
              </div>
            </form>

            <a class="left" href="#">Forgot password?</a>
            <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary right" href="index.html">                
              Login
            </a>
            <div class="clr"></div>            
          </div>
