add scss styles

Author: DalaScript

assets/styles/layout/page-layout.css

@@ -0,0 +1,61 @@
+/* Colors
+ ******************************/
+/* Primary
+ ******************************/
+/* Fonts
+ ******************************/
+/* Global Variables
+ ******************************/
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #d6e2f0;
+  font-family: "Outfit", sans-serif;
+}
+
+/* Body Elements
+ ******************************/
+main {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  margin: 152px 0 151px;
+  padding: 16px 16px 40px;
+  max-width: 320px;
+  border-radius: 20px;
+  background-color: #ffffff;
+  box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
+}
+
+.card__img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  display: block;
+}
+
+.card__content {
+  margin-top: 24px;
+  padding: 0 16px;
+  text-align: center;
+}
+
+.card__title {
+  font-size: 22px;
+  color: #1f3251;
+}
+
+.card__subtitle {
+  margin-top: 16px;
+  font-size: 15px;
+  font-weight: 400;
+  color: #7b879d;
+}

assets/styles/styles.css

@@ -0,0 +1,81 @@
+/* Colors
+ ******************************/
+/* Primary
+ ******************************/
+$white: #ffffff;
+$light-gray: #d6e2f0;
+$grayish-blue: #7b879d;
+$dark-blue: #1f3251;
+$blue: #2C7DFA;
+$blue-shade: #3685FF;
+
+/* Fonts
+ ******************************/
+$outfit: "Outfit", sans-serif;
+
+/* Global Variables
+ ******************************/
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: $light-gray;
+    font-family: $outfit;
+}
+
+/* Body Elements
+ ******************************/
+
+main {
+    height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.card {
+    margin: 152px 0 151px;
+    padding: 16px 16px 40px;
+    max-width: 320px;
+    border-radius: 20px;
+
+    background-color: $white;
+    box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
+
+
+
+    &__img {
+
+        width: 100%;
+        height: 100%;
+        border-radius: 10px;
+        display: block;
+    }
+
+    &__content {
+        margin-top: 24px;
+        padding: 0 16px;
+        text-align: center;
+    }
+
+
+    &__title {
+
+        font-size: 22px;
+
+        color: $dark-blue;
+    }
+
+    &__subtitle {
+        margin-top: 16px;
+        font-size: 15px;
+        font-weight: 400;
+
+        color: $grayish-blue;
+    }
+}