Add files via upload

Author: khaledOghli

DM_Home-main/DM_Home-main/DM Home/css/_components.scss

@@ -0,0 +1,78 @@
+.container-lg{
+    width: 100%;
+    max-width: 90%;
+    height: 100%;
+    padding: 5px 10px;
+    margin: 0 auto;
+
+}
+
+.align-content-center {
+    height: 100%;
+    align-content: center;
+    align-items: center;
+}
+
+
+
+button {
+    cursor: pointer;
+    min-width: 64px;
+    padding: 5px 16px;
+    border: none;
+    border-radius: 12px;
+    margin: 16px;
+    outline: 0;
+    font-size: 0.6rem;
+  }
+
+  button.raised {
+    background: $secondary-color;
+    color: #FFF;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
+      0 2px 2px 0 rgba(0,0,0,0.14),
+      0 1px 5px 0 rgba(0,0,0,0.12);
+    transition: box-shadow 0.28s cubic-bezier(0.4,0,0.2,1);
+    &:hover {
+      opacity: 0.8;
+      box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),
+      0 4px 5px 0 rgba(0,0,0,0.14),
+      0 1px 10px 0 rgba(0,0,0,0.12);
+    }
+    &:focus {
+      opacity: 0.7;
+    }
+    &:active {
+      opacity: 1;
+      box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2),
+      0 8px 10px 1px rgba(0,0,0,0.14),
+      0 3px 14px 2px rgba(0,0,0,0.12);
+    }
+  }
+
+
+  [ripple] {
+    position: relative;
+    overflow: hidden;
+  }
+  [ripple] .ripple--container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  [ripple] .ripple--container span {
+    transform: scale(0);
+    border-radius: 100%;
+    position: absolute;
+    opacity: 0.75;
+    background-color: #fff;
+    animation: ripple 1000ms;
+  }
+  @keyframes ripple {
+    to {
+      opacity: 0;
+      transform: scale(2);
+    }
+  }

DM_Home-main/DM_Home-main/DM Home/css/_font.scss

@@ -0,0 +1,34 @@
+@function strip-unit($value) {
+    @return $value / ($value * 0 + 1);
+  }
+  
+  @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+    $u1: unit($min-vw);
+    $u2: unit($max-vw);
+    $u3: unit($min-font-size);
+    $u4: unit($max-font-size);
+  
+    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+      & {
+  
+        font-size: $min-font-size;
+        @media screen and (min-width: $min-vw) {
+          font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+        }
+  
+        @media screen and (min-width: $max-vw) {
+          font-size: $max-font-size;
+        }
+      }
+    }
+  }
+  
+  $min_width: 320px;
+  $max_width: 1000px;
+  $min_font: 16px;
+  $max_font: 22px;
+  
+  html {
+    @include fluid-type($min_width, $max_width, $min_font, $max_font);
+  }
+  

DM_Home-main/DM_Home-main/DM Home/css/_variables.scss

@@ -0,0 +1,28 @@
+@font-face {
+    src: url('/fonts/DroidKufi-Bold.ttf');
+    font-family: 'DroidKufi-bold';
+    font-weight: bold;
+}
+@font-face {
+    src: url('/fonts/DroidKufi-Regular.ttf');
+    font-family: 'DroidKufi';
+    font-weight: normal;
+}
+
+/* Colors Variables */
+$white-color: #fcfcfc;
+$dark-color:#1c1c1c;
+$primary-color:#a50a2e;
+$secondary-color:#ee9c47;
+$additional-color:blue;
+$nav-color: rgba($primary-color, 0.78);
+
+/* Fonts Variables */
+$font-ar:'DroidKufi',Roboto;
+$font-ar-bold:'DroidKufi-bold',Roboto;
+
+/* Calc */
+
+$window-height: 100vh;
+$nav-height: 60px;
+$header-height: 75px;