layout changes

mate-academy · Jul 18, 2024 · dd6df56 · dd6df56
1 parent d08b2f2
commit dd6df56
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 47 deletions.
diff --git a/src/index.html b/src/index.html
@@ -313,11 +313,11 @@ <h4 class="benefit-title">Strategy</h4>
       <!-- #endregion -->
 
       <!-- #region services -->
-      <div
-        class="services"
-        id="services"
-      >
-        <div class="grid-block">
+      <div class="grid-block">
+        <div
+          class="services"
+          id="services"
+        >
           <div class="services__text">
             <p class="services__text-section">Services</p>
             <h3 class="services__text-title">
@@ -440,6 +440,7 @@ <h3 class="services__text-title">
           </div>
         </div>
       </div>
+
       <!-- #endregion -->
 
       <!-- #region testimonials -->

diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
@@ -5,7 +5,7 @@
   font-weight: 600;
   text-transform: uppercase;
 
-  overflow: auto;
+  overflow-x: hidden;
 
   @include on-mobile {
     padding: 20px;

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -14,7 +14,7 @@ html {
     top: 0;
     left: 0;
     right: 0;
-
+    
     opacity: 0;
     pointer-events: none;
     transform: translateX(-100%);

diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss
@@ -1,58 +1,33 @@
 .services {
   grid-column: 1 / -1;
 
-  @include on-desktop-s {
-    display: flex;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
 
-  &__articles {
+  @include on-desktop-s {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    @include on-tablet {
-      grid-column: 1 / -1;
-    }
-
-    @include on-desktop-s {
-      grid-column: 6 / -2;
-    }
-
-    margin-bottom: 148px;
-
-    &-2 {
-      @include on-tablet {
-        display: flex;
-        gap: 30px;
-      }
-    }
-
-    &-4 {
-      @include on-tablet {
-        display: flex;
-        gap: 30px;
-      }
-    }
+    flex-direction: row;
+    align-items: normal;
   }
 
   &__text {
     margin-bottom: 48px;
+    width: 100%;
+
     grid-column: 1 / -1;
 
     @include on-tablet {
-      grid-column: 1 / -1;
+      width: 260px;
+      position: relative;
+      top: 86px;
+      right: 160px;
     }
 
     @include on-desktop-s {
-      grid-column: 2 / 4;
-    }
-
-    width: 280px;
-
-    @include on-tablet {
-      position: relative;
-      top: 66px;
+      right: 0;
+      top: 56px;
     }
 
     &-section {
@@ -84,4 +59,39 @@
       color: $c-gray-text;
     }
   }
+
+  &__articles {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-bottom: 148px;
+
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 1 / -1;
+      width: 590px;
+      height: 690px;
+    }
+
+    @include on-desktop-s {
+      grid-column: 5 / 11;
+    }
+
+    &-2 {
+      @include on-tablet {
+        display: flex;
+        gap: 30px;
+      }
+    }
+
+    &-4 {
+      @include on-tablet {
+        display: flex;
+        gap: 30px;
+      }
+    }
+  }
 }