figma_adp_mob_02

index.html

@@ -271,6 +271,13 @@
                       <div class="slider_row_index">01</div>
                   </div>
               </div>
+          </div>
+          <div class="accordion_about_info accordion_about_info-open">
+            <div class="about_info_list">
+                <div class="info_list_item">98% Успешных кейсов</div>
+                <div class="info_list_item">24/7 Поддержка Клиентов</div>
+                <div class="info_list_item">300+ Сделанных проектов</div>
+            </div>
         </div>
           <div class="accordion">
     <!-- 1 -->
@@ -413,7 +420,7 @@
     </div>
           </div>
         </div>
-        <div class="accordion_about_info">
+        <div class="accordion_about_info accordion_about_info-empty">
             <div class="about_info_list">
                 <div class="info_list_item">98% Успешных кейсов</div>
                 <div class="info_list_item">24/7 Поддержка Клиентов</div>

main.js

@@ -14,34 +14,101 @@
 
 // -------------------------------ACCORDION-SLIDER-----------------------------------------------------------
 
+document.addEventListener('DOMContentLoaded', () => {
+  const accordion = document.querySelector('.accordion');
   const items = document.querySelectorAll('.accordion-item');
+  const dotsContainer = document.createElement('div');
+  dotsContainer.classList.add('slider-dots');
+  accordion.after(dotsContainer);
 
-// Делаем первый аккордеон активным по умолчанию
+  let dots = [];
-if(items.length > 0) {
+  let isMobile = false; // флаг режима
-  items[0].classList.add('active');
+
+  // === СОЗДАНИЕ ТОЧЕК ===
+  function createDots() {
+    dotsContainer.innerHTML = '';
+    items.forEach((_, index) => {
+      const dot = document.createElement('span');
+      dot.classList.add('dot');
+      if (index === 0) dot.classList.add('active');
+      dotsContainer.appendChild(dot);
+    });
+    dots = document.querySelectorAll('.dot');
   }
 
-// items.forEach(item => {
+  // === ПОКАЗ СЛАЙДА ===
-//   item.addEventListener('click', () => {
+  function showSlide(index) {
-//     items.forEach(i => i.classList.remove('active'));
+    items.forEach((item, i) => {
-//     item.classList.add('active');
+      if (i === index) {
-//   });
+        item.style.display = 'flex';
-// });
+      } else {
-// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
+        item.style.display = 'none';
-items.forEach(item => {
+      }
-    item.addEventListener('click', () => {
-      items.forEach(i => {
-        i.classList.remove('active');
-        i.querySelector('.img-open').style.display = 'none';
-        i.querySelector('.img-closed').style.display = 'block';
     });
 
-      item.classList.add('active');
+    dots.forEach(dot => dot.classList.remove('active'));
-      item.querySelector('.img-open').style.display = 'block';
+    dots[index].classList.add('active');
-      item.querySelector('.img-closed').style.display = 'none';
+  }
+
+  // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
+  function enableSlider() {
+    isMobile = true;
+    items.forEach(item => item.classList.add('active')); // все раскрыты
+    createDots();
+    let currentIndex = 0;
+    showSlide(currentIndex);
+
+    dots.forEach((dot, i) => {
+      dot.addEventListener('click', () => {
+        currentIndex = i;
+        showSlide(currentIndex);
       });
     });
 
+    dotsContainer.style.display = 'flex';
+  }
+
+  // === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
+  function disableSlider() {
+    isMobile = false;
+    dotsContainer.style.display = 'none';
+
+    // Убираем все active
+    items.forEach(item => {
+      item.classList.remove('active');
+      item.style.display = 'flex';
+    });
+
+    // Первая вкладка активна по умолчанию
+    if (items.length > 0) items[0].classList.add('active');
+
+    // Поведение аккордеона
+    items.forEach(item => {
+      item.onclick = () => {
+        if (!isMobile) {
+          items.forEach(i => i.classList.remove('active'));
+          item.classList.add('active');
+        }
+      };
+    });
+  }
+
+  // === ПРОВЕРКА ШИРИНЫ ===
+  function checkWidth() {
+    if (window.innerWidth <= 600 && !isMobile) {
+      enableSlider();
+    } else if (window.innerWidth > 600 && isMobile) {
+      disableSlider();
+    } else if (window.innerWidth > 600 && !isMobile) {
+      disableSlider();
+    }
+  }
+
+  // Инициализация
+  checkWidth();
+  window.addEventListener('resize', checkWidth);
+});
+
   // -----------------------------------------ACCORDION-SECOND----------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {
   const cards = document.querySelectorAll('.advantage_slider_item');

style.css

@@ -211,6 +211,9 @@ html, body, * {
     border-radius: 30px;
     margin-bottom: 20px;
 }
+.accordion_about_info-open {
+  display: none;
+}
 .accordion_about_info {
     width: 50%;
     margin: 0;
@@ -693,6 +696,26 @@ html, body, * {
   width: 14px;
   height: 16px;
 }
+.slider-dots {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+  gap: 8px;
+}
+
+.dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ccc;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.dot.active {
+  background: #0C47A0;
+}
 /* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
 .advantage_slider { 
   margin: 0;
@@ -1762,6 +1785,20 @@ body.lock {
 .chart_cont_title {
   font-size: 18px;
 }
+.accordion_index {
+  font-size: 30px;
+  padding: 10px;
+}
+.accordion-item {
+    flex: 2;
+  }
+.accordion_title {
+  font-size: 18px;
+  margin-bottom: 70px;
+}
+.info_list_item {
+  white-space: nowrap;
+}
 
 }
 
@@ -2090,6 +2127,9 @@ body.lock {
 .footer_chart {
   padding: 30px;
 }
+.accordion-item {
+    flex: 2.7;
+  }
 
 }
 
@@ -2152,7 +2192,7 @@ body.lock {
 }
 .info_heading_title {
   margin: 0;
-  width: 60%;
+  width: 100%;
   margin-bottom: 25px;
 }
 .row_info_item {
@@ -2236,12 +2276,281 @@ body.lock {
     font-size: 20px;
     width: 100%;
   }
-.info_heading_title {
-  width: 65%;
-}
 .header_body_about {
   min-width: 65%;
 }
+.header_nav_link {
+    width: 230px;
+  } 
+.slider_row_index {
+    font-size: 30px;
+  }
+.slider_row_title {
+    font-size: 16px;
+  }
+.item_wrapper_index {
+    font-size: 30px;
+  }
+.item_wrapper_icon {
+    padding: 25px;
+  }
+.row_middle_title {
+    font-size: 30px;
+  }
+.row_middle_text {
+    font-size: 20px;
+  }
+.wrapper_row_btn {
+    font-size: 16px;
+  } 
+.accordion_about_info-empty {
+  display: none;
+}
+.accordion_about_info-open {
+  display: block;
+}
+.accordion_about_info {
+  margin: 0;
+}
+.info_list_item {
+  font-size: 12px;
+}
+.our-services_heading_text {
+  display: flex;
+  justify-content: end;
+}
+.info_heading_title {
+  margin-top: 20px;
+}
+
+/* ------------------------------------------------------------ */
+
+.accordion {
+    flex-direction: column;
+    width: 100%;
+    height: 348px;
+  }
+  .accordion-item {
+    width: 100%;
+    height: auto;
+  }
+.row_info_area {
+    margin-right: 10px;
+    padding: 10px;
+  }
+
+}
+/* ---------------------------------------------------500----------------------------------------------------- */
+@media (max-width: 500px) {
+  .wrapper {
+  max-width: 500px;
+}
+.header_nav_link {
+    width: 200px;
+  }
+.header_body_heading {
+  font-size: 44px;
+}
+.header_about_text {
+    font-size: 18px;
+  }
+   .header_body_about span {
+    font-size: 18px;
+  }
+.header_about_img {
+    width: 20px;
+    height: 20px;
+  }
+.header_body_about {
+    margin-left: 125px;
+}
+.header_body_about {
+    min-width: 70%;
+  }
+.slider_row_container {
+    width: 100%;
+  }
+.row_container_area-empty {
+  display: none;
+}
+.slider_row_title {
+    font-size: 14px;
+  }
+.slider_row_index {
+    font-size: 25px;
+  }
+.item_wrapper_index {
+    font-size: 25px;
+  }
+ .row_middle_title {
+    font-size: 28px;
+  }
+ .item_wrapper_icon {
+    padding: 20px;
+  }
+.info_content_first {
+    font-size: 16px;
+  }
+.info_content_second {
+    font-size: 24px;
+  }
+.heading_title_main {
+  font-size: 50px;
+}
+.heading_title_main span {
+  font-size: 50px;
+}
+.heading_title_sub {
+    font-size: 22px;
+  }
+.adv_cont_01, 
+.adv_cont_02 {
+    font-size: 18px;
+  }
+.our-services_heading_title {
+  font-size: 50px;
+}
+.our-services_heading_text {
+  font-size: 16px;
+}
+.item_link {
+    font-size: 18px;
+  }
+.our-services_item_01 svg {
+  width: 60px;
+  height: 60px;
+}
+.our-services_item_title {
+    font-size: 32px;
+  }
+.our-services_bottom_index {
+    font-size: 110px;
+  }
+.footer_cont_heading {
+    font-size: 30px;
+  }
+.item_index_color {
+    font-size: 45px;
+  }
+.time_area_first {
+  margin-top: -10px;
+}
+.time_area_second {
+  margin-top: 10px;
+}
+.time_item_interval {
+    font-size: 14px;
+  }
+  .footer_cont_info {
+    font-size: 16px;
+  }
+  .footer_chart_img {
+    right: 40px;
+  }
+  .footer_chart {
+    width: 100%;
+  }
+.info_list_item {
+    font-size: 11px;
+  }
+
+}
+
+/* ----------------------------------------------------450--------------------------------------------------------------- */
+
+@media (max-width: 450px) {
+  .wrapper {
+  max-width: 450px;
+}
+.header_nav_link {
+    width: 190px;
+  }
+.header_body_heading {
+    font-size: 33px;
+  }
+.header_body_about span {
+    font-size: 16px;
+  }
+.header_about_text {
+    font-size: 16px;
+  }
+.slider_row_title {
+    font-size: 16px;
+  }
+ .info_list_item {
+    font-size: 9px;
+  }
+.row_middle_title {
+    font-size: 24px;
+  }
+.row_middle_text {
+    font-size: 18px;
+  }
+.row_info_list {
+  gap: 29px;
+}
+.heading_title_main {
+  font-size: 36px;
+}
+.heading_title_main span {
+    font-size: 36px;
+  }
+.heading_title_sub {
+    font-size: 18px;
+  }
+.adv_cont_01, .adv_cont_02 {
+    font-size: 16px;
+  }
+.advantage_slider_close {
+    padding: 40px;
+  }
+.slider_item_title {
+    font-size: 28px;
+  }
+.advantage_slider_item.active .item_inner_text {
+    font-size: 16px;
+  }
+.advantage_slider_item.active .slider_item_title-reverse {
+    font-size: 28px;
+  }
+.advantage_slider_open {
+    padding: 40px;
+  }
+ .our-services_heading_title {
+    font-size: 36px;
+  }
+.our-services_heading_text {
+    font-size: 14px;
+  }
+.our-services_row_item {
+    padding: 25px;
+}
+.item_link {
+    font-size: 16px;
+  }
+.item_link_svg {
+  padding: 4px;
+}
+.item_index_color {
+    font-size: 32px;
+  }
+.footer_cont_heading {
+    font-size: 26px;
+  }
+.chart_img {
+    width: 230px;
+    height: 150px;
+  }
+.footer_chart_img {
+  right: 35px;
+  top: 75px;
+}
+.footer_chart_content {
+    width: 80%;
+  }
+.footer_chart {
+    padding: 25px;
+  }
 
 
 }