figma_adp_mob_03

index.html

@@ -251,7 +251,7 @@
                       <div class="row_container_area"></div>
                       <!-- 2 -->
                       <div class="row_container_item">Контент-маркетинг</div>
-                      <div class="row_container_area"></div>
+                      <div class="row_container_area row_container_area-mobile"></div>
                       <!-- 3 -->
                       <div class="row_container_item">Аудит сайта</div>
                       <div class="row_container_area row_container_area-reverse"></div>

style.css

@@ -437,7 +437,7 @@ html, body, * {
   width: 80%;
 }
 .slider_row_container {
-    width: 73%;
+    width: 75%;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -1317,6 +1317,37 @@ html, body, * {
 .header_nav_item-show {
   display: block;
 }
+.row_info_area {
+  margin-right: 5px;
+}
+.slider_item_title {
+  font-size: 32px;
+}
+.advantage_slider_item.active .slider_item_title-reverse {
+  font-size: 32px;
+}
+.slider_item_index {
+  font-size: 24px;
+}
+.heading_title_main {
+  font-size: 62px;
+}
+.heading_title_main span {
+  font-size: 62px;
+}
+.adv_cont_01,
+.adv_cont_02 {
+  font-size: 16px;
+}
+.our-services_heading_title {
+  font-size: 62px;
+}
+.our-services_heading_text {
+  font-size: 16px;
+}
+.accordion-item.active .item_wrapper {
+    padding: 15px;
+  }
 
 }
 
@@ -1383,6 +1414,22 @@ html, body, * {
   flex: 1.5;
 
 }
+.accordion-item.active {
+  flex: 6.5;
+}
+.wrapper_row_middle {
+    padding: 15px 0;
+  }
+.slider_main {
+  width: 50%;
+  margin-right: 10px;
+}
+.accordion {
+  width: 50%;
+}
+.accordion-item.active .item_wrapper {
+  padding: 15px;
+}
 
 }
 /* ---------------------------------------------1000----------------------------------------------------- */
@@ -1392,7 +1439,7 @@ html, body, * {
   max-width: 1000px;
 } 
 .accordion-item.active .blue-square {
-  margin: 10px;
+  margin: 15px;
 }
 .row_middle_title {
   font-size: 20px;
@@ -1401,7 +1448,7 @@ html, body, * {
   font-size: 14px;
 }
 .wrapper_row_middle {
-  padding: 30px 0;
+  padding: 15px 0;
 }
 .header_body_heading {
   margin-right: 80px;
@@ -1422,7 +1469,7 @@ html, body, * {
   width: 40%;
 }
 .advantage_slider_close {
-  padding: 15px;
+  padding: 25px;
 }
 .our-services_row_item {
   padding: 15px;
@@ -1446,6 +1493,43 @@ html, body, * {
 .item_index_color {
   font-size: 80px;
 }
+.header_body_heading {
+  font-size: 50px;
+}
+.row_container_area-empty {
+  display: none;
+}
+.row_info_item svg {
+  width: 20px;
+  height: 20px;
+}
+.info_content_second {
+  font-size: 22px;
+}
+.adv_cont_01, .adv_cont_02 {
+    font-size: 14px;
+  }
+.advantage_content {
+    width: 45%;
+  }
+  .slider_item_title {
+    font-size: 28px;
+  }
+.slider_item_index {
+    font-size: 22px;
+  }
+.advantage_slider_item.active .slider_item_title-reverse {
+    font-size: 28px;
+  }
+.our-services_heading_title {
+    font-size: 57px;
+  }
+.our-services_row_item {
+    padding: 20px;
+  }
+.our-services_item_title {
+    font-size: 26px;
+  }
 
 }
 
@@ -1765,7 +1849,7 @@ body.lock {
   height: 150px;
 }
 .our-services_row_item {
-  padding: 15px 10px;
+  padding: 20px;
 }
 .our-services_row_items {
   gap: 15px;
@@ -1790,7 +1874,7 @@ body.lock {
   padding: 10px;
 }
 .accordion-item {
-    flex: 2;
+    flex: 1.8;
   }
 .accordion_title {
   font-size: 18px;
@@ -1799,6 +1883,43 @@ body.lock {
 .info_list_item {
   white-space: nowrap;
 }
+.header_body_heading {
+    font-size: 44px;
+  }
+.header_body_heading {
+  margin-right: 0;
+  font-size: 38px;
+}
+.header_body_about {
+  max-width: 30%;
+}
+.row_container_area-empty {
+  display: block;
+}
+.info_heading_title {
+  font-size: 32px;
+}
+.heading_title_main {
+    font-size: 52px;
+  }
+ .heading_title_main span {
+    font-size: 52px;
+  }
+.advantage_slider_close {
+    padding: 25px;
+  }
+.slider_item_title {
+    font-size: 24px;
+  }
+ .advantage_slider_item.active .slider_item_title-reverse {
+    font-size: 24px;
+  }
+.advantage_slider_open {
+    padding: 25px;
+  }
+.our-services_row_item {
+    padding: 20px;
+  }
 
 }
 
@@ -2032,7 +2153,7 @@ body.lock {
   font-size: 40px;
 }
 .item_index_color {
-  font-size: 60px;
+  font-size: 50px;
 }
 .time_item_interval {
   font-size: 14px;
@@ -2043,6 +2164,18 @@ body.lock {
 .footer_chart {
   width: 400px;
 }
+.header_body_heading {
+  font-size: 50px;
+}
+.accordion-item.active {
+  flex: 13;
+}
+.row_middle_text {
+    font-size: 20px;
+  }
+.row_middle_title {
+    font-size: 24px;
+  }
 
 }
 
@@ -2130,6 +2263,15 @@ body.lock {
 .accordion-item {
     flex: 2.7;
   }
+.accordion-item.active {
+    flex: 16;
+  }
+.row_middle_title {
+    font-size: 26px;
+  } 
+.row_middle_text {
+    font-size: 18px;
+  }
 
 }
 
@@ -2219,6 +2361,12 @@ body.lock {
 .footer_cont_heading {
   font-size: 42px;
 }
+.adv_cont_01, .adv_cont_02 {
+    font-size: 18px;
+  }
+ .our-services_item_title {
+    font-size: 32px;
+  }
 
 }
 
@@ -2322,6 +2470,12 @@ body.lock {
 .info_heading_title {
   margin-top: 20px;
 }
+.header_body_heading {
+    font-size: 45px;
+  }
+.info_heading_title {
+    font-size: 36px;
+  }
 
 /* ------------------------------------------------------------ */
 
@@ -2453,6 +2607,24 @@ body.lock {
 .info_list_item {
     font-size: 11px;
   }
+.header_body_heading {
+    font-size: 42px;
+  }
+.adv_cont_01, .adv_cont_02 {
+    font-size: 16px;
+  }
+.advantage_slider_close {
+    padding: 40px;
+  }
+.advantage_slider_open {
+    padding: 40px;
+  }
+.our-services_heading_title {
+    font-size: 46px;
+  }
+.our-services_item_title {
+    font-size: 28px;
+  }
 
 }
 
@@ -2551,6 +2723,43 @@ body.lock {
 .footer_chart {
     padding: 25px;
   }
+.info_heading_title {
+    font-size: 34px;
+  }
+.row_info_area {
+  margin-right: 5px;
+}
+ .info_content_first {
+    font-size: 14px;
+  }
+.info_content_second {
+    font-size: 22px;
+  }
+.container {
+    margin: 0px 20px;
+  }
+.header_top {
+    margin-right: 40px;
+    margin-left: 40px;
+  }
 
 
 }
+
+/* ----------------------------------------------400------------------------------------------------------------- */
+
+@media (max-width: 400px) {
+  .wrapper {
+  max-width: 400px;
+}
+.row_container_area-mobile {
+  display: none;
+}
+.header_body_heading {
+    font-size: 30px;
+  }
+.row_info_list {
+    gap: 20px;
+  }
+
+}