ionic #1

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/fonts/ionicons.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/fonts/ionicons.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/fonts/ionicons.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/fonts/ionicons.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/angular-ui/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/angular/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/angular/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/angular/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic-angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- firebase -->
    <script src="lib/firebase/firebase.js"></script>
    <script src="lib/angularfire/dist/angularfire.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    


  </head>
  <body ng-app="App">

   ...

CSS

@import url("ccfont/stylesheet.css");
@import url("Glyphter.css");
/*VARS*/
body, .ionic-body {
  font-family: "ccbook", sans-serif; }

.icon {
  font-family: 'Glyphter';
  font-size: 24px;
  color: #72ffe6; }

.btn {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  background: #bf58a5;
  /* Old browsers */
  background: -moz-linear-gradient(left, #bf58a5 0%, #f9a68d 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #bf58a5 0%, #f9a68d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #bf58a5 0%, #f9a68d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$bg1, endColorstr=$bg2,GradientType=1 );
  /* IE6-9 */
  font-family: "ccbook", sans-serif;
  height: 45px;
  padding: 10px 15px;
  display: inline-block;
  text-align: center;
  color: #ffffff !important;
  text-shadow: none !important;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 10px;
  flex: 1 100%;
  align-self: center;
  width: 90%; }

.item.btn {
  background: #bf58a5;
  /* Old browsers */
  background: -moz-linear-gradient(left, #bf58a5 0%, #f9a68d 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #bf58a5 0%, #f9a68d 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #bf58a5 0%, #f9a68d 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$bg1, endColorstr=$bg2,GradientType=1 );
  /* IE6-9 */ }

.btn-secondary {
  background: transparent;
  display: block;
  width: 100%;
  position: relative;
  width: 100%;
  background: transparent;
  position: relative;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  display: inline-block;
  height: 50px;
  /* The...