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,111 @@
+.learning--page {
+  .hero {
+    .bg {
+      background-image: url('/assets/img/learning/hero.jpg');
+    }
+  }
+
+  .s1 {
+    .post {
+      margin-bottom: 80px;
+
+      .txtBox {
+        position: relative;
+        z-index: 1;
+        background: #fff;
+        padding: 35px 25px;
+        @include boxSizing(border-box);
+        @extend %defaultBorderRadius;
+        @extend %defaultBoxShadow;
+        width: 120%;
+
+        @media (max-width: 992px) {
+          width: 100%;
+        }
+
+        h2 {
+          margin-bottom: 30px;
+        }
+
+        p {
+          margin-bottom: 25px;
+        }
+
+        @media (max-width: 992px) {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+        }
+
+        @media (max-width: 575px) {
+          padding: 35px 15px;
+        }
+      }
+
+      .imgBox {
+        display: block;
+        position: relative;
+        z-index: 0;
+        @extend %defaultBorderRadius;
+        @extend %defaultBoxShadow;
+        overflow: hidden;
+
+        &:hover {
+          .imgMask {
+            background-color: rgba(#000, 0.4);
+          }
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+          min-height: 400px;
+
+          @media (max-width: 1400px) {
+            //min-height: 400px;
+          }
+        }
+
+        i {
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          @include transform(translate(-50%, -50%));
+          z-index: 1;
+          font-size: 55px;
+          color: #fff;
+        }
+
+        .imgMask {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 0;
+          @extend %defaultTransition;
+        }
+
+        @media (max-width: 992px) {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &.reverse {
+        direction: ltr;
+
+        .txtBox {
+          direction: rtl;
+        }
+      }
+    }
+  }
+
+  .s2 {
+    direction: ltr;
+    text-align: center;
+  }
+}