Untitled

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.js"></script>
  <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
  <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
  <script type="text/javascript" src="https://js.stripe.com/v2/stripe-debug.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

<body ng-app="app" ng-controller="appCtrl">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2 flex>Hello Angular-material!</h2>
    </div>
  </md-toolbar>
  <div class="flexbox-parent">
    <div layout="row" layout-align="center center">
      <div flex="15">First line</div>
      <div flex="15">Second line</div>
    </div>
  </div>
</body>

</html>

/* Styles go here */
/* Put your css in here */
/*Flex container*/
.flexbox-parent {
  @include display-flex;
  background: #FFD54F;
  overflow: hidden;
  width: 100%;
  padding: 3px;
  min-height: 550px;
  max-height: 1000px;
  justify-content: center;
  align-items: baseline;
}

var app = angular.module('app', ['ngMaterial']);

app.run(function($log) {
    $log.debug('App Run');
});

app.controller('appCtrl', function($scope, $mdDialog) {
  var vm = this;
  
  var action = function(event) {
      $mdDialog.show(
        $mdDialog.alert()
        .title('Secondary Action')
        .content('Secondary actions can be used for one click actions')
        .ariaLabel('Secondary click demo')
        .ok('Neat!')
        .targetEvent(event)
      )
  }
});