appearance improvment in top.component

Author: d0peCode

public/src/app/components/landing/top/bg-top/bg-top.component.scss

@@ -12,6 +12,7 @@
         width: 98%;
     }
     @media only screen and (min-width: 1500px) {
-        height: 130vh;
+        width: 50%;
+        height: 120vh;
     }
 }

public/src/app/components/landing/top/greeting/greeting.component.scss

@@ -13,14 +13,32 @@
     transform: unset;
   }
 
+  @media only screen and (min-width: 1500px) {
+    width: 600px
+  }
+
   &__header {
     font-family: 'Lato', sans-serif;
     color: #313131;
     margin: 0;
     font-size: 2rem;
+
+    @media only screen and (min-width: 1500px) {
+      font-size: 3rem;
+      font-weight: 100;
+    }
   }
 
   &__button {
     margin-top: 20px;
+
+    @media only screen and (min-width: 1500px) {
+      & button {
+        width: 200px;
+        height: 60px;
+        font-size: 1.3rem;
+      }
+
+    }
   }
 }

public/src/app/components/landing/top/top.component.scss

@@ -1,4 +1,22 @@
 .top-container {
   position: relative;
   min-height: 100vh;
-}
+
+  &::after {
+    display: block;
+    content: '';
+    width: 100px;
+    height: 100px;
+    background-color: #3a55e9;
+    border-bottom-right-radius: 50%;
+    position: absolute;
+    bottom: -50px;
+    left: -100px;
+
+  }
+  @media only screen and (min-width: 1500px) {
+    border-left: 100px solid #3a55e9;
+    min-height: 100vh;
+  }
+}
+

public/src/styles.scss

@@ -5,10 +5,6 @@
 }
 body {
   margin: 0;
-
-  @media only screen and (min-width: 1500px) {
-      border-left: 100px solid #3a55e9;
-  }
 }
 
 * {