somewhere

2023-08-17 13:05:51 +03:30
parent 30c7eb0e7b
commit 53843207cc
429 changed files with 117489 additions and 1 deletions
@@ -0,0 +1,201 @@
+.home--page {
+  position: relative;
+  overflow-y: auto;
+
+  .bg {
+    width: 100%;
+    height: calc(100vh - 50px);
+    background-image: url('/assets/img/home/bg.jpg');
+    background-size: cover;
+    -webkit-background-size: cover;
+    background-repeat: no-repeat;
+
+    @media (max-width: 992px) {
+      position: fixed;
+      $topOffset: 50px;
+      height: calc(100vh - #{$topOffset});
+      top: $topOffset;
+      left: 0;
+      z-index: 0;
+    }
+  }
+
+  .txtBox {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    z-index: 1;
+    max-width: 1000px;
+    @include transform(translate(-50%, -50%));
+    padding: 28px 15px;
+    background: rgba(#fff, 0.5);
+    backdrop-filter: blur(5px);
+    overflow: hidden;
+
+    @media (max-width: 992px) {
+      position: relative;
+      $topOffset: 50px;
+      height: calc(100vh - #{$topOffset});
+      top: 0;
+      left: 0;
+      padding-top: $topOffset;
+      @include transform(translate(0, 0));
+      overflow-y: auto;
+      display: flex;
+      justify-content: center;
+      //align-items: center;
+
+      .container-fluid {
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+    }
+
+    @media (max-width: 575px) {
+      padding-top: 20px;
+      padding-bottom: 10px;
+
+      .container-fluid {
+        padding: 0;
+
+        .row {
+          & > div {
+            padding: 0 5px;
+          }
+        }
+      }
+    }
+
+    .boxBg {
+      height: 100%;
+      padding: 15px;
+      background: #dbd9da;
+
+      h1,
+      p,
+      h2 {
+        color: #000;
+      }
+
+      p {
+        @media (max-width: 575px) {
+          text-align: justify;
+        }
+      }
+
+      h1,
+      h2 {
+        font-size: 25px;
+        margin-top: 10px;
+        margin-bottom: 20px;
+      }
+
+      &.inquiry {
+        $c1: #e0e6ed;
+        $c2: #707070;
+
+        .switchBox {
+          margin-top: 40px;
+          text-align: center;
+
+          .switch {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            button {
+              width: 50%;
+              font-size: 12px;
+              padding: 2px 8px;
+              background: transparent;
+              color: rgba($c2, 0.5);
+              @extend %defaultTransition;
+              cursor: pointer;
+              border: 1px solid rgba($c2, 0.2);
+
+              &:hover {
+                color: rgba($c2, 0.8);
+                background: rgba($c1, 0.1);
+              }
+
+              &.active {
+                background: rgba($c1, 1) !important;
+                color: $c2;
+                border-color: rgba($c2, 0.5);
+              }
+            }
+          }
+        }
+
+        .checkSerial {
+          input {
+            background: $c1;
+            @extend %appearance;
+            padding: 10px;
+            border: none;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            width: 100%;
+            @include boxSizing(border-box);
+
+            &::placeholder {
+              color: $c2;
+            }
+          }
+
+          button {
+            display: inline-block;
+            background: $theme;
+            color: #fff;
+            border: 1px solid $theme;
+            padding: 13px;
+            cursor: pointer;
+            @include transition(0.3s);
+            width: 100%;
+            @include borderRadius(0);
+
+            span {
+              line-height: 1.3em;
+            }
+
+            &:disabled {
+              background: gray;
+              border-color: gray;
+            }
+
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+
+      &.description {
+        display: flex;
+        flex-direction: column;
+
+        p {
+          margin-bottom: 10px;
+        }
+
+        .btns {
+          margin-top: auto;
+
+          a {
+            @include borderRadius(0);
+            display: inline-block;
+
+            @media (max-width: 575px) {
+              width: 100%;
+              text-align: center;
+              &:first-child {
+                margin-bottom: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}