updates to landing page scss file

Jottr42 · Feb 1, 2023 · d5b1737 · d5b1737
1 parent 273ac5a
commit d5b1737
Showing 1 changed file with 87 additions and 35 deletions.
diff --git a/client/stylesheets/LandingPage.scss b/client/stylesheets/LandingPage.scss
@@ -1,48 +1,100 @@
+$primary-color: rgb(135, 153, 105);
+$secondary-color: rgb(50, 61, 57);
+$tertiary-color: rgb(95, 83, 89);
+$neutral-color: rgb(194, 191, 212);
+
+$body-color: rgb(245, 240, 238);
+$mauve: rgb(224, 176, 255);
+
+
 .landing-page {
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-style: italic;
-  font-size: 36px;
-  text-align: center;
-  padding: 100px;
-  animation: darkenBackground 300s linear forwards;
+  justify-content: center;
   height: 100vh;
-  width: 100vw;
+  background-color: $body-color;
 
-  @keyframes darkenBackground {
-    0% {
-      background: radial-gradient(ellipse at center, rgba(235,232,222,1) 0%,rgba(235,232,222,1) 30%,rgba(10,10,10,1) 100%);
-    }
-    100% {
-      background: radial-gradient(ellipse at center, rgba(10,10,10,1) 0%,rgba(10,10,10,1) 100%);
-    }
+  .title {
+    font-size: 3rem;
+    color: $primary-color;
   }
 
-  title {
-    animation: fadeIn 2s ease-in-out;
-
-    @keyframes fadeIn {
-      0% {
-
-      }
-
-    }
-  }
+  .buttons-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $primary-color;
+    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 1rem;
 
-  button {
-    background-color: rgb(95, 83, 89);
-    padding: 10px 20px;
-    border-radius: 5px;
-    border: none;
-    margin: 10px;
-    font-size: 16px;
-    text-align: center;
-    box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, 0.7);
-
-    &:hover {
+    .login-button,
+    .signup-button {
+      margin: 0 1rem;
+      font-size: 1.5rem;
+      padding: 1rem 2rem;
+      background-color: $tertiary-color;
+      color: $body-color;
+      border-radius: 10px;
+      border: none;
       cursor: pointer;
-      background-color: rgb(135, 153, 105);
+      &:hover {
+        background-color: $secondary-color;
+      }
     }
   }
 }
+
+
+
+
+
+// .landing-page {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   font-style: italic;
+//   font-size: 36px;
+//   text-align: center;
+//   padding: 100px;
+//   animation: darkenBackground 300s linear forwards;
+//   height: 100vh;
+//   width: 100vw;
+
+//   @keyframes darkenBackground {
+//     0% {
+//       background: radial-gradient(ellipse at center, rgba(235,232,222,1) 0%,rgba(235,232,222,1) 30%,rgba(10,10,10,1) 100%);
+//     }
+//     100% {
+//       background: radial-gradient(ellipse at center, rgba(10,10,10,1) 0%,rgba(10,10,10,1) 100%);
+//     }
+//   }
+
+//   title {
+//     animation: fadeIn 2s ease-in-out;
+
+//     @keyframes fadeIn {
+//       0% {
+
+//       }
+
+//     }
+//   }
+
+//   button {
+//     background-color: rgb(95, 83, 89);
+//     padding: 10px 20px;
+//     border-radius: 5px;
+//     border: none;
+//     margin: 10px;
+//     font-size: 16px;
+//     text-align: center;
+//     box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, 0.7);
+
+//     &:hover {
+//       cursor: pointer;
+//       background-color: rgb(135, 153, 105);
+//     }
+//   }
+// }