Alena/Figma_2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma_adp_tabl_02

Browse Source
This commit is contained in:
Alena Trushcheva
2025-10-26 21:55:22 +03:00
parent d773318b8d
commit 5d57a462d1
3 changed files with 127 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -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>
<img src="" class="img-open">
<div class="accordion_title">Digital продукты</div>
<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>

17
main.js
View File

@@ -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 = 'Больше услуг';
}
});

87
style.css
View File

@@ -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;
}
}