add sass modules

2020-11-14 19:45:07 +03:30
parent 56b295b75d
commit 95149f0e72
17 changed files with 4140 additions and 2923 deletions
@@ -0,0 +1,442 @@
+///////////////////////////// error page
+.error--page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    font-family: sans-serif;
+    font-size: 60px;
+  }
+
+  p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-size: 14px;
+    margin-top: -20px;
+  }
+
+  a {
+    margin-top: 20px;
+    font-family: 'sahel', sans-serif;
+  }
+}
+
+///////////////////////////// home page
+.home--page {
+  .hero {
+    .bg {
+      background-image: url("../img/hp-s1-i1.jpg");
+    }
+
+    .txt--home {
+      width: 400px;
+      height: 300px;
+      position: absolute;
+      bottom: 20%;
+      right: 200px;
+
+      &:lang(en) {
+        right: auto;
+        left: 200px;
+      }
+
+      h1 {
+        color: #fff;
+
+        &:lang(en) {
+          font-family: 'anton';
+        }
+      }
+
+      p {
+        color: #fff;
+      }
+    }
+  }
+
+  .s1 {
+    position: relative;
+    padding: 100px 0;
+
+    .go-down-btn {
+      width: 250px;
+      height: 80px;
+      background: #fff;
+      text-align: center;
+      position: absolute;
+      top: -40px;
+      left: calc(50% - 125px);
+      z-index: 2;
+      cursor: pointer;
+
+      em {
+        line-height: 80px;
+        font-size: 30px;
+      }
+    }
+
+    .title-side {
+      text-align: center;
+    }
+  }
+
+  .s2 {
+    overflow-x: hidden;
+
+    .panel {
+      padding: 100px 100px 130px;
+    }
+
+    .parts {
+      width: 100%;
+
+      &.p1 {
+        width: 100%;
+        text-align: center;
+
+        p {
+          display: inline-block;
+          max-width: 480px;
+        }
+      }
+
+      &.p2 {
+        margin-top: 100px;
+      }
+
+      &.p3 {
+        margin-top: 100px;
+      }
+    }
+  }
+
+  .s3 {
+    .panel1 {
+      padding: 100px 100px 0;
+      height: 380px;
+
+      .parts {
+        &.p1 {
+          text-align: center;
+        }
+
+        &.p2 {
+          text-align: center;
+
+          .imgBox {
+            text-align: right;
+
+            &:lang(en) {
+              text-align: left;
+            }
+
+            p {
+              margin-top: 15px;
+            }
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+
+    .panel2 {
+      margin-top: 250px;
+      background: transparent;
+      padding: 100px 100px 0;
+
+      .p3 {
+        text-align: center;
+
+        .imgBox {
+          background: #fff;
+          padding-bottom: 20px;
+          @extend %defaultBoxShadow;
+          margin-bottom: 30px;
+
+          p {
+            margin-top: 20px;
+          }
+
+          img {
+            width: 100%;
+            @include boxShadow(none);
+          }
+        }
+      }
+    }
+  }
+
+  .s4 {
+    position: relative;
+
+    .txt {
+      max-width: 600px;
+      height: 300px;
+      position: absolute;
+      top: 20%;
+      right: 200px;
+
+      &:lang(en) {
+        right: auto;
+        left: 200px;
+      }
+
+      .title {
+        color: #fff;
+
+        &::after {
+          background: #fff;
+        }
+
+        span {
+          display: block;
+          font-size: 13px;
+          color: #fff;
+        }
+      }
+
+      p {
+        margin-top: $mt;
+        color: #fff;
+      }
+    }
+  }
+
+  .s5 {
+    .panel {
+      background: $theme;
+      margin-top: 0;
+
+      .p1 {
+        text-align: center;
+
+        .title {
+          color: #fff;
+
+          &::after {
+            background: #fff;
+          }
+        }
+
+        p {
+          color: #fff;
+        }
+      }
+
+      .form {
+        margin-top: 50px;
+
+        input, textarea {
+          border-bottom: 2px solid rgba(255, 255, 255, 0.5);
+          color: #fff;
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.8);
+          }
+
+          &:focus {
+            @include boxShadow(0 0 5px rgba(#fff, 0.05));
+            border: 2px solid rgba(#fff, 0.1);
+          }
+        }
+      }
+
+    }
+
+    .watermark {
+      text-align: center;
+      padding-top: 100px;
+
+      svg {
+        width: 100px;
+
+        path {
+          fill: rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+
+  .s6 {
+    padding: 100px 0;
+    background: #fff;
+
+    .img-side {
+      text-align: center;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+
+///////////////////////////// about page
+.about--page {
+  overflow: hidden;
+
+  .hero {
+    .bg {
+      background-image: url("../img/about-hero.jpg");
+    }
+  }
+
+  .s1 {
+    .parts {
+      margin-bottom: 100px;
+
+      &.p1 {
+        text-align: center;
+        direction: ltr;
+
+        svg {
+          width: 80px;
+        }
+
+        span {
+          color: $theme;
+          font-family: 'diodrum-bold';
+          font-size: 40px;
+        }
+      }
+
+      &.p2 {
+        align-items: center;
+      }
+
+      &.p3 {
+        align-items: center;
+      }
+
+      &.p4 {
+        margin-bottom: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  .s2 {
+    background: $theme;
+    padding: 100px 0 150px;
+
+    .title {
+      color: #fff;
+
+      &::after {
+        background: #fff;
+      }
+    }
+
+    p {
+      color: #fff;
+      margin-top: $mt;
+      max-width: 700px;
+    }
+
+  }
+
+  .s3 {
+    padding-bottom: 0;
+
+    .panel {
+      direction: ltr;
+
+      .txt {
+        direction: ltr;
+        text-align: left;
+
+        p {
+          font-family: 'diodrum-bold';
+        }
+      }
+
+      .img {
+        text-align: center;
+      }
+
+      &:not(.p1) {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+///////////////////////////// services page
+.services--page {
+  overflow-x: hidden;
+
+  .hero {
+    .bg {
+      background-image: url('../img/services-hero.jpg');
+    }
+  }
+
+  .s1 {
+    text-align: center;
+  }
+
+  .s2 {
+
+    ol {
+      li {
+        list-style: decimal;
+      }
+    }
+  }
+
+  .s3 {
+    padding-bottom: 0;
+
+    .parts {
+      margin-top: 100px;
+
+      &.p1 {
+        margin-top: 0;
+        text-align: center;
+      }
+
+      &.lastPart {
+        text-align: center;
+      }
+    }
+  }
+}
+
+///////////////////////////// products page
+.products--page {
+  .hero {
+    .bg {
+      background-image: url('../img/products-hero.jpg');
+    }
+  }
+
+  .s1 {
+    text-align: center;
+  }
+
+  .s2 {
+    text-align: center;
+
+    .filters {
+      margin: 0 auto;
+      max-width: 700px;
+      background: red;
+
+      ul {
+        display: flex;
+        flex-direction: row;
+
+        li {
+          display: block;
+        }
+      }
+    }
+  }
+}