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

figma_adp_tablet_final

Browse Source
This commit is contained in:
Alena Trushcheva
2025-10-28 22:33:02 +03:00
parent cf8c7da979
commit bb1b8f4173
2 changed files with 82 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -116,6 +116,7 @@
</button>
</div>
</div>
<!-- NOT ACTIVE -->
<div class="header_top_list">
<div class="header_nav">
<!-- 1 -->
@@ -138,14 +139,6 @@
<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>
@@ -158,8 +151,34 @@
<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="#">
<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>
</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 header_nav_link-show" href="#">Брендинг</a>
</div>
<!-- 7 -->
<div class="header_nav_item header_nav_item-show">
<a class="header_nav_link header_nav_link-show" href="#">SEO-продвижение</a>
</div>
<!-- 8 -->
<div class="header_nav_item header_nav_item-show">
<a class="header_nav_link header_nav_link-show" href="#">Лендинги</a>
</div>
</div>
</div>
<!-- BURGER- MENU -->
<div class="header_nav_item header_nav_item-show">
<div class="header_top_list_active">
<div class="top_list_btn_burger"><button class="top_list_btn">Предоставляемые услуги <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.75 6.75H16.75M16.75 6.75L10.75 0.75M16.75 6.75L10.75 12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -199,7 +218,7 @@
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<section class="header_body">

85
style.css
View File

@@ -35,6 +35,10 @@ html, body, * {
.header_top_list {
display: flex;
width: 100%;
margin: 20px 0;
}
.header_nav_item-empty {
display: block;
}
.logo_link {
margin: 0;
@@ -125,9 +129,6 @@ html, body, * {
.header_call_text {
color: #fff;
}
.header_top_list {
margin: 20px 0;
}
.header_nav {
margin: 0;
display: flex;
@@ -143,8 +144,7 @@ html, body, * {
justify-content: space-between;
align-items: center;
white-space: nowrap;
padding: 10px;
width: 500px;
padding: 10px 0;
}
.header_nav_item-reverse {
display: none;
@@ -227,9 +227,6 @@ html, body, * {
.header_top_list_active {
display: none;
}
.header_top_list {
display: block;
}
/* --------------------------------------------------------------------------------------------- */
.header_row_info {
display: flex;
@@ -1133,10 +1130,6 @@ html, body, * {
.wrapper {
max-width: 1200px;
}
.header_nav_item-empty {
display: none;
}
.header_nav_item-reverse {
display: block;
}
@@ -1248,7 +1241,9 @@ html, body, * {
}
.header_nav_item-show {
margin: 0;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-list_wrapper {
display: flex;
@@ -1292,6 +1287,12 @@ html, body, * {
.accordion-item.active .blue-square {
margin: 15px;
}
.header_nav_item-empty {
display: none;
}
.header_nav_item-show {
display: block;
}
}
@@ -1629,17 +1630,6 @@ body.lock {
padding: 15px;
border-radius: 33px;
}
.top_list_btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
background-color: #F4F4F4;
padding: 13px 0px;
width: 100%;
border-radius: 33px;
font-weight: 500;
}
.top_list_btn svg {
margin: 0;
}
@@ -1668,8 +1658,8 @@ body.lock {
.header_nav_burger.open {
margin: 0;
width: 500px;
max-height: 500px; /* подстрой под контент */
max-height: 500px;
padding: 10px 0; /* подстрой под контент */
}
.header_nav {
display: none;
@@ -1680,18 +1670,37 @@ body.lock {
align-items: center;
}
.top_list_btn_burger {
margin: 0;
width: 100%;
margin-bottom: 20px;
}
.top_list_btn {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
height: 100%;
padding: 15px 0;
background: #F4F4F4;
border: none;
border-radius: 33px;
font-weight: 500;
cursor: pointer;
}
.top_list_btn svg {
pointer-events: none; /* чтобы клик шел по кнопке, а не по svg */
}
.header_nav_item {
display: flex;
border-radius: 33px;
padding: 13px 0px;
background-color: #F4F4F4;
margin-bottom: 20px;
}
.dropdown-list {
display: none;
}
.header_top_list_active {
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
@@ -1707,5 +1716,19 @@ body.lock {
.footer_chart_content {
width: 71%;
}
.header_nav_item {
margin: 0;
padding: 10px 0;
}
.header_nav_link {
display: flex;
align-items: center;
justify-content: center;
padding: 13px 0px;
width: 500px;
background-color: #F4F4F4;
border-radius: 33px;
}
}