figma_accordeon_02

index.html

@@ -308,7 +308,7 @@
             <div class="row_info_list">
                 <!-- 1 -->
                 <div class="row_info_item">
-                    <div class="row_info_area">
+                    <div class="row_info_index">
                     <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0581 0.941406H12.9419C12.1698 0.941406 11.5035 0.941406 10.9698 1.0135C10.3988 1.09024 9.85 1.2635 9.40581 1.70769C8.96163 2.15187 8.78837 2.70071 8.71163 3.27164C8.63953 3.80536 8.63953 4.47164 8.63953 5.24489V8.06699C8.35912 7.9693 8.06439 7.919 7.76744 7.91815H4.27907C3.93549 7.91815 3.59528 7.98582 3.27786 8.1173C2.96044 8.24878 2.67202 8.4415 2.42908 8.68444C2.18614 8.92738 1.99342 9.2158 1.86194 9.53322C1.73046 9.85065 1.66279 10.1909 1.66279 10.5344V24.1972H1.37209C1.1408 24.1972 0.918979 24.2891 0.75543 24.4526C0.591881 24.6162 0.5 24.838 0.5 25.0693C0.5 25.3006 0.591881 25.5224 0.75543 25.686C0.918979 25.8495 1.1408 25.9414 1.37209 25.9414H24.6279C24.8592 25.9414 25.081 25.8495 25.2446 25.686C25.4081 25.5224 25.5 25.3006 25.5 25.0693C25.5 24.838 25.4081 24.6162 25.2446 24.4526C25.081 24.2891 24.8592 24.1972 24.6279 24.1972H24.3372V16.3484C24.3372 15.6545 24.0616 14.989 23.5709 14.4984C23.0803 14.0077 22.4148 13.7321 21.7209 13.7321H18.2326C17.9256 13.7337 17.6349 13.7833 17.3605 13.8809V5.24489C17.3605 4.47164 17.3605 3.80536 17.2884 3.27164C17.2116 2.70071 17.0384 2.15187 16.5942 1.70769C16.15 1.2635 15.6023 1.09024 15.0302 1.0135C14.4965 0.941406 13.8302 0.941406 13.057 0.941406M22.5919 24.1972V16.3484C22.5919 16.1171 22.5 15.8953 22.3364 15.7317C22.1729 15.5682 21.9511 15.4763 21.7198 15.4763H18.2314C18.0001 15.4763 17.7783 15.5682 17.6147 15.7317C17.4512 15.8953 17.3593 16.1171 17.3593 16.3484V24.1972H22.5919ZM15.6151 24.1972V5.30187C15.6151 4.45536 15.6128 3.90652 15.5593 3.5042C15.5081 3.12629 15.4256 3.00769 15.3593 2.94141C15.293 2.87513 15.1744 2.79257 14.7965 2.74141C14.393 2.68792 13.8453 2.68559 12.9988 2.68559C12.1523 2.68559 11.6035 2.68792 11.2012 2.74141C10.8233 2.79257 10.7047 2.87513 10.6384 2.94141C10.5721 3.00769 10.4895 3.12629 10.4384 3.5042C10.3849 3.90769 10.3826 4.45536 10.3826 5.30187V24.1972H15.6151ZM8.63837 24.1972V10.5344C8.63837 10.3031 8.54649 10.0813 8.38294 9.91777C8.21939 9.75422 7.99757 9.66234 7.76628 9.66234H4.27791C4.04661 9.66234 3.82479 9.75422 3.66124 9.91777C3.49769 10.0813 3.40581 10.3031 3.40581 10.5344V24.1972H8.63837Z" fill="#0C47A0"/>
 </svg></div>
@@ -372,33 +372,31 @@
             </div>
         </section>
         <section class="advantage_slider">
-            <div class="cards">
+  <div class="advantage_slider_items">
-    <div class="card" style="background-image: url('/images/advantage/1.jpg')">
+    <div class="advantage_slider_item">
-      <div class="card-number">01</div>
+      <!-- CLOSE -->
-      <div class="card-title">Отправляем в космос позиции вашего сайта</div>
+      <div class="advantage_slider_close">
-      <div class="card-text">
+        <img src="/images/advantage/1.jpg" alt="">
-        Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент, обеспечиваем видимость и привлекаем целевых клиентов. Результат — стабильный рост позиций.
+        <div class="slider_item_wrapper">
+          <div class="slider_item_index">01</div>
+          <div class="slider_item_title">Отправляем в космос позиции вашего сайта</div>
+        </div>
+      </div>
+      <!-- OPEN -->
+      <div class="advantage_slider_open">
+        <div class="slider_item_inner">
+          <div class="slider_item_index">01</div>
+          <p class="item_inner_text">
+            Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент…
+          </p>
+          <div class="slider_item_title">Отправляем в космос позиции вашего сайта</div>
+        </div>
       </div>
     </div>
 
-    <div class="card" style="background-image: url('/images/advantage/2.jpg')">
+    <!-- ещё карточки… -->
-      <div class="card-number">02</div>
-      <div class="card-title">Сроки продвижения всего от 1 дня!</div>
-      <div class="card-text">
-        Мы выводим сайты в топ благодаря комплексной оптимизации и быстрой настройке. Персональные стратегии и мгновенные результаты уже с первого дня!
   </div>
     </div>
-
-    <div class="card" style="background-image: url('/images/advantage/3.jpg')">
-      <div class="card-number">03</div>
-      <div class="card-title">Работаем с абсолютно любой тематикой</div>
-      <div class="card-text">
-        Продаете IT-услуги, стройматериалы или косметику — не важно. Мы подберем нужную стратегию продвижения под любую нишу.
-      </div>
-    </div>
-  </div>
-        </section>
-    </div>
     <script src="main.js"></script>
 </body>
 </html>

main.js

@@ -1,3 +1,14 @@
+	// -----------------------------------------HEADER-----------------------------------------------------------
+  document.querySelectorAll('.header_top_item').forEach((item) => {
+  item.addEventListener('click', (e) => {
+    e.preventDefault(); // если не нужно переходить со страницы
+    document.querySelectorAll('.header_top_item').forEach(el => el.classList.remove('active'));
+    item.classList.add('active');
+  });
+});
+
+// -------------------------------ACCORDION-SLIDER-----------------------------------------------------------
+
 const items = document.querySelectorAll('.accordion-item');
 
 // Делаем первый аккордеон активным по умолчанию
@@ -25,3 +36,21 @@ items.forEach(item => {
       item.querySelector('.img-closed').style.display = 'none';
     });
   });
+
+  // -----------------------------------------ACCORDION-SECOND----------------------------------------------
+document.addEventListener('DOMContentLoaded', () => {
+  const cards = document.querySelectorAll('.advantage_slider_item');
+
+  cards.forEach(card => {
+    card.addEventListener('click', () => {
+      // если уже активна — просто закрываем
+      if (card.classList.contains('active')) {
+        card.classList.remove('active');
+      } else {
+        // иначе закрываем все остальные и открываем текущую
+        cards.forEach(c => c.classList.remove('active'));
+        card.classList.add('active');
+      }
+    });
+  });
+});

style.css

@@ -652,3 +652,47 @@ html, body, * {
   width: 14px;
   height: 16px;
 }
+/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
+.advantage_slider { padding: 40px; display:flex; justify-content:center; }
+.advantage_slider_items { display:flex; gap:28px; }
+
+.advantage_slider_item{
+  position:relative; width:280px; height:420px; border-radius:22px; overflow:hidden; cursor:pointer;
+}
+
+/* Слой CLOSE */
+.advantage_slider_close{
+  position:absolute; inset:0; z-index:1;
+  display:flex; align-items:flex-end; padding:20px; color:#fff;
+  transition:opacity .35s ease;
+}
+.advantage_slider_close img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
+
+/* Слой OPEN (по умолчанию спрятан и не перехватывает клики) */
+.advantage_slider_open{
+  position:absolute; 
+  inset:0; z-index:2;
+  background: color:#000; 
+  border-radius:22px;
+  opacity:0; 
+  transform:translateY(16px);
+  pointer-events:none;
+  transition:opacity .35s ease, transform .35s ease;
+  padding:28px 22px; 
+  display:flex;
+}
+.slider_item_inner{ display:flex; flex-direction:column; justify-content:space-between; width:100%; }
+
+/* Активная карточка */
+.advantage_slider_item.active .advantage_slider_open{
+  opacity:1; transform:translateY(0); pointer-events:auto;
+}
+.advantage_slider_item.active .advantage_slider_close{ opacity:0; }
+
+/* простые стили текста */
+.slider_item_index{
+  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
+  border:1px solid currentColor; margin-bottom:12px; font-weight:700;
+}
+.slider_item_title{ font-size:18px; line-height:1.3; }
+.item_inner_text{ font-size:14px; line-height:1.5; }