figma_02_path_fix

figma_02_readme
figma_adp_mob_final
2025-11-01 20:56:03 +03:00 · 2025-10-31 15:50:29 +03:00 · 2025-10-31 15:36:56 +03:00 · 2025-10-30 21:40:53 +03:00 · 2025-10-30 20:45:47 +03:00 · 2025-10-30 17:00:06 +03:00
29 changed files with 2733 additions and 504 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,127 @@
 🌐 Landing_Figma
 Landing_Figma — это адаптивный лендинг, разработанный по макету из Figma.
 Проект демонстрирует современные приёмы вёрстки и интерактивности на чистом HTML, CSS и JavaScript — без сторонних библиотек и фреймворков.
 Главный акцент сделан на микроанимациях, интерактивных элементах и чистой структуре кода, что делает страницу лёгкой и быстрой.
 🧱 Основная идея проекта
 Сайт разработан как демонстрация корпоративного лендинга SEO-агентства.
 Он объединяет в себе четкую типографику, минимализм, логичную навигацию и живой интерфейс.
 Каждая секция — отдельный акцент, от заголовка до анимированных карточек с услугами.
 📁 Структура проекта
 project/
 │
 ├── index.html          # Основная HTML-разметка (структура всех блоков)
 ├── reset.css           # Сброс базовых стилей браузера
 ├── style.css           # Основные стили: сетка, адаптив, анимации, медиазапросы
 ├── main.js             # JS-функционал: бургер, слайдеры, аккордеоны, свайпы
 └── /images/            # Все изображения (логотип, фоны, иконки, иллюстрации)
 ⚙️ Основной функционал
 🔹 Навигация
 Два состояния хедера: обычный и компактный для мобильных устройств
 Активное выделение текущего пункта меню
 Выпадающее подменю “Больше услуг” с динамическим изменением текста (“Меньше услуг” / “Больше услуг”)
 🔹 Бургер-меню
 Реализовано полностью на JavaScript
 При открытии блокируется скролл страницы
 Адаптировано под мобильные устройства с плавным появлением
 🔹 Аккордеон-слайдер
 Каждый элемент открывается кликом с плавной анимацией
 При раскрытии активная карточка увеличивается, остальные сворачиваются
 На мобильных устройствах аккордеон превращается в свайп-слайдер с точками навигации
 🔹 Свайп-слайдер (mobile)
 Работает при ширине экрана до 600px
 Поддерживает перелистывание жестами
 Индикаторы-сферы (dots) создаются динамически
 Реализован через нативные JS-события touchstart, touchmove, touchend
 🔹 Второй слайдер (раздел преимуществ)
 Автоматическое выравнивание карточек
 Реакция на клики и свайпы
 Точки навигации появляются только на мобильных устройствах
 Используется плавное смещение через transform: translateX()
 💡 Технологии и подходы
 Технология	Использование
 HTML5	Семантическая и модульная структура
 CSS3 / Flexbox / Grid	Гибкая адаптивная сетка
 JavaScript (Vanilla)	Интерактивность, логика меню и слайдеров
 Media Queries	Адаптив под разные устройства
 Google Fonts (Roboto)	Единая типографика во всём проекте
 SVG	Иконки без потери качества
 🧩 Особенности реализации
 Плавные анимации при наведении и кликах
 Использование transform, opacity, transition для визуальных эффектов
 Полная адаптивность: от десктопа до мобильных экранов
 Все интерактивные элементы работают без перезагрузки страницы
 Минимальное использование внешних зависимостей — чистый код и высокая производительность
 Файловая структура упрощает дальнейшую поддержку и масштабирование
 🚀 Как запустить проект
 🔸 Вариант 1: Открыть напрямую
 Скачай или клонируй репозиторий
 Открой index.html в браузере
 🔸 Вариант 2: Через локальный сервер
 Чтобы корректно отображались пути и изображения:
 # если установлен Node.js
 npx http-server . -p 8080
 # или с помощью Live Server в VS Code
 # ПКМ → "Open with Live Server"
 После этого сайт будет доступен по адресу:
 👉 http://localhost:8080
 📱 Адаптивность
 Устройство	Поддержка
 🖥️ Десктоп	Полноценная версия с анимацией
 💻 Планшет	Перестроение блоков, сохранение интерактивности
 📱 Смартфон	Свайп-слайдеры, бургер, оптимизированная структура
 🧑‍💻 Автор проекта
 Автор: [Алёна Трущёва / plx112]
 Email: [plx112@homyk.space]
 Git: [[https://git.homyk.space/Alena](https://git.homyk.space/Alena)]
 Роль: Frontend-разработчик
 Цель: Практика адаптивной вёрстки, JS-анимаций и UX-интерактивов
 📄 Лицензия
 Этот проект учебный.
--- a/html01/html/css.css
+++ b/html01/html/css.css
@@ -1,196 +0,0 @@
 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;
 }
--- a/html01/html/index.html
+++ b/html01/html/index.html
@@ -1,153 +0,0 @@
 <!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>
--- a/html01/html/js.js
+++ b/html01/html/js.js
@@ -1,27 +0,0 @@
 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';
    });
  });
--- a/html01/html/main/001.png
+++ b/html01/html/main/001.png
--- a/html01/html/main/002.png
+++ b/html01/html/main/002.png
--- a/html01/html/main/003.png
+++ b/html01/html/main/003.png
--- a/html01/html/main/004.png
+++ b/html01/html/main/004.png
--- a/html01/html/main/005.png
+++ b/html01/html/main/005.png
--- a/html01/html/main/01.png
+++ b/html01/html/main/01.png
--- a/html01/html/main/2.png
+++ b/html01/html/main/2.png
--- a/html01/html/main/3.png
+++ b/html01/html/main/3.png
--- a/html01/html/main/4.png
+++ b/html01/html/main/4.png
--- a/html01/html/main/Vector_right.svg
+++ b/html01/html/main/Vector_right.svg
@@ -1,3 +0,0 @@
 <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>
--- a/html01/html/main/slides/01.svg
+++ b/html01/html/main/slides/01.svg
@@ -1,3 +0,0 @@
 <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>
--- a/html01/html/main/slides/02.svg
+++ b/html01/html/main/slides/02.svg
@@ -1,3 +0,0 @@
 <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>
--- a/html01/html/main/slides/03.svg
+++ b/html01/html/main/slides/03.svg
@@ -1,3 +0,0 @@
 <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>
--- a/html01/html/main/slides/2.png
+++ b/html01/html/main/slides/2.png
--- a/html01/html/main/slides/3.png
+++ b/html01/html/main/slides/3.png
--- a/html01/html/main/slides/4.png
+++ b/html01/html/main/slides/4.png
--- a/html01/html/main/slides/5.png
+++ b/html01/html/main/slides/5.png
--- a/html01/html/main/slides/6.png
+++ b/html01/html/main/slides/6.png
--- a/html01/html/main/view-futuristic-space-rocket
+++ b/html01/html/main/view-futuristic-space-rocket
--- a/images/header_top/Vector
+++ b/images/header_top/Vector
@@ -0,0 +1,3 @@
 <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"/>
 </svg>
--- a/images/header_top/burger.svg
+++ b/images/header_top/burger.svg
@@ -0,0 +1,3 @@
 <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H23C23.5523 0 24 0.447715 24 1C24 1.55228 23.5523 2 23 2H1C0.447715 2 0 1.55228 0 1ZM0 8C0 7.44772 0.447715 7 1 7H23C23.5523 7 24 7.44772 24 8C24 8.55228 23.5523 9 23 9H1C0.447715 9 0 8.55228 0 8ZM11 15C11 14.4477 11.4477 14 12 14H23C23.5523 14 24 14.4477 24 15C24 15.5523 23.5523 16 23 16H12C11.4477 16 11 15.5523 11 15Z" fill="#201A1A"/>
 </svg>
--- a/images/header_top/mynaui_telephone.svg
+++ b/images/header_top/mynaui_telephone.svg
@@ -0,0 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.6005 14.5221C13.2055 17.0421 7.09652 10.9881 9.50052 8.45811C10.9685 6.91311 9.31052 5.14811 8.39252 3.84911C6.66952 1.41411 2.88852 4.77611 3.00252 6.91511C3.36552 13.6611 10.6625 21.6551 17.7285 20.9571C19.9385 20.7391 22.4785 16.7471 19.9435 15.2881C18.6755 14.5581 16.9345 13.1181 15.6005 14.5211" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
        <header class="header_top">
            <div class="header_top_inner">
                <div class="header_top_wrapper">
-                    <a class="logo_link" href="#"><img class="logo_img" src="/images/header_top/logo.png" alt="logo"></a>
+                    <a class="logo_link" href="#"><img class="logo_img" src="./images/header_top/logo.png" alt="logo"></a>
                    <div class="header_nav_top">
                        <!-- 1 -->
                        <div class="header_top_item">
@@ -63,6 +63,60 @@
                        </button>
                    </div>
                </div>
                <div class="header_top_wrapper-open">
                  <button class="burger_menu_btn"><svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H23C23.5523 0 24 0.447715 24 1C24 1.55228 23.5523 2 23 2H1C0.447715 2 0 1.55228 0 1ZM0 8C0 7.44772 0.447715 7 1 7H23C23.5523 7 24 7.44772 24 8C24 8.55228 23.5523 9 23 9H1C0.447715 9 0 8.55228 0 8ZM11 15C11 14.4477 11.4477 14 12 14H23C23.5523 14 24 14.4477 24 15C24 15.5523 23.5523 16 23 16H12C11.4477 16 11 15.5523 11 15Z" fill="#201A1A"/>
 </svg></button>
                    <a class="logo_link" href="#"><img class="logo_img" src="./images/header_top/logo.png" alt="logo"></a>
                    <div class="header_nav_top">
                        <!-- 1 -->
                        <div class="header_top_item">
                            <a class="header_top_link" href="#">
                                Главная
                            </a>
                        </div>
                        <!-- 2 -->
                        <div class="header_top_item">
                            <a class="header_top_link" href="#">
                                Услуги
                            </a>
                        </div>
                        <!-- 3 -->
                        <div class="header_top_item">
                            <a class="header_top_link" href="#">
                                Проекты
                            </a>
                        </div>
                        <!-- 4 -->
                        <div class="header_top_item">
                            <a class="header_top_link" href="#">
                                О нас
                            </a>
                        </div>
                        <!-- 5 -->
                        <div class="header_top_item">
                            <a class="header_top_link" href="#">
                                Контакты
                            </a>
                        </div>
                    </div>
                    <div class="header_call">
                        <div class="header_call_tel">
                          <div class="call_btn">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M13.6005 12.5221C11.2055 15.0421 5.09652 8.98811 7.50052 6.45811C8.96852 4.91311 7.31052 3.14811 6.39252 1.84911C4.66952 -0.585887 0.888521 2.77611 1.00252 4.91511C1.36552 11.6611 8.66252 19.6551 15.7285 18.9571C17.9385 18.7391 20.4785 14.7471 17.9435 13.2881C16.6755 12.5581 14.9345 11.1181 13.6005 12.5211" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg></div>
                            <a href="tel:+7(495)859-21-36" class="header_tel_link">+7(495)859-21-36</a>
                        </div>
                        <button class="header_call_btn">
                            <div class="header_call_text">Оставить заявку</div>
                            <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>
                <!--  NOT ACTIVE  -->
                <div class="header_top_list">
                    <div class="header_nav">
                        <!-- 1 -->
@@ -86,27 +140,93 @@
                            <a class="header_nav_link" href="#">Мобильные приложения</a>
                        </div>
                        <!-- 6 -->
-                        <div class="header_nav_item">
+                        <div class="header_nav_item header_nav_item-empty">
                            <a class="header_nav_link" href="#">Брендинг</a>
                        </div>
                        <!-- 7 -->
-                        <div class="header_nav_item">
+                        <div class="header_nav_item header_nav_item-empty">
                            <a class="header_nav_link" href="#">SEO-продвижение</a>
                        </div>
                        <!-- 8 -->
                        <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"/>
 </svg></button></div>
                    <div class="header_nav_burger">
                        <!-- 1 -->
                        <div class="header_nav_item">
                            <a class="header_nav_link" href="#">Яндекс продвижение</a>
                        </div>
                        <!-- 2 -->
                        <div class="header_nav_item">
                            <a class="header_nav_link" href="#">Google продвижение</a>
                        </div>
                        <!-- 3 -->
                        <div class="header_nav_item">
                            <a class="header_nav_link" href="#">Разработка сайтов</a>
                        </div>
                        <!-- 4 -->
                        <div class="header_nav_item">
                            <a class="header_nav_link" href="#">Интернет-магазины</a>
                        </div>
                        <!-- 5 -->
                        <div class="header_nav_item">
                            <a class="header_nav_link" href="#">Мобильные приложения</a>
                        </div>
                        <!-- 6 -->
                        <div class="header_nav_item header_nav_item-empty">
                            <a class="header_nav_link" href="#">Брендинг</a>
                        </div>
                        <!-- 7 -->
                        <div class="header_nav_item header_nav_item-empty">
                            <a class="header_nav_link" href="#">SEO-продвижение</a>
                        </div>
                        <!-- 8 -->
                        <div class="header_nav_item header_nav_item-empty">
                            <a class="header_nav_link" href="#">Лендинги</a>
                        </div>
                    </div>
                </div>
                  </div>
        </header>
        <div class="container">
        <section class="header_body">
            <div class="header_body_inner">
                <div class="header_body_top">
                    <div class="header_body_heading">
                        Продвижение сайтов в Москве
-                        <img class="header_header_img" src="/images/header_body/maps.png" alt="maps">
+                        <img class="header_header_img" src="./images/header_body/maps.png" alt="maps">
                        Гарантия роста позиций в Яндексе и Google 
                        <svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M39.7585 19.6591H34.7779C34.0728 13.6922 29.3408 8.96017 23.3738 8.25505V3.27443C23.3738 3.09509 23.2271 2.94836 23.0477 2.94836H20.6023C20.4229 2.94836 20.2762 3.09509 20.2762 3.27443V8.25505C14.3092 8.96017 9.57723 13.6922 8.87212 19.6591H3.89149C3.71216 19.6591 3.56543 19.8059 3.56543 19.9852V22.4307C3.56543 22.61 3.71216 22.7567 3.89149 22.7567H8.87212C9.57723 28.7237 14.3092 33.4557 20.2762 34.1608V39.1414C20.2762 39.3208 20.4229 39.4675 20.6023 39.4675H23.0477C23.2271 39.4675 23.3738 39.3208 23.3738 39.1414V34.1608C29.3408 33.4557 34.0728 28.7237 34.7779 22.7567H39.7585C39.9378 22.7567 40.0846 22.61 40.0846 22.4307V19.9852C40.0846 19.8059 39.9378 19.6591 39.7585 19.6591ZM21.825 31.1529C16.3308 31.1529 11.8801 26.7021 11.8801 21.2079C11.8801 15.7138 16.3308 11.263 21.825 11.263C27.3192 11.263 31.7699 15.7138 31.7699 21.2079C31.7699 26.7021 27.3192 31.1529 21.825 31.1529Z" fill="#393939"/>
@@ -114,7 +234,7 @@
 </svg>
                    </div>
                    <div class="header_body_about">
-                        <img class="header_about_img" src="/images/header_body/Stars.png" alt="stars">
+                        <img class="header_about_img" src="./images/header_body/Stars.png" alt="stars">
                        <div class="header_about_text">
                        SEO-студия<span>, помогающая вашему бизнесу расти. Оптимизируем сайты, увеличиваем трафик и выводим в топ поисковых систем.</span>
                        </div>
@@ -131,12 +251,13 @@
                      <div class="row_container_area"></div>
                      <!-- 2 -->
                      <div class="row_container_item">Контент-маркетинг</div>
-                      <div class="row_container_area"></div>
+                      <div class="row_container_area row_container_area-mobile"></div>
                      <!-- 3 -->
                      <div class="row_container_item">Аудит сайта</div>
                      <div class="row_container_area row_container_area-reverse"></div>
                      <!-- 4 -->
                      <div class="row_container_item">Ссылочное продвижение</div>
-                      <div class="row_container_area"></div>
+                      <div class="row_container_area row_container_area-empty"></div>
                      <!-- 5 -->
                      <div class="row_container_item">Техническая оптимизация</div>
                  </div>
@@ -150,18 +271,25 @@
                      <div class="slider_row_index">01</div>
                  </div>
              </div>
          </div>
          <div class="accordion_about_info accordion_about_info-open">
            <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>
          <div class="accordion">
    <!-- 1 -->
      <div class="accordion-item" id="item1">
-        <div class="accordion_index">02</div>
+        <div class="accordion_index_area"><div class="accordion_index">02</div></div>
-        <div class="accordion_title">Digital-продукты</div>
+        <div class="accordion_title">Digital продукты</div>
-      <img src="" class="img-open">
+      <img src="" alt="" class="img-open">
      <img src="" class="img-closed">
      <div class="blue-square">
        <div class="item_wrapper">
          <div class="wrapper_row_first">
-          <div class="item_wrapper_index">02</div>
+          <div class="item_wrapper_area"><div class="item_wrapper_index">02</div></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>
@@ -181,14 +309,14 @@
    </div>
    <!-- 2 -->
      <div class="accordion-item" id="item2">
-        <div class="accordion_index">03</div>
+        <div class="accordion_index_area"><div class="accordion_index">03</div></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_area"><div class="item_wrapper_index">03</div></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"/>
@@ -209,14 +337,14 @@
    </div>
      <!-- 3 -->
      <div class="accordion-item" id="item3">
-        <div class="accordion_index">04</div>
+        <div class="accordion_index_area"><div class="accordion_index">04</div></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_area"><div class="item_wrapper_index">04</div></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>
@@ -236,14 +364,14 @@
    </div>
    <!-- 4 -->
      <div class="accordion-item" id="item4">
-        <div class="accordion_index">05</div>
+        <div class="accordion_index_area"><div class="accordion_index">05</div></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_area"><div class="item_wrapper_index">05</div></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"/>
@@ -264,14 +392,15 @@
    </div>
    <!-- 5 -->
      <div class="accordion-item" id="item5">
-        <div class="accordion_index">06</div>
+        <div class="accordion_index_area"><div class="accordion_index">06</div></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_area">
          <div class="item_wrapper_index">06</div></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>
@@ -291,7 +420,7 @@
    </div>
          </div>
        </div>
-        <div class="accordion_about_info">
+        <div class="accordion_about_info accordion_about_info-empty">
            <div class="about_info_list">
                <div class="info_list_item">98% Успешных кейсов</div>
                <div class="info_list_item">24/7 Поддержка Клиентов</div>
@@ -308,7 +437,7 @@
            <div class="row_info_list">
                <!-- 1 -->
                <div class="row_info_item">
-                    <div class="row_info_index">
+                    <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>
@@ -344,8 +473,8 @@
                <!-- 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">
+                    <svg width="26" height="23" viewBox="0 0 26 23" 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"/>
+<path d="M22.0415 22.4206C21.2682 22.4206 20.5854 22.1786 19.9929 21.6947C19.4005 21.2108 19.0324 20.5916 18.8885 19.8373H11.7082C10.4527 19.8373 9.38532 19.3977 8.50613 18.5185C7.62693 17.6393 7.18734 16.5719 7.18734 15.3164C7.18734 14.0609 7.62693 12.9936 8.50613 12.1144C9.38532 11.2352 10.4527 10.7956 11.7082 10.7956H14.2915C15.1793 10.7956 15.9397 10.4792 16.5726 9.84624C17.2046 9.21246 17.5207 8.45081 17.5207 7.56128C17.5207 6.67175 17.2046 5.91225 16.5726 5.28278C15.9405 4.65331 15.1802 4.33814 14.2915 4.33728H7.10984C6.96345 5.09075 6.59489 5.70989 6.00417 6.1947C5.41345 6.6795 4.73145 6.92147 3.95817 6.92061C3.06089 6.92061 2.29881 6.60717 1.67192 5.98028C1.04331 5.35253 0.729004 4.59045 0.729004 3.69403C0.729004 2.79761 1.04331 2.0351 1.67192 1.40649C2.30053 0.777877 3.06262 0.463141 3.95817 0.46228C4.73145 0.46228 5.41345 0.704683 6.00417 1.18949C6.59403 1.67343 6.96302 2.29214 7.11113 3.04561H14.2915C15.547 3.04561 16.6144 3.48521 17.4935 4.3644C18.3727 5.2436 18.8123 6.31095 18.8123 7.56645C18.8123 8.82195 18.3727 9.88929 17.4935 10.7685C16.6144 11.6477 15.547 12.0873 14.2915 12.0873H11.7082C10.8204 12.0873 10.06 12.4042 9.42709 13.0379C8.79503 13.6709 8.479 14.4321 8.479 15.3216C8.479 16.2111 8.79546 16.9706 9.42838 17.6001C10.0604 18.2304 10.8204 18.5456 11.7082 18.5456H18.8898C19.0362 17.7921 19.4048 17.1734 19.9955 16.6895C20.5862 16.2055 21.2682 15.9631 22.0415 15.9623C22.9388 15.9623 23.7009 16.2762 24.3278 16.9039C24.9564 17.5308 25.2707 18.2924 25.2707 19.1889C25.2707 20.0853 24.9564 20.8478 24.3278 21.4764C23.6991 22.105 22.9371 22.4198 22.0415 22.4206ZM3.95817 5.62895C4.48948 5.62895 4.94543 5.43907 5.32605 5.05932C5.7058 4.67871 5.89567 4.22275 5.89567 3.69145C5.89567 3.16014 5.7058 2.70418 5.32605 2.32357C4.94543 1.94382 4.48948 1.75395 3.95817 1.75395C3.42687 1.75395 2.97091 1.94382 2.5903 2.32357C2.21055 2.70418 2.02067 3.16014 2.02067 3.69145C2.02067 4.22275 2.21055 4.67871 2.5903 5.05932C2.97091 5.43907 3.42687 5.62895 3.95817 5.62895Z" fill="#0C47A0"/>
 </svg></div>
                    <div class="row_info_content">
                        <div class="info_content_first">Успех</div>
@@ -377,7 +506,7 @@
            <div class="advantage_slider_item">
              <!-- CLOSE -->
              <div class="advantage_slider_close">
-                <img src="/images/advantage/1.jpg" alt="">
+                <img src="./images/advantage/1.jpg" alt="">
                <div class="slider_item_wrapper">
                  <div class="slider_item_index">01</div>
                  <div class="slider_item_title">Отправляем в космос позиции вашего сайта</div>
@@ -398,7 +527,7 @@
            <div class="advantage_slider_item advantage_slider_item-shadow">
              <!-- CLOSE -->
              <div class="advantage_slider_close advantage_slider_close-shadow">
-                <img class="slider_close_shadow" src="/images/advantage/2.jpg" alt="">
+                <img class="slider_close_shadow" src="./images/advantage/2.jpg" alt="">
                <div class="slider_item_wrapper slider_item_wrapper-reverse">
                  <div class="slider_item_index slider_item_index-reverse">02</div>
                  <div class="slider_item_title slider_item_title-reverse">Сроки продвижения  всего от 1 дня! </div>
@@ -419,7 +548,7 @@
            <div class="advantage_slider_item">
              <!-- CLOSE -->
              <div class="advantage_slider_close">
-                <img class="slider_close_img" src="/images/advantage/3.jpg" alt="">
+                <img class="slider_close_img" src="./images/advantage/3.jpg" alt="">
                <div class="slider_item_wrapper">
                  <div class="slider_item_index">03</div>
                  <div class="slider_item_title">Работаем с абсолютно любой тематикой</div>
@@ -473,9 +602,10 @@
                  <div class="item_link">
                    Рост бизнеса
                  </div>
                  <div class="item_link_svg">
                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20.125 19.0645H19.2266V4.50977C19.2266 4.3668 19.1698 4.22968 19.0687 4.12859C18.9676 4.0275 18.8305 3.9707 18.6875 3.9707H13.6562C13.5133 3.9707 13.3762 4.0275 13.2751 4.12859C13.174 4.22968 13.1172 4.3668 13.1172 4.50977V8.2832H8.625C8.48203 8.2832 8.34492 8.34 8.24383 8.44109C8.14273 8.54218 8.08594 8.6793 8.08594 8.82227V12.5957H4.3125C4.16953 12.5957 4.03242 12.6525 3.93133 12.7536C3.83023 12.8547 3.77344 12.9918 3.77344 13.1348V19.0645H2.875C2.73203 19.0645 2.59492 19.1212 2.49383 19.2223C2.39273 19.3234 2.33594 19.4605 2.33594 19.6035C2.33594 19.7465 2.39273 19.8836 2.49383 19.9847C2.59492 20.0858 2.73203 20.1426 2.875 20.1426H20.125C20.268 20.1426 20.4051 20.0858 20.5062 19.9847C20.6073 19.8836 20.6641 19.7465 20.6641 19.6035C20.6641 19.4605 20.6073 19.3234 20.5062 19.2223C20.4051 19.1212 20.268 19.0645 20.125 19.0645ZM14.1953 5.04883H18.1484V19.0645H14.1953V5.04883ZM9.16406 9.36133H13.1172V19.0645H9.16406V9.36133ZM4.85156 13.6738H8.08594V19.0645H4.85156V13.6738Z" fill="black"/>
-</svg>
+</svg></div>
              </div>
                </div>
              </div>
@@ -502,9 +632,10 @@
                  <div class="item_link">
                    Качество
                  </div>
                  <div class="item_link_svg">
                  <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7969 7.16602C15.7976 6.14416 15.5394 5.13877 15.0463 4.24375C14.5532 3.34873 13.8413 2.59326 12.9772 2.0479C12.113 1.50254 11.1247 1.18507 10.1046 1.12514C9.08452 1.06521 8.06587 1.26478 7.14379 1.7052C6.22171 2.14563 5.42628 2.81254 4.83179 3.64367C4.23729 4.47481 3.86312 5.44304 3.74421 6.45796C3.6253 7.47288 3.76553 8.50138 4.15181 9.44742C4.53809 10.3935 5.15782 11.2262 5.95313 11.8678V17.291C5.9532 17.3629 5.97166 17.4336 6.00673 17.4964C6.0418 17.5591 6.09233 17.6119 6.15352 17.6496C6.21994 17.6911 6.29669 17.713 6.375 17.7129C6.4404 17.7129 6.50491 17.6978 6.56344 17.6686L9.75 16.0753L12.9373 17.6686C13.0016 17.7006 13.073 17.7156 13.1447 17.7122C13.2164 17.7089 13.2861 17.6873 13.3471 17.6495C13.4082 17.6116 13.4586 17.5589 13.4935 17.4962C13.5285 17.4334 13.5468 17.3628 13.5469 17.291V11.8678C14.2493 11.3019 14.816 10.5859 15.2054 9.77223C15.5948 8.95858 15.7969 8.06803 15.7969 7.16602ZM4.54688 7.16602C4.54688 6.13694 4.85203 5.13097 5.42376 4.27532C5.99549 3.41967 6.8081 2.75277 7.75885 2.35896C8.7096 1.96515 9.75577 1.86211 10.7651 2.06287C11.7744 2.26364 12.7015 2.75919 13.4292 3.48686C14.1568 4.21453 14.6524 5.14163 14.8531 6.15094C15.0539 7.16025 14.9509 8.20642 14.5571 9.15717C14.1632 10.1079 13.4964 10.9205 12.6407 11.4923C11.7851 12.064 10.7791 12.3691 9.75 12.3691C8.37056 12.3675 7.0481 11.8187 6.07268 10.8433C5.09727 9.86792 4.54855 8.54546 4.54688 7.16602ZM12.7031 16.6083L9.93773 15.2259C9.87922 15.1967 9.8147 15.1815 9.7493 15.1815C9.68389 15.1815 9.61938 15.1967 9.56086 15.2259L6.79688 16.6083V12.4395C7.69867 12.9461 8.71564 13.2122 9.75 13.2122C10.7844 13.2122 11.8013 12.9461 12.7031 12.4395V16.6083ZM9.75 10.9629C10.501 10.9629 11.235 10.7402 11.8594 10.323C12.4838 9.9058 12.9705 9.31281 13.2579 8.61902C13.5452 7.92523 13.6204 7.16181 13.4739 6.42529C13.3274 5.68877 12.9658 5.01223 12.4348 4.48123C11.9038 3.95022 11.2273 3.58861 10.4907 3.4421C9.75421 3.2956 8.99079 3.37079 8.297 3.65817C7.60321 3.94554 7.01022 4.4322 6.59301 5.05659C6.17581 5.68098 5.95313 6.41507 5.95313 7.16602C5.95424 8.17267 6.35463 9.13777 7.06644 9.84958C7.77825 10.5614 8.74335 10.9618 9.75 10.9629ZM9.75 4.2129C10.3341 4.2129 10.905 4.38609 11.3907 4.71059C11.8763 5.03508 12.2548 5.4963 12.4783 6.03591C12.7018 6.57552 12.7603 7.1693 12.6464 7.74215C12.5324 8.315 12.2512 8.84119 11.8382 9.2542C11.4252 9.6672 10.899 9.94846 10.3261 10.0624C9.75328 10.1763 9.1595 10.1179 8.61989 9.89435C8.08028 9.67084 7.61906 9.29233 7.29457 8.80669C6.97007 8.32105 6.79688 7.75009 6.79688 7.16602C6.79688 6.3828 7.10801 5.63167 7.66183 5.07785C8.21564 4.52403 8.96678 4.2129 9.75 4.2129Z" fill="#393939"/>
-</svg>
+</svg></div>
              </div>
                </div>
              </div>
@@ -532,16 +663,77 @@
                  <div class="item_link">
                    Скорость
                  </div>
                  <div class="item_link_svg">
                  <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.24494 19.2465L8.61585 18.2777C8.40694 17.6547 8.22837 17.0206 8.08015 16.3754C7.93256 15.7301 7.82491 15.0759 7.75719 14.4127L6.50177 15.2522C6.41616 15.3142 6.35163 15.3851 6.30819 15.465C6.26474 15.5448 6.24334 15.6336 6.24398 15.7314L6.24494 19.2465ZM9.57994 18.1665H13.4133C13.7008 17.3928 13.9324 16.5466 14.1081 15.6279C14.2838 14.7091 14.3716 13.7524 14.3716 12.7577C14.3716 11.3112 14.1512 9.97945 13.7104 8.76237C13.2695 7.54529 12.5316 6.36973 11.4966 5.2357C10.4616 6.37101 9.72369 7.54688 9.28285 8.76333C8.84202 9.97977 8.6216 11.3115 8.6216 12.7586C8.6216 13.754 8.70945 14.7107 8.88514 15.6288C9.06084 16.5469 9.29244 17.3928 9.57994 18.1665ZM11.4966 12.8957C11.0922 12.8957 10.7517 12.757 10.475 12.4797C10.1977 12.2031 10.0591 11.8626 10.0591 11.4582C10.0591 11.0537 10.1977 10.7132 10.475 10.4366C10.7523 10.1599 11.0928 10.0213 11.4966 10.0207C11.9004 10.02 12.2409 10.1587 12.5182 10.4366C12.7955 10.7132 12.9341 11.0537 12.9341 11.4582C12.9341 11.8626 12.7955 12.2031 12.5182 12.4797C12.2409 12.7564 11.9004 12.895 11.4966 12.8957ZM16.7483 19.2465V15.7505C16.7483 15.6521 16.7272 15.5601 16.685 15.4745C16.6416 15.3883 16.5767 15.3142 16.4905 15.2522L15.236 14.4127C15.1683 15.0759 15.045 15.7946 14.8661 16.569C14.6872 17.3433 14.5243 17.9189 14.3774 18.2959L16.7483 19.2465ZM11.4966 3.9707C12.8197 5.14498 13.7893 6.46812 14.4051 7.94012C15.0217 9.41212 15.3299 11.0518 15.3299 12.8592C15.3299 12.9327 15.3331 13.0094 15.3395 13.0892C15.3459 13.1691 15.3427 13.2522 15.3299 13.3384L16.9926 14.4587C17.215 14.5973 17.3897 14.7826 17.5169 15.0145C17.644 15.2465 17.7076 15.4918 17.7076 15.7505V20.6543L13.8982 19.1248H9.07681L5.28564 20.6543V15.7323C5.28564 15.4742 5.34634 15.2289 5.46773 14.9963C5.58848 14.7644 5.76002 14.5791 5.98235 14.4405L7.66327 13.3192V12.8592C7.66327 11.0512 7.97153 9.41148 8.58806 7.94012C9.20395 6.46812 10.1735 5.14498 11.4966 3.9707Z" fill="#393939"/>
-</svg>
+</svg></div>
              </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <div class="fotter_wrapper">
        <section class="footer">
          <div class="footer_content">
            <div class="footer_cont_heading">Скидка 50%<br>на SEO-продвижение!</div>
            <div class="footer_cont_text">До окончания акции осталось:</div>
            <div class="footer_cont_time">
              <div class="cont_time_items">
                <!-- 1 -->
                <div class="cont_time_item">
                  <div class="time_item_index"><div class="item_index_color">01</div></div>
                  <div class="time_item_interval">дней</div>
                </div>
                <div class="const_time_area">
                <div class="time_area_first"></div>
                <div class="time_area_second"></div>
                </div>
                <!-- 2 -->
                <div class="cont_time_item">
                  <div class="time_item_index"><div class="item_index_color">05</div></div>
                  <div class="time_item_interval">часов</div>
                </div>
                <div class="const_time_area">
                <div class="time_area_first"></div>
                <div class="time_area_second"></div>
                </div>
                <!-- 3 -->
                <div class="cont_time_item">
                  <div class="time_item_index"><div class="item_index_color">45</div></div>
                  <div class="time_item_interval">минут</div>
                </div>
                <div class="const_time_area">
                <div class="time_area_first"></div>
                <div class="time_area_second"></div>
                </div>
                <!-- 4 -->
                <div class="cont_time_item">
                  <div class="time_item_index"><div class="item_index_color">12</div></div>
                  <div class="time_item_interval">секунд</div>
                </div>
              </div>
            </div>
            <div class="footer_cont_info">
              Скидка только до конца месяца – успей поднять свой сайт в топ Google и Яндекс!
            </div>
            <div class="footer_cont_button"><button class="footer_cont_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 class="footer_chart">
            <div class="footer_chart_content">
              <div class="chart_cont_text">Специальное предложение</div>
              <div class="chart_cont_title">Гарантированный рост трафика</div>
              <div class="chart_cont_text02">Ваш сайт уверенно растет в поисковой выдаче.<span>Дальше - больше!</span></div>
            </div>
            <div class="footer_chart_img">
              <img class="chart_img" src="./images/footer_banner/scale.png" alt="chart">
            </div>
          </div>
        </section>
        </div>
        </div>
    </div>
    <script src="main.js"></script>
 </body>
--- a/main.js
+++ b/main.js
@@ -14,48 +14,337 @@
 // -------------------------------ACCORDION-SLIDER-----------------------------------------------------------
-const items = document.querySelectorAll('.accordion-item');
+document.addEventListener('DOMContentLoaded', () => {
  const accordion = document.querySelector('.accordion');
  const items = document.querySelectorAll('.accordion-item');
  const dotsContainer = document.createElement('div');
  dotsContainer.classList.add('slider-dots');
  accordion.after(dotsContainer);
-// Делаем первый аккордеон активным по умолчанию
+  let dots = [];
-if(items.length > 0) {
+  let isMobile = false;
-  items[0].classList.add('active');
+  let currentIndex = 0;
 }
-// items.forEach(item => {
+  // Свайп
-//   item.addEventListener('click', () => {
+  let startX = 0;
-//     items.forEach(i => i.classList.remove('active'));
+  let endX = 0;
-//     item.classList.add('active');
+
-//   });
+  // === СОЗДАНИЕ ТОЧЕК ===
-// });
+  function createDots() {
-// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
+    dotsContainer.innerHTML = '';
-items.forEach(item => {
+    items.forEach((_, index) => {
-    item.addEventListener('click', () => {
+      const dot = document.createElement('span');
-      items.forEach(i => {
+      dot.classList.add('dot');
-        i.classList.remove('active');
+      if (index === 0) dot.classList.add('active');
-        i.querySelector('.img-open').style.display = 'none';
+      dotsContainer.appendChild(dot);
-        i.querySelector('.img-closed').style.display = 'block';
+    });
    dots = document.querySelectorAll('.dot');
  }
  // === ПОКАЗ СЛАЙДА ===
  function showSlide(index) {
    items.forEach((item, i) => {
      if (i === index) {
        item.style.display = 'flex';
      } else {
        item.style.display = 'none';
      }
    });
    dots.forEach(dot => dot.classList.remove('active'));
    if (dots[index]) dots[index].classList.add('active');
  }
  // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
  function enableSlider() {
    isMobile = true;
    items.forEach(item => item.classList.add('active'));
    createDots();
    currentIndex = 0;
    showSlide(currentIndex);
    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        currentIndex = i;
        showSlide(currentIndex);
      });
    });
    // свайпы
    accordion.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
    });
    accordion.addEventListener('touchmove', (e) => {
      endX = e.touches[0].clientX;
    });
    accordion.addEventListener('touchend', () => {
      if (!isMobile) return;
      const diff = endX - startX;
      if (Math.abs(diff) > 50) {
        if (diff > 0) {
          currentIndex = (currentIndex - 1 + items.length) % items.length;
        } else {
          currentIndex = (currentIndex + 1) % items.length;
        }
        showSlide(currentIndex);
      }
    });
    dotsContainer.style.display = 'flex';
  }
  // === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
  function disableSlider() {
    isMobile = false;
    dotsContainer.style.display = 'none';
    items.forEach(item => {
      item.classList.remove('active');
      item.style.display = 'flex';
    });
    if (items.length > 0) items[0].classList.add('active');
    items.forEach(item => {
      item.onclick = () => {
        if (!isMobile) {
          items.forEach(i => i.classList.remove('active'));
          item.classList.add('active');
-      item.querySelector('.img-open').style.display = 'block';
+        }
-      item.querySelector('.img-closed').style.display = 'none';
+      };
    });
    });
  }
  // === ПРОВЕРКА ШИРИНЫ ===
  function checkWidth() {
    if (window.innerWidth <= 600 && !isMobile) {
      enableSlider();
    } else if (window.innerWidth > 600 && isMobile) {
      disableSlider();
    } else if (window.innerWidth > 600 && !isMobile) {
      disableSlider();
    }
  }
  checkWidth();
  window.addEventListener('resize', checkWidth);
 });
  // -----------------------------------------ACCORDION-SECOND----------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {
  // карточки (открытие/закрытие)
  const cards = document.querySelectorAll('.advantage_slider_item');
  cards.forEach(card => {
    card.addEventListener('click', () => {
-      // если уже активна — просто закрываем
+      if (card.classList.contains('active')) card.classList.remove('active');
-      if (card.classList.contains('active')) {
+      else {
        card.classList.remove('active');
      } else {
        // иначе закрываем все остальные и открываем текущую
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');
      }
    });
  });
  // слайдер
  const sliderContainer = document.querySelector('.advantage_slider');
  const slider = document.querySelector('.advantage_slider_items');
  const slides = document.querySelectorAll('.advantage_slider_item');
  let currentIndex = 0;
  let dotsContainer = null;
  let dots = null;
  const isMobile = () => window.matchMedia('(max-width: 900px)').matches;
  function buildDots() {
    if (dotsContainer) dotsContainer.remove();
    dotsContainer = document.createElement('div');
    dotsContainer.className = 'slider_dots';
    slides.forEach((_, i) => {
      const dot = document.createElement('div');
      dot.className = 'slider_dot' + (i === currentIndex ? ' active' : '');
      dot.addEventListener('click', () => moveToSlide(i));
      dotsContainer.appendChild(dot);
    });
    sliderContainer.appendChild(dotsContainer);
    dots = dotsContainer.querySelectorAll('.slider_dot');
  }
  function updateDots() {
    if (!dots) return;
    dots.forEach((d, i) => d.classList.toggle('active', i === currentIndex));
  }
  function moveToSlide(index) {
    if (!isMobile()) return;
    if (index < 0) index = slides.length - 1;
    if (index >= slides.length) index = 0;
    currentIndex = index;
    // <<< ВАЖНО: едем к фактическому смещению карточки >>>
    const offset = slides[index].offsetLeft;
    slider.style.transform = `translateX(-${offset}px)`;
    updateDots();
  }
  function initSlider() {
    if (!slider || slides.length === 0) return;
    if (!isMobile()) {
      // десктоп: сброс
      slider.style.transform = '';
      if (dotsContainer) { dotsContainer.remove(); dotsContainer = null; dots = null; }
      return;
    }
    if (!dotsContainer) buildDots();
    // после ресайза дождаться перерасчёта верстки
    requestAnimationFrame(() => moveToSlide(currentIndex));
  }
  // свайпы
  let touchStartX = 0;
  sliderContainer.addEventListener('touchstart', e => {
    touchStartX = e.changedTouches[0].screenX;
  }, {passive:true});
  sliderContainer.addEventListener('touchend', e => {
    const diff = e.changedTouches[0].screenX - touchStartX;
    if (Math.abs(diff) >= 50) {
      moveToSlide(currentIndex + (diff < 0 ? 1 : -1));
    }
  });
  window.addEventListener('resize', initSlider);
  initSlider();
 });
 // ----------------------------------------------------------ВЫПАДАЮЩЕЕ-МЕНЮ--------------------------------------------------------
 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 = 'Больше услуг';
  }
 });
 // -------------------------------------BURGER-MENU-TOP-----------------------------------------------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {
  const burgerBtn = document.querySelector('.burger_menu_btn');
  const navWrapper = document.querySelector('.header_top_wrapper-open');
  const navMenu = navWrapper.querySelector('.header_nav_top');
  burgerBtn.addEventListener('click', () => {
    navMenu.classList.toggle('active');
    burgerBtn.classList.toggle('active');
    document.body.classList.toggle('lock'); // блокируем скролл при открытом меню
  });
  // при клике по ссылке меню закрываем бургер
  navWrapper.querySelectorAll('.header_top_link').forEach(link => {
    link.addEventListener('click', () => {
      navMenu.classList.remove('active');
      burgerBtn.classList.remove('active');
      document.body.classList.remove('lock');
    });
  });
 });
 // -----------------------------------------BURGER-MENU-----------------------------------------------------------------
 document.addEventListener("DOMContentLoaded", () => {
  const toggleBtn = document.querySelector(".top_list_btn");
  const menu = document.querySelector(".header_nav_burger");
  toggleBtn.addEventListener("click", () => {
    menu.classList.toggle("open");
  });
 });
 // ---------------------------------------------SLIDER----------------------------------------------------
 document.addEventListener('DOMContentLoaded', () => {
  const servicesContainer = document.querySelector('.our-services_row');
  const slider = document.querySelector('.our-services_row_items');
  const slides = document.querySelectorAll('.our-services_row_item');
  let currentIndex = 0;
  let dotsContainer, dots;
  let isActive = false;
  function initServicesSlider() {
    if (window.innerWidth > 900) {
      slider.style.transform = '';
      if (dotsContainer) {
        dotsContainer.remove();
        dotsContainer = null;
      }
      isActive = false;
      return;
    }
    if (isActive) return;
    isActive = true;
    // создаём контейнер для точек
    dotsContainer = document.createElement('div');
    dotsContainer.classList.add('our-services_dots');
    slides.forEach((_, i) => {
      const dot = document.createElement('div');
      dot.classList.add('our-services_dot');
      if (i === 0) dot.classList.add('active');
      dot.addEventListener('click', () => moveToSlide(i));
      dotsContainer.appendChild(dot);
    });
    servicesContainer.appendChild(dotsContainer);
    dots = dotsContainer.querySelectorAll('.our-services_dot');
    moveToSlide(0);
  }
  function moveToSlide(index) {
    if (window.innerWidth > 900) return;
    if (index < 0) index = slides.length - 1;
    if (index >= slides.length) index = 0;
    currentIndex = index;
    const offset = index * servicesContainer.offsetWidth;
    slider.style.transform = `translateX(-${offset}px)`;
    updateDots();
  }
  function updateDots() {
    if (!dots) return;
    dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
  }
  // === свайп ===
  let touchStartX = 0;
  let touchEndX = 0;
  slider.addEventListener('touchstart', e => {
    touchStartX = e.changedTouches[0].screenX;
  });
  slider.addEventListener('touchend', e => {
    touchEndX = e.changedTouches[0].screenX;
    handleSwipe();
  });
  function handleSwipe() {
    const diff = touchEndX - touchStartX;
    if (Math.abs(diff) < 50) return; // минимальная длина свайпа
    if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий
    else moveToSlide(currentIndex + 1);          // свайп влево → следующий
  }
  window.addEventListener('resize', initServicesSlider);
  initServicesSlider();
 });
--- a/style.css
+++ b/style.css
Author	SHA1	Message	Date
Alena	faac55d5cb	figma_02_path_fix	2025-11-01 20:56:03 +03:00
Alena	299963300e	figma_02_readme	2025-10-31 15:50:29 +03:00
Alena	05d5a40b7d	figma_adp_mob_final	2025-10-31 15:36:56 +03:00
Alena	2bfae5248b	figma_apd_mob_05	2025-10-30 21:40:53 +03:00
Alena	6cf7c5a251	figma_adp_mob_04	2025-10-30 20:45:47 +03:00
Alena	9cf6a1ab61	figma_adp_mob_03	2025-10-30 17:00:06 +03:00
Alena	418e0a8653	figma_adp_mob_02	2025-10-30 03:29:06 +03:00
Alena	018ee2089e	figma_adp_mobile_01	2025-10-29 20:22:43 +03:00
Alena	bb1b8f4173	figma_adp_tablet_final	2025-10-28 22:33:02 +03:00
Alena	cf8c7da979	figma_adp_04	2025-10-28 20:39:49 +03:00
Alena	ea9432e103	figma_adp_03	2025-10-28 03:02:33 +03:00
Alena	5d57a462d1	figma_adp_tabl_02	2025-10-26 21:55:22 +03:00
Alena	d773318b8d	figma_adaptive_tablet_01	2025-10-26 18:17:11 +03:00
Alena	bb913738a1	figma_final_desktop	2025-10-24 17:20:19 +03:00