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

figma_accordeon_01

Browse Source
This commit is contained in:
Alena Trushcheva
2025-10-22 00:46:31 +03:00
parent c74ac0c765
commit a8243bf387
39 changed files with 1120 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
html01/html/css.css Normal file
View File

@@ -0,0 +1,196 @@
body {
margin: 0 auto;
max-width: 1230px;
}
.row {
width: 100%;
min-width: 1230px;
display: flex;
flex-direction: row-reverse;
}
.accordion {
display: flex;
width: 40%; /* 40% страницы */
height: 348px;
gap: 10px; /* отступ между колонками */
}
.accordion-item {
flex: 1;
border-radius: 30px; /* закругление краёв */
overflow: hidden;
cursor: pointer;
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
align-items: center;
}
.accordion-item.active{
display: flex;
flex: 5; /* раскрытая колонка */
width: 100%;
height: 100%;
}
.accordion-item.active .accordion_index{
display: none;
}
.accordion-item.active .accordion_title{
display: none;
}
.accordion-item.active .img-open {
display: none;
width: 0;
height: 0;
}
.accordion_index {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 50%;
background-color: #fff;
font-weight: 600;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.accordion_title {
color: white;
display: flex;
align-items: center;
writing-mode: vertical-lr;
transform: rotate(-180deg);
}
/* not-actine */
#item1 {
background-color: #0C47A0;
}
#item2 {
background-color: #A5C6F6;
}
#item3 {
background-color: #0C47A0;
}
#item4 {
background-color: #A5C6F6;
}
#item5 {
background-color: #0C47A0;
}
/* active */
#item1.active {
background: url("/main/001.png") 100% 100% / cover;
}
#item2.active {
background: url("/main/002.png") 100% 100% / cover;
}
#item3.active {
background: url("/main/003.png") 100% 100% / cover;
}
#item4.active {
background: url("/main/004.png") 100% 100% / cover;
}
#item5.active {
background: url("/main/005.png") 100% 100% / cover;
}
.img-open {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.img-open {
display: none;
}
.accordion-item.active .blue-square {
display: block;
height: 100%;
width: 82%;
margin: 20px;
background-color: rgba(2, 76, 187, 0.259);
border-radius: 33px;
}
/* not-active */
.item_wrapper_index {
display: none;
}
.item_wrapper {
display: none;
}
/* active */
.accordion-item.active .item_wrapper {
display: flex;
flex-direction: column;
padding: 15px;
height: 92%;
}
.accordion-item.active .wrapper_row_first {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 15px;
height: 30%;
}
.accordion-item.active .item_wrapper_index {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
padding: 10px;
border-radius: 50%;
background-color: #fff;
width: 20px;
height: 20px;
font-size: 18px;
}
.item_wrapper_icon {
background-color: #fff;
border-radius: 50%;
}
.item_wrapper_icon svg {
display: block;
width: 42px;
height: 42px;
padding: 18px;
}
.wrapper_row_middle {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.row_middle_title {
color: #fff;
font-weight: 500;
font-size: 24px;
text-transform: uppercase;
}
.row_middle_text {
font-size: 16px;
color: #fff;
margin-bottom: 15px;
}
.wrapper_row_botton {
height: 20%;
}
.wrapper_row_botton {
display: flex;
justify-content: end;
}
.wrapper_row_btn {
display: flex;
align-items: center;
gap: 5px;
padding: 8px;
border-radius: 16px;
border: none;
font-size: 14px;
cursor: pointer;
}
.wrapper_row_btn svg {
display: block;
width: 14px;
height: 16px;
}

153
html01/html/index.html Normal file
View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div class="row">
<div class="accordion">
<!-- 1 -->
<div class="accordion-item" id="item1">
<div class="accordion_index">02</div>
<div class="accordion_title">Digital-продукты</div>
<img src="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">02</div>
<div class="item_wrapper_icon"><svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17.5H0C0 7.875 7.875 0 17.5 0C27.125 0 35 7.875 35 17.5C35 27.125 27.125 35 17.5 35V28H10.5V21H17.5V28C23.31 28 28 23.2925 28 17.5C28 11.7075 23.2925 7 17.5 7C11.7075 7 7 11.7075 7 17.5ZM10.5 28V33.25H5.25V28H10.5ZM1.75 24.5H5.25V28H1.75V24.5Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">Digital продукты</div>
<div class="row_middle_text">Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ. </div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 2 -->
<div class="accordion-item" id="item2">
<div class="accordion_index">03</div>
<div class="accordion_title">Маркетинг</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">03</div>
<div class="item_wrapper_icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C6.54131 1 5.14236 1.57946 4.11091 2.61091C3.07946 3.64236 2.5 5.04131 2.5 6.5V7.5C2.5 8.028 2.715 8.535 2.943 8.926C3.174 9.325 3.452 9.659 3.646 9.854L5.063 11.27L5.64 13H10.36L10.937 11.27L12.354 9.854C12.548 9.659 12.826 9.324 13.057 8.926C13.285 8.535 13.5 8.028 13.5 7.5V6.5C13.5 5.04131 12.9205 3.64236 11.8891 2.61091C10.8576 1.57946 9.45869 1 8 1ZM9.354 5.354L8.646 4.646L6.793 6.5L7.793 7.5L6.646 8.646L7.354 9.354L9.207 7.5L8.207 6.5L9.354 5.354Z" fill="#0C47A0"/>
<path d="M10 15V14H6V15H10Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">маркетинг</div>
<div class="row_middle_text">Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность. </div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 3 -->
<div class="accordion-item" id="item3">
<div class="accordion_index">04</div>
<div class="accordion_title">продвижение <br>Топовое SEO</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">04</div>
<div class="item_wrapper_icon"><svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4546 14.1133L20.5461 18.2048C21.1822 18.8369 22.0425 19.1917 22.9393 19.1917C23.836 19.1917 24.6963 18.8369 25.3324 18.2048L36.8579 6.66179C36.9388 6.58677 37.045 6.54507 37.1554 6.54507C37.2657 6.54507 37.372 6.58677 37.4529 6.66179L39.3026 8.51154C39.4584 8.66904 39.6736 8.75654 39.8976 8.74954C40.0038 8.77404 40.1105 8.77404 40.2179 8.74954C40.3812 8.68289 40.5196 8.56702 40.614 8.41805C40.7084 8.26908 40.7541 8.0944 40.7446 7.91829V1.12829C40.7446 0.903192 40.6552 0.687309 40.496 0.528137C40.3369 0.368966 40.121 0.279544 39.8959 0.279544H33.1059C32.9271 0.266193 32.7487 0.309802 32.5962 0.404116C32.4437 0.498431 32.325 0.638607 32.2571 0.804544C32.1914 0.958308 32.1742 1.12844 32.2076 1.29227C32.2411 1.4561 32.3237 1.60585 32.4444 1.72154L34.4481 3.65704C34.4888 3.69518 34.5213 3.74126 34.5434 3.79243C34.5656 3.8436 34.577 3.89878 34.577 3.95454C34.577 4.01031 34.5656 4.06549 34.5434 4.11666C34.5213 4.16783 34.4888 4.21391 34.4481 4.25204L29.3556 9.34454C24.7846 -1.49321 10.1984 -3.31846 3.10039 6.05629C1.01089 8.81414 -0.0805673 12.1996 0.00463571 15.6585C0.00813571 16.2255 0.041969 16.7914 0.106136 17.356C0.156409 17.7699 0.357216 18.1508 0.670276 18.4261C0.983337 18.7014 1.38676 18.8518 1.80364 18.8488H2.00664C2.22853 18.8236 2.44327 18.7548 2.63855 18.6465C2.83383 18.5382 3.00581 18.3924 3.14464 18.2174C3.28348 18.0425 3.38643 17.8419 3.4476 17.6271C3.50877 17.4124 3.52697 17.1876 3.50114 16.9658C3.47471 16.5018 3.47471 16.0368 3.50114 15.5728C3.80389 6.35379 13.9749 0.916544 21.8079 5.78679C24.1147 7.22146 25.8659 9.39713 26.7744 11.9573L23.2446 15.5413C23.1609 15.6175 23.0517 15.6598 22.9384 15.6598C22.8251 15.6598 22.7159 15.6175 22.6321 15.5413L18.5424 11.4148C17.9063 10.7827 17.046 10.4279 16.1493 10.4279C15.2525 10.4279 14.3922 10.7827 13.7561 11.4148L0.515636 24.6378C0.198404 24.9573 0.0211064 25.3898 0.0227474 25.8401C0.0243883 26.2904 0.204833 26.7216 0.524386 27.0388C0.843938 27.356 1.27642 27.5333 1.7267 27.5317C2.17697 27.53 2.60815 27.3496 2.92539 27.03L3.91064 26.0465C5.38046 27.6307 7.15732 28.8992 9.13305 29.7747C11.1088 30.6501 13.242 31.1144 15.4029 31.139C18.7777 31.1466 22.06 30.0365 24.7374 27.982C24.816 27.9166 24.9151 27.8807 25.0174 27.8807C25.1197 27.8807 25.2188 27.9166 25.2974 27.982L27.6739 30.3585C27.7314 30.4145 27.7717 30.4858 27.79 30.5639C27.8083 30.6421 27.8039 30.7239 27.7771 30.7995C27.6155 31.2519 27.5856 31.7409 27.6909 32.2096C27.7963 32.6784 28.0325 33.1075 28.3721 33.4473L34.9574 40.05C36.7144 41.9838 39.9064 41.289 40.7026 38.7988C40.9011 38.1771 40.9162 37.5114 40.7462 36.8814C40.5761 36.2513 40.228 35.6836 39.7436 35.2463L33.1741 28.6103C32.6946 28.1366 32.0492 27.8685 31.3751 27.863C31.0835 27.863 30.8006 27.9138 30.5264 28.0153C30.4509 28.0422 30.3692 28.047 30.291 28.029C30.2129 28.011 30.1415 27.971 30.0854 27.9138L27.7089 25.5373C27.6411 25.4598 27.6037 25.3603 27.6037 25.2573C27.6037 25.1543 27.6411 25.0548 27.7089 24.9773C28.7456 23.6078 29.5486 22.0763 30.0854 20.4448C30.1647 20.2305 30.1999 20.0024 30.1889 19.7741C30.1779 19.5459 30.1209 19.3222 30.0214 19.1165C29.9219 18.9108 29.7818 18.7274 29.6097 18.5771C29.4376 18.4268 29.2369 18.3128 29.0196 18.242C28.8024 18.1711 28.5731 18.1449 28.3454 18.1648C28.1178 18.1847 27.8965 18.2504 27.6949 18.3579C27.4932 18.4653 27.3153 18.6124 27.1719 18.7903C27.0285 18.9682 26.9224 19.1732 26.8601 19.393C26.0721 21.7968 24.5449 23.8902 22.4965 25.3745C20.4482 26.8588 17.9833 27.6581 15.4536 27.6583C13.7475 27.6463 12.0621 27.283 10.5025 26.5911C8.94293 25.8993 7.54254 24.8936 6.38864 23.6368L15.8946 14.1133C15.9721 14.0455 16.0716 14.0081 16.1746 14.0081C16.2776 14.0081 16.3771 14.0455 16.4546 14.1133Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">топовое seo продвижение</div>
<div class="row_middle_text">Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 4 -->
<div class="accordion-item" id="item4">
<div class="accordion_index">05</div>
<div class="accordion_title">Создание сайтов</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">05</div>
<div class="item_wrapper_icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 22.73C9.61275 22.5707 9.26969 22.3203 9 22H3C2.73478 22 2.48043 21.8946 2.29289 21.7071C2.10536 21.5196 2 21.2652 2 21V5.25C2 5.1837 2.02634 5.12011 2.07322 5.07322C2.12011 5.02634 2.1837 5 2.25 5H21.75C21.8163 5 21.8799 5.02634 21.9268 5.07322C21.9737 5.12011 22 5.1837 22 5.25V10.42L24 11.27V3C24 2.20435 23.6839 1.44129 23.1213 0.87868C22.5587 0.31607 21.7956 0 21 0L3 0C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3L0 21C0 21.7956 0.31607 22.5587 0.87868 23.1213C1.44129 23.6839 2.20435 24 3 24H13L10 22.73ZM10.5 1.5C10.7652 1.5 11.0196 1.60536 11.2071 1.79289C11.3946 1.98043 11.5 2.23478 11.5 2.5C11.5 2.76522 11.3946 3.01957 11.2071 3.20711C11.0196 3.39464 10.7652 3.5 10.5 3.5C10.2348 3.5 9.98043 3.39464 9.79289 3.20711C9.60536 3.01957 9.5 2.76522 9.5 2.5C9.5 2.23478 9.60536 1.98043 9.79289 1.79289C9.98043 1.60536 10.2348 1.5 10.5 1.5ZM7 1.5C7.26522 1.5 7.51957 1.60536 7.70711 1.79289C7.89464 1.98043 8 2.23478 8 2.5C8 2.76522 7.89464 3.01957 7.70711 3.20711C7.51957 3.39464 7.26522 3.5 7 3.5C6.73478 3.5 6.48043 3.39464 6.29289 3.20711C6.10536 3.01957 6 2.76522 6 2.5C6 2.23478 6.10536 1.98043 6.29289 1.79289C6.48043 1.60536 6.73478 1.5 7 1.5ZM3.5 1.5C3.76522 1.5 4.01957 1.60536 4.20711 1.79289C4.39464 1.98043 4.5 2.23478 4.5 2.5C4.5 2.76522 4.39464 3.01957 4.20711 3.20711C4.01957 3.39464 3.76522 3.5 3.5 3.5C3.23478 3.5 2.98043 3.39464 2.79289 3.20711C2.60536 3.01957 2.5 2.76522 2.5 2.5C2.5 2.23478 2.60536 1.98043 2.79289 1.79289C2.98043 1.60536 3.23478 1.5 3.5 1.5Z" fill="#0C47A0"/>
<path d="M24 13.5702C23.9998 13.3739 23.9419 13.182 23.8334 13.0184C23.725 12.8548 23.5707 12.7267 23.39 12.6502L17.39 10.0802C17.2666 10.0279 17.134 10.001 17 10.001C16.866 10.001 16.7334 10.0279 16.61 10.0802L10.61 12.6502C10.4293 12.7267 10.275 12.8548 10.1666 13.0184C10.0581 13.182 10.0002 13.3739 10 13.5702V20.4302C10.0002 20.6265 10.0581 20.8184 10.1666 20.982C10.275 21.1456 10.4293 21.2736 10.61 21.3502L16.61 23.9202C16.7334 23.9724 16.866 23.9993 17 23.9993C17.134 23.9993 17.2666 23.9724 17.39 23.9202L23.39 21.3502C23.5707 21.2736 23.725 21.1456 23.8334 20.982C23.9419 20.8184 23.9998 20.6265 24 20.4302V13.5702ZM17 12.0902L20.46 13.5702L17 15.0602L13.54 13.5702L17 12.0902ZM12 15.0902L16 16.8002V21.4802L12 19.7702V15.0902ZM18 21.4802V16.8002L22 15.0902V19.7702L18 21.4802Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">Создание сайтов</div>
<div class="row_middle_text">Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 5 -->
<div class="accordion-item" id="item5">
<div class="accordion_index">06</div>
<div class="accordion_title">Дизайн</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">06</div>
<div class="item_wrapper_icon"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.8925 0.12555C7.07559 0.220402 7.22909 0.36375 7.33622 0.539931C7.44336 0.716112 7.50002 0.918351 7.5 1.12455C7.5 2.87955 8.1045 3.89655 8.8005 4.90305C8.8665 4.99905 8.9355 5.09705 9.0075 5.19705C9.672 6.13905 10.5 7.30905 10.5 8.99955C10.5 9.68899 10.3642 10.3717 10.1004 11.0086C9.83653 11.6456 9.44982 12.2244 8.96231 12.7119C8.4748 13.1994 7.89605 13.5861 7.25909 13.8499C6.62213 14.1138 5.93944 14.2496 5.25 14.2496C4.56056 14.2496 3.87787 14.1138 3.24091 13.8499C2.60395 13.5861 2.0252 13.1994 1.53769 12.7119C1.05018 12.2244 0.66347 11.6456 0.399632 11.0086C0.135795 10.3717 -1.02735e-08 9.68899 0 8.99955C0 7.76505 0.126 6.41955 0.9735 4.91955C1.8015 3.45405 3.2625 1.94055 5.7285 0.20505C5.89671 0.0866484 6.09416 0.0166318 6.29939 0.00261515C6.50461 -0.0114015 6.70975 0.0311184 6.8925 0.12555ZM10.833 5.21055C12.1377 4.3592 13.6411 3.86112 15.1961 3.76503C16.7511 3.66895 18.3043 3.97815 19.704 4.66239C21.1036 5.34664 22.3016 6.38248 23.1809 7.66859C24.0601 8.9547 24.5905 10.447 24.72 11.9995H20.6265C19.1347 11.9995 17.7039 12.5922 16.649 13.6471C15.5941 14.702 15.0015 16.1327 15.0015 17.6245V21.7196C13.9569 21.6323 12.9355 21.3633 11.9835 20.9246C11.9595 21.6581 11.9085 22.4591 11.8335 23.2991C12.8514 23.6757 13.9185 23.903 15.0015 23.9741V27.3745C15.0015 28.8664 15.5941 30.2971 16.649 31.352C17.7039 32.4069 19.1347 32.9995 20.6265 32.9995H30.3765C31.8683 32.9995 33.2991 32.4069 34.354 31.352C35.4089 30.2971 36.0015 28.8664 36.0015 27.3745V17.6245C36.0015 16.1327 35.4089 14.702 34.354 13.6471C33.2991 12.5922 31.8683 11.9995 30.3765 11.9995H26.9775C26.8467 10.038 26.2042 8.14494 25.114 6.50903C24.0237 4.87311 22.5239 3.55145 20.7638 2.67572C19.0037 1.8 17.0448 1.4008 15.0824 1.51788C13.12 1.63497 11.2225 2.26426 9.579 3.34305C9.714 3.57405 9.867 3.80505 10.0365 4.04955C10.0935 4.13455 10.1585 4.22655 10.2315 4.32555C10.4085 4.57455 10.62 4.86855 10.833 5.21055ZM30.378 14.2496C31.2731 14.2496 32.1315 14.6051 32.7645 15.2381C33.3974 15.871 33.753 16.7294 33.753 17.6245V27.3745C33.753 28.2697 33.3974 29.1281 32.7645 29.761C32.1315 30.394 31.2731 30.7495 30.378 30.7495H20.628C19.7329 30.7495 18.8745 30.394 18.2415 29.761C17.6086 29.1281 17.253 28.2697 17.253 27.3745V23.9006C19.6964 23.5708 21.9639 22.4478 23.7072 20.7043C25.4505 18.9607 26.5731 16.693 26.9025 14.2496H30.378ZM17.253 21.625V17.6245C17.253 16.7294 17.6086 15.871 18.2415 15.2381C18.8745 14.6051 19.7329 14.2496 20.628 14.2496H24.627C24.3147 16.0922 23.4369 17.792 22.1154 19.1135C20.7939 20.435 19.0956 21.3127 17.253 21.625ZM0 19.93C0 18.4256 0.12 16.5581 0.774 15.0191C2.0235 15.949 3.573 16.4995 5.25 16.4995C6.86406 16.5019 8.43548 15.9815 9.729 15.0161C10.3815 16.5566 10.5 18.427 10.5 19.93C10.5 22.4246 10.104 26.245 9.378 29.455C9.018 31.057 8.559 32.5736 7.9935 33.715C7.713 34.285 7.3755 34.8205 6.963 35.23C6.5475 35.641 5.973 35.9995 5.253 35.9995C4.533 35.9995 3.96 35.6411 3.5445 35.2285C3.132 34.8205 2.7945 34.2851 2.5125 33.7166C1.947 32.5736 1.488 31.0571 1.125 29.4566C0.3975 26.2451 0 22.4246 0 19.9316" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">дизайн</div>
<div class="row_middle_text">Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>

27
html01/html/js.js Normal file
View File

@@ -0,0 +1,27 @@
const items = document.querySelectorAll('.accordion-item');
// Делаем первый аккордеон активным по умолчанию
if(items.length > 0) {
items[0].classList.add('active');
}
// items.forEach(item => {
// item.addEventListener('click', () => {
// items.forEach(i => i.classList.remove('active'));
// item.classList.add('active');
// });
// });
// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
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');
item.querySelector('.img-open').style.display = 'block';
item.querySelector('.img-closed').style.display = 'none';
});
});

BIN
html01/html/main/001.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
html01/html/main/002.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
html01/html/main/003.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
html01/html/main/004.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
html01/html/main/005.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

BIN
html01/html/main/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
html01/html/main/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
html01/html/main/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 661 KiB

BIN
html01/html/main/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

3
html01/html/main/Vector_right.svg Normal file
View File

@@ -0,0 +1,3 @@
<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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

3
html01/html/main/slides/01.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17.5H0C0 7.875 7.875 0 17.5 0C27.125 0 35 7.875 35 17.5C35 27.125 27.125 35 17.5 35V28H10.5V21H17.5V28C23.31 28 28 23.2925 28 17.5C28 11.7075 23.2925 7 17.5 7C11.7075 7 7 11.7075 7 17.5ZM10.5 28V33.25H5.25V28H10.5ZM1.75 24.5H5.25V28H1.75V24.5Z" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

3
html01/html/main/slides/02.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4546 14.1133L20.5461 18.2048C21.1822 18.8369 22.0425 19.1917 22.9393 19.1917C23.836 19.1917 24.6963 18.8369 25.3324 18.2048L36.8579 6.66179C36.9388 6.58677 37.045 6.54507 37.1554 6.54507C37.2657 6.54507 37.372 6.58677 37.4529 6.66179L39.3026 8.51154C39.4584 8.66904 39.6736 8.75654 39.8976 8.74954C40.0038 8.77404 40.1105 8.77404 40.2179 8.74954C40.3812 8.68289 40.5196 8.56702 40.614 8.41805C40.7084 8.26908 40.7541 8.0944 40.7446 7.91829V1.12829C40.7446 0.903192 40.6552 0.687309 40.496 0.528137C40.3369 0.368966 40.121 0.279544 39.8959 0.279544H33.1059C32.9271 0.266193 32.7487 0.309802 32.5962 0.404116C32.4437 0.498431 32.325 0.638607 32.2571 0.804544C32.1914 0.958308 32.1742 1.12844 32.2076 1.29227C32.2411 1.4561 32.3237 1.60585 32.4444 1.72154L34.4481 3.65704C34.4888 3.69518 34.5213 3.74126 34.5434 3.79243C34.5656 3.8436 34.577 3.89878 34.577 3.95454C34.577 4.01031 34.5656 4.06549 34.5434 4.11666C34.5213 4.16783 34.4888 4.21391 34.4481 4.25204L29.3556 9.34454C24.7846 -1.49321 10.1984 -3.31846 3.10039 6.05629C1.01089 8.81414 -0.0805673 12.1996 0.00463571 15.6585C0.00813571 16.2255 0.041969 16.7914 0.106136 17.356C0.156409 17.7699 0.357216 18.1508 0.670276 18.4261C0.983337 18.7014 1.38676 18.8518 1.80364 18.8488H2.00664C2.22853 18.8236 2.44327 18.7548 2.63855 18.6465C2.83383 18.5382 3.00581 18.3924 3.14464 18.2174C3.28348 18.0425 3.38643 17.8419 3.4476 17.6271C3.50877 17.4124 3.52697 17.1876 3.50114 16.9658C3.47471 16.5018 3.47471 16.0368 3.50114 15.5728C3.80389 6.35379 13.9749 0.916544 21.8079 5.78679C24.1147 7.22146 25.8659 9.39713 26.7744 11.9573L23.2446 15.5413C23.1609 15.6175 23.0517 15.6598 22.9384 15.6598C22.8251 15.6598 22.7159 15.6175 22.6321 15.5413L18.5424 11.4148C17.9063 10.7827 17.046 10.4279 16.1493 10.4279C15.2525 10.4279 14.3922 10.7827 13.7561 11.4148L0.515636 24.6378C0.198404 24.9573 0.0211064 25.3898 0.0227474 25.8401C0.0243883 26.2904 0.204833 26.7216 0.524386 27.0388C0.843938 27.356 1.27642 27.5333 1.7267 27.5317C2.17697 27.53 2.60815 27.3496 2.92539 27.03L3.91064 26.0465C5.38046 27.6307 7.15732 28.8992 9.13305 29.7747C11.1088 30.6501 13.242 31.1144 15.4029 31.139C18.7777 31.1466 22.06 30.0365 24.7374 27.982C24.816 27.9166 24.9151 27.8807 25.0174 27.8807C25.1197 27.8807 25.2188 27.9166 25.2974 27.982L27.6739 30.3585C27.7314 30.4145 27.7717 30.4858 27.79 30.5639C27.8083 30.6421 27.8039 30.7239 27.7771 30.7995C27.6155 31.2519 27.5856 31.7409 27.6909 32.2096C27.7963 32.6784 28.0325 33.1075 28.3721 33.4473L34.9574 40.05C36.7144 41.9838 39.9064 41.289 40.7026 38.7988C40.9011 38.1771 40.9162 37.5114 40.7462 36.8814C40.5761 36.2513 40.228 35.6836 39.7436 35.2463L33.1741 28.6103C32.6946 28.1366 32.0492 27.8685 31.3751 27.863C31.0835 27.863 30.8006 27.9138 30.5264 28.0153C30.4509 28.0422 30.3692 28.047 30.291 28.029C30.2129 28.011 30.1415 27.971 30.0854 27.9138L27.7089 25.5373C27.6411 25.4598 27.6037 25.3603 27.6037 25.2573C27.6037 25.1543 27.6411 25.0548 27.7089 24.9773C28.7456 23.6078 29.5486 22.0763 30.0854 20.4448C30.1647 20.2305 30.1999 20.0024 30.1889 19.7741C30.1779 19.5459 30.1209 19.3222 30.0214 19.1165C29.9219 18.9108 29.7818 18.7274 29.6097 18.5771C29.4376 18.4268 29.2369 18.3128 29.0196 18.242C28.8024 18.1711 28.5731 18.1449 28.3454 18.1648C28.1178 18.1847 27.8965 18.2504 27.6949 18.3579C27.4932 18.4653 27.3153 18.6124 27.1719 18.7903C27.0285 18.9682 26.9224 19.1732 26.8601 19.393C26.0721 21.7968 24.5449 23.8902 22.4965 25.3745C20.4482 26.8588 17.9833 27.6581 15.4536 27.6583C13.7475 27.6463 12.0621 27.283 10.5025 26.5911C8.94293 25.8993 7.54254 24.8936 6.38864 23.6368L15.8946 14.1133C15.9721 14.0455 16.0716 14.0081 16.1746 14.0081C16.2776 14.0081 16.3771 14.0455 16.4546 14.1133Z" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

3
html01/html/main/slides/03.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.8925 0.12555C7.07559 0.220402 7.22909 0.36375 7.33622 0.539931C7.44336 0.716112 7.50002 0.918351 7.5 1.12455C7.5 2.87955 8.1045 3.89655 8.8005 4.90305C8.8665 4.99905 8.9355 5.09705 9.0075 5.19705C9.672 6.13905 10.5 7.30905 10.5 8.99955C10.5 9.68899 10.3642 10.3717 10.1004 11.0086C9.83653 11.6456 9.44982 12.2244 8.96231 12.7119C8.4748 13.1994 7.89605 13.5861 7.25909 13.8499C6.62213 14.1138 5.93944 14.2496 5.25 14.2496C4.56056 14.2496 3.87787 14.1138 3.24091 13.8499C2.60395 13.5861 2.0252 13.1994 1.53769 12.7119C1.05018 12.2244 0.66347 11.6456 0.399632 11.0086C0.135795 10.3717 -1.02735e-08 9.68899 0 8.99955C0 7.76505 0.126 6.41955 0.9735 4.91955C1.8015 3.45405 3.2625 1.94055 5.7285 0.20505C5.89671 0.0866484 6.09416 0.0166318 6.29939 0.00261515C6.50461 -0.0114015 6.70975 0.0311184 6.8925 0.12555ZM10.833 5.21055C12.1377 4.3592 13.6411 3.86112 15.1961 3.76503C16.7511 3.66895 18.3043 3.97815 19.704 4.66239C21.1036 5.34664 22.3016 6.38248 23.1809 7.66859C24.0601 8.9547 24.5905 10.447 24.72 11.9995H20.6265C19.1347 11.9995 17.7039 12.5922 16.649 13.6471C15.5941 14.702 15.0015 16.1327 15.0015 17.6245V21.7196C13.9569 21.6323 12.9355 21.3633 11.9835 20.9246C11.9595 21.6581 11.9085 22.4591 11.8335 23.2991C12.8514 23.6757 13.9185 23.903 15.0015 23.9741V27.3745C15.0015 28.8664 15.5941 30.2971 16.649 31.352C17.7039 32.4069 19.1347 32.9995 20.6265 32.9995H30.3765C31.8683 32.9995 33.2991 32.4069 34.354 31.352C35.4089 30.2971 36.0015 28.8664 36.0015 27.3745V17.6245C36.0015 16.1327 35.4089 14.702 34.354 13.6471C33.2991 12.5922 31.8683 11.9995 30.3765 11.9995H26.9775C26.8467 10.038 26.2042 8.14494 25.114 6.50903C24.0237 4.87311 22.5239 3.55145 20.7638 2.67572C19.0037 1.8 17.0448 1.4008 15.0824 1.51788C13.12 1.63497 11.2225 2.26426 9.579 3.34305C9.714 3.57405 9.867 3.80505 10.0365 4.04955C10.0935 4.13455 10.1585 4.22655 10.2315 4.32555C10.4085 4.57455 10.62 4.86855 10.833 5.21055ZM30.378 14.2496C31.2731 14.2496 32.1315 14.6051 32.7645 15.2381C33.3974 15.871 33.753 16.7294 33.753 17.6245V27.3745C33.753 28.2697 33.3974 29.1281 32.7645 29.761C32.1315 30.394 31.2731 30.7495 30.378 30.7495H20.628C19.7329 30.7495 18.8745 30.394 18.2415 29.761C17.6086 29.1281 17.253 28.2697 17.253 27.3745V23.9006C19.6964 23.5708 21.9639 22.4478 23.7072 20.7043C25.4505 18.9607 26.5731 16.693 26.9025 14.2496H30.378ZM17.253 21.625V17.6245C17.253 16.7294 17.6086 15.871 18.2415 15.2381C18.8745 14.6051 19.7329 14.2496 20.628 14.2496H24.627C24.3147 16.0922 23.4369 17.792 22.1154 19.1135C20.7939 20.435 19.0956 21.3127 17.253 21.625ZM0 19.93C0 18.4256 0.12 16.5581 0.774 15.0191C2.0235 15.949 3.573 16.4995 5.25 16.4995C6.86406 16.5019 8.43548 15.9815 9.729 15.0161C10.3815 16.5566 10.5 18.427 10.5 19.93C10.5 22.4246 10.104 26.245 9.378 29.455C9.018 31.057 8.559 32.5736 7.9935 33.715C7.713 34.285 7.3755 34.8205 6.963 35.23C6.5475 35.641 5.973 35.9995 5.253 35.9995C4.533 35.9995 3.96 35.6411 3.5445 35.2285C3.132 34.8205 2.7945 34.2851 2.5125 33.7166C1.947 32.5736 1.488 31.0571 1.125 29.4566C0.3975 26.2451 0 22.4246 0 19.9316" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
html01/html/main/slides/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 895 B

BIN
html01/html/main/slides/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 786 B

BIN
html01/html/main/slides/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
html01/html/main/slides/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 956 B

BIN
html01/html/main/slides/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
html01/html/main/view-futuristic-space-rocket (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/main/001.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
images/main/002.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
images/main/003.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
images/main/004.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
images/main/005.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

BIN
images/main/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
images/main/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
images/main/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 661 KiB

BIN
images/main/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

3
images/main/Vector_right.svg Normal file
View File

@@ -0,0 +1,3 @@
<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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

3
images/main/slides/01.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17.5H0C0 7.875 7.875 0 17.5 0C27.125 0 35 7.875 35 17.5C35 27.125 27.125 35 17.5 35V28H10.5V21H17.5V28C23.31 28 28 23.2925 28 17.5C28 11.7075 23.2925 7 17.5 7C11.7075 7 7 11.7075 7 17.5ZM10.5 28V33.25H5.25V28H10.5ZM1.75 24.5H5.25V28H1.75V24.5Z" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

3
images/main/slides/02.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4546 14.1133L20.5461 18.2048C21.1822 18.8369 22.0425 19.1917 22.9393 19.1917C23.836 19.1917 24.6963 18.8369 25.3324 18.2048L36.8579 6.66179C36.9388 6.58677 37.045 6.54507 37.1554 6.54507C37.2657 6.54507 37.372 6.58677 37.4529 6.66179L39.3026 8.51154C39.4584 8.66904 39.6736 8.75654 39.8976 8.74954C40.0038 8.77404 40.1105 8.77404 40.2179 8.74954C40.3812 8.68289 40.5196 8.56702 40.614 8.41805C40.7084 8.26908 40.7541 8.0944 40.7446 7.91829V1.12829C40.7446 0.903192 40.6552 0.687309 40.496 0.528137C40.3369 0.368966 40.121 0.279544 39.8959 0.279544H33.1059C32.9271 0.266193 32.7487 0.309802 32.5962 0.404116C32.4437 0.498431 32.325 0.638607 32.2571 0.804544C32.1914 0.958308 32.1742 1.12844 32.2076 1.29227C32.2411 1.4561 32.3237 1.60585 32.4444 1.72154L34.4481 3.65704C34.4888 3.69518 34.5213 3.74126 34.5434 3.79243C34.5656 3.8436 34.577 3.89878 34.577 3.95454C34.577 4.01031 34.5656 4.06549 34.5434 4.11666C34.5213 4.16783 34.4888 4.21391 34.4481 4.25204L29.3556 9.34454C24.7846 -1.49321 10.1984 -3.31846 3.10039 6.05629C1.01089 8.81414 -0.0805673 12.1996 0.00463571 15.6585C0.00813571 16.2255 0.041969 16.7914 0.106136 17.356C0.156409 17.7699 0.357216 18.1508 0.670276 18.4261C0.983337 18.7014 1.38676 18.8518 1.80364 18.8488H2.00664C2.22853 18.8236 2.44327 18.7548 2.63855 18.6465C2.83383 18.5382 3.00581 18.3924 3.14464 18.2174C3.28348 18.0425 3.38643 17.8419 3.4476 17.6271C3.50877 17.4124 3.52697 17.1876 3.50114 16.9658C3.47471 16.5018 3.47471 16.0368 3.50114 15.5728C3.80389 6.35379 13.9749 0.916544 21.8079 5.78679C24.1147 7.22146 25.8659 9.39713 26.7744 11.9573L23.2446 15.5413C23.1609 15.6175 23.0517 15.6598 22.9384 15.6598C22.8251 15.6598 22.7159 15.6175 22.6321 15.5413L18.5424 11.4148C17.9063 10.7827 17.046 10.4279 16.1493 10.4279C15.2525 10.4279 14.3922 10.7827 13.7561 11.4148L0.515636 24.6378C0.198404 24.9573 0.0211064 25.3898 0.0227474 25.8401C0.0243883 26.2904 0.204833 26.7216 0.524386 27.0388C0.843938 27.356 1.27642 27.5333 1.7267 27.5317C2.17697 27.53 2.60815 27.3496 2.92539 27.03L3.91064 26.0465C5.38046 27.6307 7.15732 28.8992 9.13305 29.7747C11.1088 30.6501 13.242 31.1144 15.4029 31.139C18.7777 31.1466 22.06 30.0365 24.7374 27.982C24.816 27.9166 24.9151 27.8807 25.0174 27.8807C25.1197 27.8807 25.2188 27.9166 25.2974 27.982L27.6739 30.3585C27.7314 30.4145 27.7717 30.4858 27.79 30.5639C27.8083 30.6421 27.8039 30.7239 27.7771 30.7995C27.6155 31.2519 27.5856 31.7409 27.6909 32.2096C27.7963 32.6784 28.0325 33.1075 28.3721 33.4473L34.9574 40.05C36.7144 41.9838 39.9064 41.289 40.7026 38.7988C40.9011 38.1771 40.9162 37.5114 40.7462 36.8814C40.5761 36.2513 40.228 35.6836 39.7436 35.2463L33.1741 28.6103C32.6946 28.1366 32.0492 27.8685 31.3751 27.863C31.0835 27.863 30.8006 27.9138 30.5264 28.0153C30.4509 28.0422 30.3692 28.047 30.291 28.029C30.2129 28.011 30.1415 27.971 30.0854 27.9138L27.7089 25.5373C27.6411 25.4598 27.6037 25.3603 27.6037 25.2573C27.6037 25.1543 27.6411 25.0548 27.7089 24.9773C28.7456 23.6078 29.5486 22.0763 30.0854 20.4448C30.1647 20.2305 30.1999 20.0024 30.1889 19.7741C30.1779 19.5459 30.1209 19.3222 30.0214 19.1165C29.9219 18.9108 29.7818 18.7274 29.6097 18.5771C29.4376 18.4268 29.2369 18.3128 29.0196 18.242C28.8024 18.1711 28.5731 18.1449 28.3454 18.1648C28.1178 18.1847 27.8965 18.2504 27.6949 18.3579C27.4932 18.4653 27.3153 18.6124 27.1719 18.7903C27.0285 18.9682 26.9224 19.1732 26.8601 19.393C26.0721 21.7968 24.5449 23.8902 22.4965 25.3745C20.4482 26.8588 17.9833 27.6581 15.4536 27.6583C13.7475 27.6463 12.0621 27.283 10.5025 26.5911C8.94293 25.8993 7.54254 24.8936 6.38864 23.6368L15.8946 14.1133C15.9721 14.0455 16.0716 14.0081 16.1746 14.0081C16.2776 14.0081 16.3771 14.0455 16.4546 14.1133Z" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

3
images/main/slides/03.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.8925 0.12555C7.07559 0.220402 7.22909 0.36375 7.33622 0.539931C7.44336 0.716112 7.50002 0.918351 7.5 1.12455C7.5 2.87955 8.1045 3.89655 8.8005 4.90305C8.8665 4.99905 8.9355 5.09705 9.0075 5.19705C9.672 6.13905 10.5 7.30905 10.5 8.99955C10.5 9.68899 10.3642 10.3717 10.1004 11.0086C9.83653 11.6456 9.44982 12.2244 8.96231 12.7119C8.4748 13.1994 7.89605 13.5861 7.25909 13.8499C6.62213 14.1138 5.93944 14.2496 5.25 14.2496C4.56056 14.2496 3.87787 14.1138 3.24091 13.8499C2.60395 13.5861 2.0252 13.1994 1.53769 12.7119C1.05018 12.2244 0.66347 11.6456 0.399632 11.0086C0.135795 10.3717 -1.02735e-08 9.68899 0 8.99955C0 7.76505 0.126 6.41955 0.9735 4.91955C1.8015 3.45405 3.2625 1.94055 5.7285 0.20505C5.89671 0.0866484 6.09416 0.0166318 6.29939 0.00261515C6.50461 -0.0114015 6.70975 0.0311184 6.8925 0.12555ZM10.833 5.21055C12.1377 4.3592 13.6411 3.86112 15.1961 3.76503C16.7511 3.66895 18.3043 3.97815 19.704 4.66239C21.1036 5.34664 22.3016 6.38248 23.1809 7.66859C24.0601 8.9547 24.5905 10.447 24.72 11.9995H20.6265C19.1347 11.9995 17.7039 12.5922 16.649 13.6471C15.5941 14.702 15.0015 16.1327 15.0015 17.6245V21.7196C13.9569 21.6323 12.9355 21.3633 11.9835 20.9246C11.9595 21.6581 11.9085 22.4591 11.8335 23.2991C12.8514 23.6757 13.9185 23.903 15.0015 23.9741V27.3745C15.0015 28.8664 15.5941 30.2971 16.649 31.352C17.7039 32.4069 19.1347 32.9995 20.6265 32.9995H30.3765C31.8683 32.9995 33.2991 32.4069 34.354 31.352C35.4089 30.2971 36.0015 28.8664 36.0015 27.3745V17.6245C36.0015 16.1327 35.4089 14.702 34.354 13.6471C33.2991 12.5922 31.8683 11.9995 30.3765 11.9995H26.9775C26.8467 10.038 26.2042 8.14494 25.114 6.50903C24.0237 4.87311 22.5239 3.55145 20.7638 2.67572C19.0037 1.8 17.0448 1.4008 15.0824 1.51788C13.12 1.63497 11.2225 2.26426 9.579 3.34305C9.714 3.57405 9.867 3.80505 10.0365 4.04955C10.0935 4.13455 10.1585 4.22655 10.2315 4.32555C10.4085 4.57455 10.62 4.86855 10.833 5.21055ZM30.378 14.2496C31.2731 14.2496 32.1315 14.6051 32.7645 15.2381C33.3974 15.871 33.753 16.7294 33.753 17.6245V27.3745C33.753 28.2697 33.3974 29.1281 32.7645 29.761C32.1315 30.394 31.2731 30.7495 30.378 30.7495H20.628C19.7329 30.7495 18.8745 30.394 18.2415 29.761C17.6086 29.1281 17.253 28.2697 17.253 27.3745V23.9006C19.6964 23.5708 21.9639 22.4478 23.7072 20.7043C25.4505 18.9607 26.5731 16.693 26.9025 14.2496H30.378ZM17.253 21.625V17.6245C17.253 16.7294 17.6086 15.871 18.2415 15.2381C18.8745 14.6051 19.7329 14.2496 20.628 14.2496H24.627C24.3147 16.0922 23.4369 17.792 22.1154 19.1135C20.7939 20.435 19.0956 21.3127 17.253 21.625ZM0 19.93C0 18.4256 0.12 16.5581 0.774 15.0191C2.0235 15.949 3.573 16.4995 5.25 16.4995C6.86406 16.5019 8.43548 15.9815 9.729 15.0161C10.3815 16.5566 10.5 18.427 10.5 19.93C10.5 22.4246 10.104 26.245 9.378 29.455C9.018 31.057 8.559 32.5736 7.9935 33.715C7.713 34.285 7.3755 34.8205 6.963 35.23C6.5475 35.641 5.973 35.9995 5.253 35.9995C4.533 35.9995 3.96 35.6411 3.5445 35.2285C3.132 34.8205 2.7945 34.2851 2.5125 33.7166C1.947 32.5736 1.488 31.0571 1.125 29.4566C0.3975 26.2451 0 22.4246 0 19.9316" fill="#0C47A0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
images/main/view-futuristic-space-rocket (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

334
index.html
View File

@@ -122,83 +122,281 @@
</div>
</div>
</section>
<section class="header_slider">
<div class="slide main">
<div class="tags">
<div class="row_first">
<span>SEO</span><svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4.72852" r="4" fill="white"/>
</svg>
<span>Контент-маркетинг</span><svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4.72852" r="4" fill="white"/>
</svg>
<span>Аудит сайта</span>
</div>
<div class="row_second">
<span>Ссылочное продвижение</span><svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4.72852" r="4" fill="white"/>
</svg>
<span>Техническая оптимизация</span>
<div class="slider">
<div class="slider_main">
<div class="slider_row slider_row_1">
<div class="slider_row_container">
<!-- 1 -->
<div class="row_container_item">SEO</div>
<div class="row_container_area"></div>
<!-- 2 -->
<div class="row_container_item">Контент-маркетинг</div>
<div class="row_container_area"></div>
<!-- 3 -->
<div class="row_container_item">Аудит сайта</div>
<!-- 4 -->
<div class="row_container_item">Ссылочное продвижение</div>
<div class="row_container_area"></div>
<!-- 5 -->
<div class="row_container_item">Техническая оптимизация</div>
</div>
</div>
<div class="content">
<p class="subtitle">
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<div class="slider_row slider_row_2">
<div class="slider_row_inner">
<div class="slider_row_title"><svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5.87109C8.21285 5.87109 5.14258 8.94137 5.14258 12.7285C5.14258 13.3203 5.21744 13.8946 5.3584 14.4424H0.123047C0.04298 13.8826 0 13.3105 0 12.7285C9.17402e-05 6.10114 5.37262 0.728607 12 0.728516V5.87109Z" fill="#0C47A0"/>
<path d="M12.3098 0.7323C18.794 0.896722 24.0002 6.20461 24.0002 12.7284C24.0002 19.3558 18.6276 24.7282 12.0002 24.7284C5.95508 24.7283 0.954426 20.2583 0.122314 14.4432H5.35864C6.1201 17.4006 8.80524 19.5858 12.0002 19.5858C15.7872 19.5856 18.8577 16.5154 18.8577 12.7284C18.8577 9.05963 15.9759 6.06348 12.3528 5.87976L12.0002 5.87097V0.728394L12.3098 0.7323Z" fill="white"/>
</svg>
Креативность, инновации, прогресс</p>
<span class="index">01</span>
</svg>Креативность, инновации, прогресс</div>
<div class="slider_row_index">01</div>
</div>
</div>
</div>
<div class="accordion">
<!-- 1 -->
<div class="accordion-item" id="item1">
<div class="accordion_index">02</div>
<div class="accordion_title">Digital-продукты</div>
<img src="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">02</div>
<div class="item_wrapper_icon"><svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 17.5H0C0 7.875 7.875 0 17.5 0C27.125 0 35 7.875 35 17.5C35 27.125 27.125 35 17.5 35V28H10.5V21H17.5V28C23.31 28 28 23.2925 28 17.5C28 11.7075 23.2925 7 17.5 7C11.7075 7 7 11.7075 7 17.5ZM10.5 28V33.25H5.25V28H10.5ZM1.75 24.5H5.25V28H1.75V24.5Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">Digital продукты</div>
<div class="row_middle_text">Создаем и развиваем digital-продукты: от веб-сервисов и мобильных приложений до сложных платформ. </div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 2 -->
<div class="accordion-item" id="item2">
<div class="accordion_index">03</div>
<div class="accordion_title">Маркетинг</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">03</div>
<div class="item_wrapper_icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C6.54131 1 5.14236 1.57946 4.11091 2.61091C3.07946 3.64236 2.5 5.04131 2.5 6.5V7.5C2.5 8.028 2.715 8.535 2.943 8.926C3.174 9.325 3.452 9.659 3.646 9.854L5.063 11.27L5.64 13H10.36L10.937 11.27L12.354 9.854C12.548 9.659 12.826 9.324 13.057 8.926C13.285 8.535 13.5 8.028 13.5 7.5V6.5C13.5 5.04131 12.9205 3.64236 11.8891 2.61091C10.8576 1.57946 9.45869 1 8 1ZM9.354 5.354L8.646 4.646L6.793 6.5L7.793 7.5L6.646 8.646L7.354 9.354L9.207 7.5L8.207 6.5L9.354 5.354Z" fill="#0C47A0"/>
<path d="M10 15V14H6V15H10Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">маркетинг</div>
<div class="row_middle_text">Настраиваем и ведем рекламу, продвигаем в соцсетях, привлекаем лидов и повышаем лояльность. </div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 3 -->
<div class="accordion-item" id="item3">
<div class="accordion_index">04</div>
<div class="accordion_title">продвижение <br>&hairsp;&hairsp;Топовое SEO</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">04</div>
<div class="item_wrapper_icon"><svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.4546 14.1133L20.5461 18.2048C21.1822 18.8369 22.0425 19.1917 22.9393 19.1917C23.836 19.1917 24.6963 18.8369 25.3324 18.2048L36.8579 6.66179C36.9388 6.58677 37.045 6.54507 37.1554 6.54507C37.2657 6.54507 37.372 6.58677 37.4529 6.66179L39.3026 8.51154C39.4584 8.66904 39.6736 8.75654 39.8976 8.74954C40.0038 8.77404 40.1105 8.77404 40.2179 8.74954C40.3812 8.68289 40.5196 8.56702 40.614 8.41805C40.7084 8.26908 40.7541 8.0944 40.7446 7.91829V1.12829C40.7446 0.903192 40.6552 0.687309 40.496 0.528137C40.3369 0.368966 40.121 0.279544 39.8959 0.279544H33.1059C32.9271 0.266193 32.7487 0.309802 32.5962 0.404116C32.4437 0.498431 32.325 0.638607 32.2571 0.804544C32.1914 0.958308 32.1742 1.12844 32.2076 1.29227C32.2411 1.4561 32.3237 1.60585 32.4444 1.72154L34.4481 3.65704C34.4888 3.69518 34.5213 3.74126 34.5434 3.79243C34.5656 3.8436 34.577 3.89878 34.577 3.95454C34.577 4.01031 34.5656 4.06549 34.5434 4.11666C34.5213 4.16783 34.4888 4.21391 34.4481 4.25204L29.3556 9.34454C24.7846 -1.49321 10.1984 -3.31846 3.10039 6.05629C1.01089 8.81414 -0.0805673 12.1996 0.00463571 15.6585C0.00813571 16.2255 0.041969 16.7914 0.106136 17.356C0.156409 17.7699 0.357216 18.1508 0.670276 18.4261C0.983337 18.7014 1.38676 18.8518 1.80364 18.8488H2.00664C2.22853 18.8236 2.44327 18.7548 2.63855 18.6465C2.83383 18.5382 3.00581 18.3924 3.14464 18.2174C3.28348 18.0425 3.38643 17.8419 3.4476 17.6271C3.50877 17.4124 3.52697 17.1876 3.50114 16.9658C3.47471 16.5018 3.47471 16.0368 3.50114 15.5728C3.80389 6.35379 13.9749 0.916544 21.8079 5.78679C24.1147 7.22146 25.8659 9.39713 26.7744 11.9573L23.2446 15.5413C23.1609 15.6175 23.0517 15.6598 22.9384 15.6598C22.8251 15.6598 22.7159 15.6175 22.6321 15.5413L18.5424 11.4148C17.9063 10.7827 17.046 10.4279 16.1493 10.4279C15.2525 10.4279 14.3922 10.7827 13.7561 11.4148L0.515636 24.6378C0.198404 24.9573 0.0211064 25.3898 0.0227474 25.8401C0.0243883 26.2904 0.204833 26.7216 0.524386 27.0388C0.843938 27.356 1.27642 27.5333 1.7267 27.5317C2.17697 27.53 2.60815 27.3496 2.92539 27.03L3.91064 26.0465C5.38046 27.6307 7.15732 28.8992 9.13305 29.7747C11.1088 30.6501 13.242 31.1144 15.4029 31.139C18.7777 31.1466 22.06 30.0365 24.7374 27.982C24.816 27.9166 24.9151 27.8807 25.0174 27.8807C25.1197 27.8807 25.2188 27.9166 25.2974 27.982L27.6739 30.3585C27.7314 30.4145 27.7717 30.4858 27.79 30.5639C27.8083 30.6421 27.8039 30.7239 27.7771 30.7995C27.6155 31.2519 27.5856 31.7409 27.6909 32.2096C27.7963 32.6784 28.0325 33.1075 28.3721 33.4473L34.9574 40.05C36.7144 41.9838 39.9064 41.289 40.7026 38.7988C40.9011 38.1771 40.9162 37.5114 40.7462 36.8814C40.5761 36.2513 40.228 35.6836 39.7436 35.2463L33.1741 28.6103C32.6946 28.1366 32.0492 27.8685 31.3751 27.863C31.0835 27.863 30.8006 27.9138 30.5264 28.0153C30.4509 28.0422 30.3692 28.047 30.291 28.029C30.2129 28.011 30.1415 27.971 30.0854 27.9138L27.7089 25.5373C27.6411 25.4598 27.6037 25.3603 27.6037 25.2573C27.6037 25.1543 27.6411 25.0548 27.7089 24.9773C28.7456 23.6078 29.5486 22.0763 30.0854 20.4448C30.1647 20.2305 30.1999 20.0024 30.1889 19.7741C30.1779 19.5459 30.1209 19.3222 30.0214 19.1165C29.9219 18.9108 29.7818 18.7274 29.6097 18.5771C29.4376 18.4268 29.2369 18.3128 29.0196 18.242C28.8024 18.1711 28.5731 18.1449 28.3454 18.1648C28.1178 18.1847 27.8965 18.2504 27.6949 18.3579C27.4932 18.4653 27.3153 18.6124 27.1719 18.7903C27.0285 18.9682 26.9224 19.1732 26.8601 19.393C26.0721 21.7968 24.5449 23.8902 22.4965 25.3745C20.4482 26.8588 17.9833 27.6581 15.4536 27.6583C13.7475 27.6463 12.0621 27.283 10.5025 26.5911C8.94293 25.8993 7.54254 24.8936 6.38864 23.6368L15.8946 14.1133C15.9721 14.0455 16.0716 14.0081 16.1746 14.0081C16.2776 14.0081 16.3771 14.0455 16.4546 14.1133Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">топовое seo продвижение</div>
<div class="row_middle_text">Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 4 -->
<div class="accordion-item" id="item4">
<div class="accordion_index">05</div>
<div class="accordion_title">Создание сайтов</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">05</div>
<div class="item_wrapper_icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 22.73C9.61275 22.5707 9.26969 22.3203 9 22H3C2.73478 22 2.48043 21.8946 2.29289 21.7071C2.10536 21.5196 2 21.2652 2 21V5.25C2 5.1837 2.02634 5.12011 2.07322 5.07322C2.12011 5.02634 2.1837 5 2.25 5H21.75C21.8163 5 21.8799 5.02634 21.9268 5.07322C21.9737 5.12011 22 5.1837 22 5.25V10.42L24 11.27V3C24 2.20435 23.6839 1.44129 23.1213 0.87868C22.5587 0.31607 21.7956 0 21 0L3 0C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3L0 21C0 21.7956 0.31607 22.5587 0.87868 23.1213C1.44129 23.6839 2.20435 24 3 24H13L10 22.73ZM10.5 1.5C10.7652 1.5 11.0196 1.60536 11.2071 1.79289C11.3946 1.98043 11.5 2.23478 11.5 2.5C11.5 2.76522 11.3946 3.01957 11.2071 3.20711C11.0196 3.39464 10.7652 3.5 10.5 3.5C10.2348 3.5 9.98043 3.39464 9.79289 3.20711C9.60536 3.01957 9.5 2.76522 9.5 2.5C9.5 2.23478 9.60536 1.98043 9.79289 1.79289C9.98043 1.60536 10.2348 1.5 10.5 1.5ZM7 1.5C7.26522 1.5 7.51957 1.60536 7.70711 1.79289C7.89464 1.98043 8 2.23478 8 2.5C8 2.76522 7.89464 3.01957 7.70711 3.20711C7.51957 3.39464 7.26522 3.5 7 3.5C6.73478 3.5 6.48043 3.39464 6.29289 3.20711C6.10536 3.01957 6 2.76522 6 2.5C6 2.23478 6.10536 1.98043 6.29289 1.79289C6.48043 1.60536 6.73478 1.5 7 1.5ZM3.5 1.5C3.76522 1.5 4.01957 1.60536 4.20711 1.79289C4.39464 1.98043 4.5 2.23478 4.5 2.5C4.5 2.76522 4.39464 3.01957 4.20711 3.20711C4.01957 3.39464 3.76522 3.5 3.5 3.5C3.23478 3.5 2.98043 3.39464 2.79289 3.20711C2.60536 3.01957 2.5 2.76522 2.5 2.5C2.5 2.23478 2.60536 1.98043 2.79289 1.79289C2.98043 1.60536 3.23478 1.5 3.5 1.5Z" fill="#0C47A0"/>
<path d="M24 13.5702C23.9998 13.3739 23.9419 13.182 23.8334 13.0184C23.725 12.8548 23.5707 12.7267 23.39 12.6502L17.39 10.0802C17.2666 10.0279 17.134 10.001 17 10.001C16.866 10.001 16.7334 10.0279 16.61 10.0802L10.61 12.6502C10.4293 12.7267 10.275 12.8548 10.1666 13.0184C10.0581 13.182 10.0002 13.3739 10 13.5702V20.4302C10.0002 20.6265 10.0581 20.8184 10.1666 20.982C10.275 21.1456 10.4293 21.2736 10.61 21.3502L16.61 23.9202C16.7334 23.9724 16.866 23.9993 17 23.9993C17.134 23.9993 17.2666 23.9724 17.39 23.9202L23.39 21.3502C23.5707 21.2736 23.725 21.1456 23.8334 20.982C23.9419 20.8184 23.9998 20.6265 24 20.4302V13.5702ZM17 12.0902L20.46 13.5702L17 15.0602L13.54 13.5702L17 12.0902ZM12 15.0902L16 16.8002V21.4802L12 19.7702V15.0902ZM18 21.4802V16.8002L22 15.0902V19.7702L18 21.4802Z" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">Создание сайтов</div>
<div class="row_middle_text">Разрабатываем продающие сайты, которые привлекают клиентов, отражают ценности бренда.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
<!-- 5 -->
<div class="accordion-item" id="item5">
<div class="accordion_index">06</div>
<div class="accordion_title">Дизайн</div>
<img src="" alt="" class="img-open">
<img src="" class="img-closed">
<div class="blue-square">
<div class="item_wrapper">
<div class="wrapper_row_first">
<div class="item_wrapper_index">06</div>
<div class="item_wrapper_icon"><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.8925 0.12555C7.07559 0.220402 7.22909 0.36375 7.33622 0.539931C7.44336 0.716112 7.50002 0.918351 7.5 1.12455C7.5 2.87955 8.1045 3.89655 8.8005 4.90305C8.8665 4.99905 8.9355 5.09705 9.0075 5.19705C9.672 6.13905 10.5 7.30905 10.5 8.99955C10.5 9.68899 10.3642 10.3717 10.1004 11.0086C9.83653 11.6456 9.44982 12.2244 8.96231 12.7119C8.4748 13.1994 7.89605 13.5861 7.25909 13.8499C6.62213 14.1138 5.93944 14.2496 5.25 14.2496C4.56056 14.2496 3.87787 14.1138 3.24091 13.8499C2.60395 13.5861 2.0252 13.1994 1.53769 12.7119C1.05018 12.2244 0.66347 11.6456 0.399632 11.0086C0.135795 10.3717 -1.02735e-08 9.68899 0 8.99955C0 7.76505 0.126 6.41955 0.9735 4.91955C1.8015 3.45405 3.2625 1.94055 5.7285 0.20505C5.89671 0.0866484 6.09416 0.0166318 6.29939 0.00261515C6.50461 -0.0114015 6.70975 0.0311184 6.8925 0.12555ZM10.833 5.21055C12.1377 4.3592 13.6411 3.86112 15.1961 3.76503C16.7511 3.66895 18.3043 3.97815 19.704 4.66239C21.1036 5.34664 22.3016 6.38248 23.1809 7.66859C24.0601 8.9547 24.5905 10.447 24.72 11.9995H20.6265C19.1347 11.9995 17.7039 12.5922 16.649 13.6471C15.5941 14.702 15.0015 16.1327 15.0015 17.6245V21.7196C13.9569 21.6323 12.9355 21.3633 11.9835 20.9246C11.9595 21.6581 11.9085 22.4591 11.8335 23.2991C12.8514 23.6757 13.9185 23.903 15.0015 23.9741V27.3745C15.0015 28.8664 15.5941 30.2971 16.649 31.352C17.7039 32.4069 19.1347 32.9995 20.6265 32.9995H30.3765C31.8683 32.9995 33.2991 32.4069 34.354 31.352C35.4089 30.2971 36.0015 28.8664 36.0015 27.3745V17.6245C36.0015 16.1327 35.4089 14.702 34.354 13.6471C33.2991 12.5922 31.8683 11.9995 30.3765 11.9995H26.9775C26.8467 10.038 26.2042 8.14494 25.114 6.50903C24.0237 4.87311 22.5239 3.55145 20.7638 2.67572C19.0037 1.8 17.0448 1.4008 15.0824 1.51788C13.12 1.63497 11.2225 2.26426 9.579 3.34305C9.714 3.57405 9.867 3.80505 10.0365 4.04955C10.0935 4.13455 10.1585 4.22655 10.2315 4.32555C10.4085 4.57455 10.62 4.86855 10.833 5.21055ZM30.378 14.2496C31.2731 14.2496 32.1315 14.6051 32.7645 15.2381C33.3974 15.871 33.753 16.7294 33.753 17.6245V27.3745C33.753 28.2697 33.3974 29.1281 32.7645 29.761C32.1315 30.394 31.2731 30.7495 30.378 30.7495H20.628C19.7329 30.7495 18.8745 30.394 18.2415 29.761C17.6086 29.1281 17.253 28.2697 17.253 27.3745V23.9006C19.6964 23.5708 21.9639 22.4478 23.7072 20.7043C25.4505 18.9607 26.5731 16.693 26.9025 14.2496H30.378ZM17.253 21.625V17.6245C17.253 16.7294 17.6086 15.871 18.2415 15.2381C18.8745 14.6051 19.7329 14.2496 20.628 14.2496H24.627C24.3147 16.0922 23.4369 17.792 22.1154 19.1135C20.7939 20.435 19.0956 21.3127 17.253 21.625ZM0 19.93C0 18.4256 0.12 16.5581 0.774 15.0191C2.0235 15.949 3.573 16.4995 5.25 16.4995C6.86406 16.5019 8.43548 15.9815 9.729 15.0161C10.3815 16.5566 10.5 18.427 10.5 19.93C10.5 22.4246 10.104 26.245 9.378 29.455C9.018 31.057 8.559 32.5736 7.9935 33.715C7.713 34.285 7.3755 34.8205 6.963 35.23C6.5475 35.641 5.973 35.9995 5.253 35.9995C4.533 35.9995 3.96 35.6411 3.5445 35.2285C3.132 34.8205 2.7945 34.2851 2.5125 33.7166C1.947 32.5736 1.488 31.0571 1.125 29.4566C0.3975 26.2451 0 22.4246 0 19.9316" fill="#0C47A0"/>
</svg></div>
</div>
<div class="wrapper_row_middle">
<div class="row_middle_title">дизайн</div>
<div class="row_middle_text">Создаем целостный визуальный образ бренда: от логотипа и айдентики до дизайна интерфейсов.</div>
</div>
<div class="wrapper_row_botton">
<button class="wrapper_row_btn">Подробнее <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="#393939" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
</div>
</div> <!-- вот он -->
<div class="accordion-content" id="id1"></div>
</div>
</div>
</div>
<div class="accordion_about_info">
<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>
<section class="header_row_info">
<div class="row_info_heading">
<div class="info_heading_title">Рост на основе анализа данных</div>
<button class="info_heading_btn">Провести аудит <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="#fff" stroke-linecap="round" stroke-linejoin="round"/>
</svg></button>
</div>
<div class="row_info_list">
<!-- 1 -->
<div class="row_info_item">
<div class="row_info_area">
<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>
<div class="row_info_content">
<div class="info_content_first">Качество</div>
<div class="info_content_second">10 000+</div>
</div>
</div>
<!-- 2 -->
<div class="row_info_item">
<div class="row_info_area">
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7084 8.89514C10.4764 8.89514 10.2538 8.98733 10.0897 9.15142C9.9256 9.31552 9.83341 9.53808 9.83341 9.77014C9.83341 10.0022 9.9256 10.2248 10.0897 10.3889C10.2538 10.553 10.4764 10.6451 10.7084 10.6451H19.4584C19.6905 10.6451 19.913 10.553 20.0771 10.3889C20.2412 10.2248 20.3334 10.0022 20.3334 9.77014C20.3334 9.53808 20.2412 9.31552 20.0771 9.15142C19.913 8.98733 19.6905 8.89514 19.4584 8.89514H10.7084ZM8.66675 14.4368C8.66675 14.2047 8.75894 13.9822 8.92303 13.8181C9.08712 13.654 9.30968 13.5618 9.54175 13.5618H17.1251C17.3571 13.5618 17.5797 13.654 17.7438 13.8181C17.9079 13.9822 18.0001 14.2047 18.0001 14.4368C18.0001 14.6689 17.9079 14.8914 17.7438 15.0555C17.5797 15.2196 17.3571 15.3118 17.1251 15.3118H9.54175C9.30968 15.3118 9.08712 15.2196 8.92303 15.0555C8.75894 14.8914 8.66675 14.6689 8.66675 14.4368ZM11.8751 18.2285C11.643 18.2285 11.4205 18.3207 11.2564 18.4848C11.0923 18.6489 11.0001 18.8714 11.0001 19.1035C11.0001 19.3355 11.0923 19.5581 11.2564 19.7222C11.4205 19.8863 11.643 19.9785 11.8751 19.9785H19.4584C19.6905 19.9785 19.913 19.8863 20.0771 19.7222C20.2412 19.5581 20.3334 19.3355 20.3334 19.1035C20.3334 18.8714 20.2412 18.6489 20.0771 18.4848C19.913 18.3207 19.6905 18.2285 19.4584 18.2285H11.8751Z" fill="#0C47A0"/>
<path d="M2.83325 5.10356C2.83325 3.97656 3.74792 3.06189 4.87492 3.06189H24.1249C25.2519 3.06189 26.1666 3.97656 26.1666 5.10356V24.3536C26.1666 24.895 25.9515 25.4143 25.5686 25.7972C25.1857 26.1801 24.6664 26.3952 24.1249 26.3952H4.87492C4.33343 26.3952 3.81413 26.1801 3.43124 25.7972C3.04836 25.4143 2.83325 24.895 2.83325 24.3536V5.10356ZM4.87492 4.81189C4.79756 4.81189 4.72338 4.84262 4.66868 4.89732C4.61398 4.95201 4.58325 5.0262 4.58325 5.10356V24.3536C4.58325 24.5146 4.71392 24.6452 4.87492 24.6452H24.1249C24.2023 24.6452 24.2765 24.6145 24.3312 24.5598C24.3859 24.5051 24.4166 24.4309 24.4166 24.3536V5.10356C24.4166 5.0262 24.3859 4.95201 24.3312 4.89732C24.2765 4.84262 24.2023 4.81189 24.1249 4.81189H4.87492Z" fill="#0C47A0"/>
</svg></div>
<div class="row_info_content">
<div class="info_content_first">Гарантия</div>
<div class="info_content_second">100%</div>
</div>
</div>
<!-- 3 -->
<div class="row_info_item">
<div class="row_info_area">
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 2.47852L4 5.97852V16.4785C4 22.2781 8.70039 26.9785 14.5 26.9785C20.2996 26.9785 25 22.2781 25 16.4785V5.97852L14.5 2.47852ZM23.0312 16.4785C23.0312 21.1898 19.2113 25.0098 14.5 25.0098C9.78867 25.0098 5.96875 21.1898 5.96875 16.4785V7.45508L14.5 4.44727L23.0312 7.45508V16.4785Z" fill="#0C47A0"/>
<path d="M10.8489 13.7195C10.7577 13.6279 10.6493 13.5552 10.5298 13.5055C10.4104 13.4559 10.2824 13.4304 10.153 13.4304C10.0237 13.4304 9.89567 13.4559 9.77625 13.5055C9.65683 13.5552 9.54839 13.6279 9.45715 13.7195C9.36549 13.8108 9.29277 13.9192 9.24314 14.0386C9.19351 14.1581 9.16797 14.2861 9.16797 14.4154C9.16797 14.5448 9.19351 14.6728 9.24314 14.7922C9.29277 14.9116 9.36549 15.0201 9.45715 15.1113L12.9954 18.6496L13.0529 18.707C13.1392 18.7935 13.2417 18.8621 13.3545 18.9089C13.4673 18.9557 13.5883 18.9798 13.7105 18.9798C13.8326 18.9798 13.9536 18.9557 14.0664 18.9089C14.1793 18.8621 14.2818 18.7935 14.3681 18.707L20.4794 12.5957C20.5659 12.5094 20.6345 12.4069 20.6813 12.2941C20.7281 12.1812 20.7522 12.0603 20.7522 11.9381C20.7522 11.8159 20.7281 11.695 20.6813 11.5821C20.6345 11.4693 20.5659 11.3668 20.4794 11.2805L20.4029 11.2039C20.3166 11.1174 20.214 11.0488 20.1012 11.002C19.9884 10.9552 19.8674 10.9312 19.7452 10.9312C19.6231 10.9312 19.5021 10.9552 19.3893 11.002C19.2764 11.0488 19.1739 11.1174 19.0876 11.2039L13.7091 16.5797L10.8489 13.7195Z" fill="#0C47A0"/>
</svg></div>
<div class="row_info_content">
<div class="info_content_first">Безопасность</div>
<div class="info_content_second">300%</div>
</div>
</div>
<!-- 4 -->
<div class="row_info_item">
<div class="row_info_area">
<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>
<div class="row_info_content">
<div class="info_content_first">Успех</div>
<div class="info_content_second">150%</div>
</div>
</div>
<div class="slide_small">
<div class="slide_small_index">
02
</div>
<div class="slide_small_title">
Digital-продукты
</div>
</div>
<div class="slide_small second">
<div class="slide_small_index">
03
</div>
<div class="slide_small_title">
Маркетинг
</div>
</div>
<div class="slide_card">
<div class="card-content">
<div class="card-number">04</div>
<h3>ТОПОВОЕ SEO ПРОДВИЖЕНИЕ</h3>
<p>Продвигаем сайты, повышаем их видимость и привлекаем целевой трафик для роста бизнеса.</p>
<a href="#" class="btn">Подробнее</a>
</div>
</div>
<div class="slide_small second">
<div class="slide_small_index">
05
</div>
<div class="slide_small_title">
Создание сайтов
</div>
</div>
<div class="slide_small">
<div class="slide_small_index">
06
</div>
<div class="slide_small_title">
Дизайн
</div>
</div>
</section>
<section class="header_info">
<section class="advantage">
<div class="advantage_heading">
<div class="adv_heading_title">
<div class="heading_title_sub">
Наши преимущества
</div>
<div class="heading_title_main">
SEO-System?<br> <span>Гарантия</span> роста!
</div>
</div>
</div>
<div class="advantage_content">
<div class="adv_cont_01">Мы используем проверенные стратегии и современные технологии, чтобы ваш сайт занимал топовые позиции в поиске.</div>
<div class="adv_cont_02">С нами вы получаете - индивидуальные решения и долгосрочный рост трафика.</div>
</div>
</section>
<section class="advantage_slider">
<div class="cards">
<div class="card" style="background-image: url('/images/advantage/1.jpg')">
<div class="card-number">01</div>
<div class="card-title">Отправляем в космос позиции вашего сайта</div>
<div class="card-text">
Мы оптимизируем ваш сайт для поисковых систем, создаем качественный контент, обеспечиваем видимость и привлекаем целевых клиентов. Результат — стабильный рост позиций.
</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>

28
main.js
View File

@@ -1,7 +1,27 @@
document.querySelectorAll('.header_top_item').forEach((item) => {
item.addEventListener('click', (e) => {
e.preventDefault(); // если не нужно переходить со страницы
document.querySelectorAll('.header_top_item').forEach(el => el.classList.remove('active'));
const items = document.querySelectorAll('.accordion-item');
// Делаем первый аккордеон активным по умолчанию
if(items.length > 0) {
items[0].classList.add('active');
}
// items.forEach(item => {
// item.addEventListener('click', () => {
// items.forEach(i => i.classList.remove('active'));
// item.classList.add('active');
// });
// });
// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
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');
item.querySelector('.img-open').style.display = 'block';
item.querySelector('.img-closed').style.display = 'none';
});
});

541
style.css
View File

@@ -194,148 +194,461 @@ html, body, * {
height: 19px;
margin: 0;
}
.header_slider {
display: flex;
height: 350px;
gap: 10px
}
.slide {
}
.main {
flex: 50%;
background: url("/images/header_body/seo_top_01.png") 100% / cover;
.header_accordion {
background-color: #8FECFC;
height: 348px;
border-radius: 30px;
padding: 20px 20px;
margin-bottom: 20px;
}
.accordion_about_info {
width: 50%;
margin: 0;
margin-bottom: 40px;
}
.about_info_list {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 10px;
}
.tags {
display: flex;
.info_list_item {
margin: 0;
flex-direction: column;
font-weight: 500;
}
.row_first {
/* --------------------------------------------------------------------------------------------- */
.header_row_info {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
margin-bottom: 8px;
margin-bottom: 60px;
}
.row_second {
.row_info_heading {
margin: 0;
width: 30%;
}
.info_heading_title {
font-size: 36px;
font-weight: 600;
margin-bottom: 20px;
}
.info_heading_btn {
display: flex;
flex-direction: row;
margin: 0;
}
.tags span {
color: #fff;
padding: 8px;
background-color: #0C47A0;
align-items: center;
padding: 10px 16px;
border-radius: 16px;
background-color: #0C47A0;
transition: all .3s;
color: #fff;
margin: 0;
}
.row_info_list {
display: flex;
width: 70%;
justify-content: space-between;
gap: 30px;
align-items: center;
}
.row_info_item {
display: flex;
align-items: center;
border-radius: 30px;
background-color: #F4F4F4;
padding: 35px 30px;
margin: 0;
width: 100%;
}
.row_info_area {
padding: 10px;
border-radius: 50%;
border: 1px solid #fff;
margin: 0;
margin-right: 15px;
}
.tags svg {
margin: auto 0;
.row_info_item svg {
display: block;
width: 10px;
height: 10px;
width: 25px;
height: 25px;
}
.content {
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.subtitle {
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.subtitle svg {
display: block;
width: 24px;
height: 24px;
}
.index {
display: flex;
margin: 0;
height: 40px;
width: 40px;
background-color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
}
.index span {
}
.slide_small {
background-color: #0C47A0;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 5%;
height: 100%;
}
.slide_small_index {
position: absolute;
bottom: 0;
display: flex;
height: 40px;
width: 40px;
margin: 0;
background-color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 10px;
}
.slide_small_title {
color: #fff;
transform: rotate(270deg);
font-weight: 500;
.row_info_content {
white-space: nowrap;
text-align: center;
vertical-align: middle;
margin: 0;
}
.second {
background-color: #A5C6F6;
.info_content_first {
margin-bottom: 5px;
}
.slide_small_light {
.info_content_second {
font-size: 24px;
}
.slide_card {
background: url("/images/header_body/seo_top_04.png") 100% / cover;
/* ------------------------------------------------------------------------------------ */
.advantage {
margin: 0;
display: flex;
align-items: center;
}
.advantage_heading {
width: 100%;
margin: 0;
}
.adv_heading_title {
margin: 0;
}
.heading_title_sub {
font-size: 18px;
font-weight: 600;
margin-bottom: 25px;
}
.heading_title_main {
font-size: 74px;
font-weight: 600;
}
.heading_title_main span {
font-size: 74px;
font-weight: 600;
color: #0C47A0;
}
.advantage_content {
width: 40%;
margin: 0;
}
.adv_cont_01 {
margin-bottom: 10px;
font-size: 18px;
}
.adv_cont_02 {
font-size: 18px;
}
/* --------------------------------------------------------------------------------------------- */
.advantage_slide {
}
.cards {
display: flex;
}
.card {
height: 637px;
width: 418px;
border-radius: 30px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
background-size: cover;
}
.card.open {
background-color: white;
background-image: none !important;
color: #000;
height: auto;
padding: 20px;
width: 17%;
}
.card-content {
background-color: oklch(45.034% 0.18646 260.482 / 0.259);
height: 100%;
border-radius: 30px;
padding: 15px;
}
.card-number {
display: flex;
height: 40px;
width: 40px;
font-size: 14px;
color: #fff;
border-radius: 50%;
align-items: center;
border: 1px solid white;
margin: 0;
}
.card.open .card-number {
position: static;
margin-bottom: 10px;
}
.card-title {
font-size: 18px;
font-weight: bold;
padding: 20px;
}
.card.open .card-title {
padding: 0;
margin-bottom: 10px;
}
.card-text {
display: none;
font-size: 14px;
line-height: 1.5;
}
.card.open .card-text {
display: block;
margin-bottom: 20px;
}
/* -------------------------------------------------------------------------------------------------- */
.slider {
display: flex;
margin-top: 50px;
width: 100%;
height: 348px;
border-radius: 30px;
margin-bottom: 20px;
}
.slider_main {
width: 60%;
height: 100%;
background: url("/images/main/01.png") 100% / cover;
border-radius: 30px;
padding: 20px 15px 10px 20px;
color: white;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.slider_row {
}
.slider_row_1 {
margin: 0;
width: 80%;
}
.slider_row_container {
width: 70%;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
}
.row_container_item {
margin: 0;
background-color: #025DC873;
padding: 8px 8px;
border-radius: 15px;
border: 1px solid white;
margin-bottom: 8px;
align-items: center;
color: #fff;
}
.row_container_area {
margin: 0;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
margin-bottom: 8px;
}
.slider_row_2 {
margin: 0;
width: 100%;
}
.slider_row_inner {
width: 100%;
display: flex;
justify-content: space-between;
}
.slider_row_title {
margin: 0;
display: flex;
align-items: center;
color: #fff;
gap: 10px;
}
.slider_row_index {
margin: 0;
color: #393939;
font-size: 18px;
background-color: white;
border-radius: 50%;
padding: 10px;
}
/* -------------------------------------------------------------------------------------- */
.accordion {
display: flex;
width: 40%; /* 40% страницы */
height: 348px;
gap: 10px;
margin: 0 10px; /* отступ между колонками */
}
.accordion-item {
flex: 1;
border-radius: 30px; /* закругление краёв */
overflow: hidden;
cursor: pointer;
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
align-items: center;
}
.accordion-item.active{
display: flex;
flex: 5; /* раскрытая колонка */
width: 100%;
height: 100%;
}
.accordion-item.active .accordion_index{
display: none;
}
.accordion-item.active .accordion_title{
display: none;
}
.accordion-item.active .img-open {
display: none;
width: 0;
height: 0;
}
.accordion_index {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 50%;
background-color: #fff;
font-weight: 600;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.accordion_title {
margin: 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
writing-mode: vertical-lr;
transform: rotate(-180deg);
margin-bottom: 40px;
}
/* not-actine */
#item1 {
background-color: #0C47A0;
}
#item2 {
background-color: #A5C6F6;
}
#item3 {
background-color: #0C47A0;
}
#item4 {
background-color: #A5C6F6;
}
#item5 {
background-color: #0C47A0;
}
/* active */
#item1.active {
background: url("/images/main/001.png") 100% 100% / cover;
}
#item2.active {
background: url("/images/main/002.png") 100% 100% / cover;
}
#item3.active {
background: url("/images/main/003.png") 100% 100% / cover;
}
#item4.active {
background: url("/images/main/004.png") 100% 100% / cover;
}
#item5.active {
background: url("/images/main/005.png") 100% 100% / cover;
}
.img-open {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.img-open {
display: none;
}
.accordion-item.active .blue-square {
display: block;
height: 100%;
margin: 20px;
background-color: rgba(2, 76, 187, 0.259);
border-radius: 33px;
}
/* not-active */
.item_wrapper_index {
display: none;
}
.item_wrapper {
display: none;
}
/* active */
.accordion-item.active .item_wrapper {
display: flex;
flex-direction: column;
padding: 15px;
height: 100%;
}
.wrapper_row_first {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 15px;
height: 30%;
}
.item_wrapper_index {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
padding: 20px;
border-radius: 50%;
background-color: #fff;
width: 20px;
height: 20px;
font-size: 18px;
}
.item_wrapper_icon {
margin: 0;
background-color: #fff;
border-radius: 50%;
padding: 18px;
}
.item_wrapper_icon svg {
display: block;
width: 42px;
height: 42px;
}
.wrapper_row_middle {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.row_middle_title {
margin: 0;
color: #fff;
font-weight: 500;
font-size: 24px;
text-transform: uppercase;
}
.row_middle_text {
font-size: 16px;
color: #fff;
margin-bottom: 15px;
}
.wrapper_row_botton {
margin: 0;
height: 20%;
}
.wrapper_row_botton {
display: flex;
justify-content: end;
}
.wrapper_row_btn {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
gap: 5px;
padding: 8px;
border-radius: 16px;
border: none;
font-size: 14px;
cursor: pointer;
}
.btn {
.wrapper_row_btn svg {
display: block;
width: 14px;
height: 16px;
}