Angular Material: Simple Login Form

Login Form

Code

To Get above design copy the below code

<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

<md-input-container class="md-block md-input-has-value">
          <label for="input_63">Name/Email</label>
          <input class="ng-pristine ng-valid md-input ng-not-empty ng-touched" aria-invalid="false">
          <div class="md-errors-spacer"></div>
         </md-input-container>

<md-input-container class="md-block md-input-has-value">
          <label for="input_63">Password</label>
          <input type="password" class="ng-pristine ng-valid md-input ng-not-empty ng-touched" aria-invalid="false">
          <div class="md-errors-spacer"></div>
         </md-input-container>

<button class="md-primary md-raised md-button md-ink-ripple flex-50" type="button" ng-transclude="" flex="50">
         <span class="ng-scope">LOGIN</span>
         <div class="md-ripple-container"></div>
         </button>

<p class="makerow">Login Through Social media
    <a href="#">
      <i class="fa fa-facebook-square fa-2x" class="flex-50" aria-hidden="true"></i>
    </a>
  
  <a href="#">
      <i class="fa fa-google-plus-square fa-2x" class="flex-50" aria-hidden="true"></i>
    </a>

</md-card-content>
      </md-card>
   </body>
</html>

Angular Material

Tuesday 22 November 2016

Simple Login Form

Login Form

Code

1 comment: