figma_adp_tabl_02

index.html

@@ -85,16 +85,18 @@
                         <div class="header_nav_item">
                             <a class="header_nav_link" href="#">Мобильные приложения</a>
                         </div>
+                        <!-- TABLET -->
+                         <div class="header_nav_item header_nav_item-reverse">
+                            <a class="header_nav_link-reverse" href="#">
+                              <span class="link-text">Больше услуг</span>
+                              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8.22851L17 8.22852M17 8.22852L10 1.22852M17 8.22852L10 15.2285" stroke="#0C47A0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg></a>
+                        </div>
                         <!-- 6 -->
                         <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">Брендинг</a>
                         </div>
-                        <!-- TABLET -->
-                         <div class="header_nav_item header_nav_item-reverse">
-                            <a class="header_nav_link-reverse" href="#">Больше услуг <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 8.22851L17 8.22852M17 8.22852L10 1.22852M17 8.22852L10 15.2285" stroke="#0C47A0" stroke-linecap="round" stroke-linejoin="round"/>
-</svg></a>
-                        </div>
                         <!-- 7 -->
                         <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">SEO-продвижение</a>
@@ -105,6 +107,22 @@
                         </div>
                     </div>
                 </div>
+                <div class="dropdown-list">
+                  <div class="dropdown-list_wrapper">
+                  <!-- 6 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link" href="#">Брендинг</a>
+                        </div>
+                        <!-- 7 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link" href="#">SEO-продвижение</a>
+                        </div>
+                        <!-- 8 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link" href="#">Лендинги</a>
+                        </div>
+                </div>
+                </div>
             </div>
         </header>
         <div class="container">
@@ -162,8 +180,8 @@
     <!-- 1 -->
       <div class="accordion-item" id="item1">
         <div class="accordion_index_area"><div class="accordion_index">02</div></div>
-        <div class="accordion_title">Digital-продукты</div>
+        <div class="accordion_title">Digital продукты</div>
-      <img src="" class="img-open">
+      <img src="" alt="" class="img-open">
       <img src="" class="img-closed">
       <div class="blue-square">
         <div class="item_wrapper">
@@ -552,6 +570,7 @@
             </div>
           </div>
         </section>
+        <div class="fotter_wrapper">
         <section class="footer">
           <div class="footer_content">
             <div class="footer_cont_heading">Скидка 50%<br>на SEO-продвижение!</div>
@@ -612,6 +631,7 @@
         </section>
         </div>
         </div>
+    </div>
     <script src="main.js"></script>
 </body>
 </html>

main.js

@@ -59,3 +59,20 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
+
+// ----------------------------------------------------------ВЫПАДАЮЩЕЕ-МЕНЮ--------------------------------------------------------
+
+document.querySelector('.header_nav_link-reverse').addEventListener('click', function() {
+  const dropdown = document.querySelector('.dropdown-list');
+  const text = this.querySelector('.link-text');
+
+  dropdown.classList.toggle('show');
+  
+  // Меняем текст кнопки
+  if (dropdown.classList.contains('show')) {
+    text.textContent = 'Меньше услуг';
+  } else {
+    text.textContent = 'Больше услуг';
+  }
+});
+

style.css

@@ -415,6 +415,7 @@ html, body, * {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    margin-right: 10px;
 }
 .slider_row {
 
@@ -480,7 +481,7 @@ html, body, * {
     width: 45%; /* 40% страницы */
     height: 348px;
     gap: 10px;
-    margin: 0px 0px 0px 10px ; /* отступ между колонками */
+
   }
   .accordion-item {
     flex: 1.15;
@@ -658,7 +659,6 @@ html, body, * {
 }
 .wrapper_row_botton {
   margin: 0;
-  height: 20%;
   margin-top: 10px;
 }
 .wrapper_row_botton {
@@ -946,7 +946,6 @@ html, body, * {
 /* -------------------------------------------FOOTER---------------------------------------------------- */
 
 .footer {
-  margin: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -959,7 +958,6 @@ html, body, * {
 }
 .footer_content {
   margin: 0;
-  width: 55%;
 }
 .footer_cont_heading {
   margin: 0;
@@ -975,7 +973,9 @@ html, body, * {
   margin-bottom: 15px;
 }
 .footer_cont_time {
+  margin: 0;
   margin-bottom: 30px;
+  width: 55%;
 }
 .cont_time_items {
   display: flex;
@@ -1104,7 +1104,12 @@ html, body, * {
   width: 249px;
   height: 170px;
 }
-
+.dropdown-list {
+  display: none;
+}
+.fotter_wrapper {
+  height: 636px;
+}
 /* -------------------------------------------ADAPTIVE--------------------------------------------------------- */
 
 /* ---------------------------------------------1200----------------------------------------------------------- */
@@ -1127,6 +1132,10 @@ html, body, * {
   gap: 5px;
   color: #0C47A0;
 }
+.header_nav_link-reverse span {
+  display: block;
+  color: #0C47A0;
+}
 .header_top {
   margin-right: 80px;
   margin-left: 80px;
@@ -1207,6 +1216,74 @@ html, body, * {
 .accordion_title {
   white-space: nowrap;
 }
+.dropdown-list {
+  display: flex;
+  justify-content: end;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+  opacity: 0;
+  transition: all 0.4s ease;
+}
 
+.dropdown-list.show {
+  max-height: 200px;
+  opacity: 1;
+  width: 100%;
+}
+.header_nav_item-show {
+  margin: 0;
+  padding: 10px;
+}
+.dropdown-list_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  width: 160px;
+  background-color: #F4F4F4;
+  border-radius: 16px;
+}
+.header_top_list {
+  margin-bottom: 10px;
+}
+.header_top {
+  margin-bottom: 10px;
+}
+.accordion-item.active .item_wrapper {
+  padding: 10px;
+}
+
+}
+
+/* -------------------------------------------------------1100------------------------------------------------------------------------------------------ */
+
+@media (max-width: 1100px) {
+  .wrapper {
+  max-width: 1100px;
+}
+.wrapper_row_botton {
+  height: none;
+  margin-top: 0;
+}
+.our-services_bottom_index {
+  font-size: 130px;
+}
+.our-services_row_item {
+  padding: 20px;
+}
+.item_link {
+  white-space: nowrap;
+}
+.slider_row_container {
+  width: 105%;
+}
+.header_nav_item {
+  padding: 10px 0px;
+}
+.header_top {
+  margin-right: 50px;
+  margin-left: 50px;
+}
 
 }