Added Gradient

frontEnd/src/pages/home/home.html

@@ -1,3 +1,5 @@
 <ion-content text-center padding class="bg-image">
-  
+  <div class="head" text-center>
+    <h1>Happy Trails</h1>
+  </div>
 </ion-content>

frontEnd/src/pages/home/home.scss

@@ -1,14 +1,27 @@
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
 page-home {
-    // .bg {
-    //     height: 100%;
-    //     width: 100%;
-    //     background: linear-gradient(160deg, #b627f2 30%, #10DFC8 70%)
-    // }
-    .bg-image{
+    .bg-image {
         background-image: url('../assets/imgs/autumn-daylight-environment-218820.jpg');
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-        
+    }
+    .head {
+        position: absolute;
+        display: block;
+        //color: rgb(255, 124, 1);
+        top: 22%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        font-size: 100px;
+        background-image: linear-gradient(to bottom,rgb(207, 0, 0), rgb(0, 172, 0));
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    .head h1 {
+        font-size: 7vh !important;
+        font-weight: lighter !important;
+        font-family: 'Permanent Marker', cursive;
     }
 }