Added login page (no functionality)

frontEnd/src/pages/home/home.html

@@ -2,4 +2,22 @@
   <div class="head" text-center>
     <h1>Happy Trails</h1>
   </div>
+  <div class="inputs">
+    <ion-item>
+      <ion-input type="text" placeholder="Email"></ion-input>
+    </ion-item>
+    <ion-item class="password">
+      <ion-input type="password" placeholder="Password"></ion-input>
+    </ion-item>
+    <button ion-button block>
+      <b>Login</b>
+    </button>
+    <p>Forgot Username/Password?
+      <b>Tap here!</b>
+    </p>
+    <div class="google" text-center>
+      <ion-icon name="logo-google" text-center></ion-icon>
+      Login/Signup with Google
+    </div>
+  </div>
 </ion-content>

frontEnd/src/pages/home/home.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=PermanentMarker');
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
 page-home {
     .bg-image {
         background-image: url('../assets/imgs/autumn-daylight-environment-218820.jpg');
@@ -8,7 +8,7 @@ page-home {
     }
     .head {
         position: absolute;
-        display: block; //color: rgb(255, 124, 1);
+        display: block;
         top: 22%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -19,7 +19,7 @@ page-home {
         color: transparent;
     }
     .head h1 {
-        font-size: 8vh !important;
+        font-size: 7vh !important;
         font-weight: lighter !important;
         font-family: 'Permanent Marker', cursive;
     }
@@ -34,22 +34,54 @@ page-home {
         opacity: 0.6;
     }
     ion-item {
-        background: transparent!important;
-        border: 1px solid #fff!important;
+        // background: transparent !important;
+        border: 1px solid black !important;
         ion-input {
-            color: #fff;
+            color: black;
         }
-        ion-label{
-            color: #fff!important;
+        ion-label {
+            color: #fff !important;
         }
         .item-inner {
-            border: 0!important;
+            border: 0 !important;
         }
     }
     button {
         position: absolute;
         display: block;
         top: 50%;
-        background-color: green!important;
+        background-color: green !important;
+    } 
+    
+    // Gets rid of thin line under text boxes
+    .item-md.item-input.input-has-focus .item-inner {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
+    }
+    .list-md .item-input.input-has-focus:last-child {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
+    }
+    .list-md .item-input.input-has-focus:last-child .item-inner {
+        box-shadow: none;
+    }
+    .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
+    }
+    .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
+    }
+    .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner {
+        box-shadow: none;
+    }
+    .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
+    }
+    .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
+        border-bottom-color: transparent !important;
+        box-shadow: none !important;
     }
-}
+}