improvements have been made

css/adaptation.css

@@ -50,26 +50,6 @@
 
 /* шапка */
 
-header {
-    z-index: 1;
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 60px;
-    width: 100%;
-    padding-top: 10px;
-    background: #fff;
-    box-shadow: 0px 4px 25px rgba(205, 205, 205, 0.25);   
-}
-
- .header__container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-left: 40px;
-    margin-right: 40px;
-
-}
 
 header ul {
     /* margin-right: 50px; */
@@ -89,8 +69,11 @@ header a {
     color: #000;
 }
 
-header ul .link_active {
+header ul li:first-child {
     margin-left: 0;
+}
+
+header ul .link_active {
     padding-top: 2px;
     display: flex;
     flex-direction: column;
@@ -104,7 +87,7 @@ header ul .link_active img {
 
 header ul .link_active a{
     font-weight: 600;
-    color: #4c555e;
+    color: #11344C;
 }
 
 
@@ -367,7 +350,7 @@ select option{
 .pages .next {
     width: 103px;
     height: 35px;
-    background: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    background: #4c555e;
     border: none;
     cursor: pointer;
     border-radius: 6px;
@@ -382,9 +365,6 @@ select option{
 
 
 
-
-
-
 /* подвал */
 
 footer {
@@ -392,7 +372,7 @@ footer {
     width: 100%;
     margin-top: 55px;
     padding-top: 15px;
-    background: #4c555e;
+    background: #1b1e20;
 }
 
 footer .container {
@@ -548,6 +528,10 @@ div.scrollmenu a {
     text-align: center;
     padding: 14px;
     text-decoration: none;
+}
+.header {
+    padding-left: 40px;
+    padding-right: 40px;
 }
  /* адаптация */
 
@@ -556,6 +540,10 @@ div.scrollmenu a {
     .container {
         width: 1146px;
     }
+    
+    .header__container {
+        width: 1146px;
+    }
 }
 
 
@@ -563,6 +551,7 @@ div.scrollmenu a {
     .header__container {
         position: relative;
         top: 6px;
+        max-width: 98%;
     }
     .user_image {
         display: none;
@@ -636,7 +625,7 @@ div.scrollmenu a {
         height: 3px;
         width: 100%;
         position: absolute;
-        background: #4c555e;
+        background: #11344C;
         margin: 0 auto;
         border-radius: 10px;
     }
@@ -684,9 +673,14 @@ div.scrollmenu a {
     .container {
         /* margin-left: 40px; */
         margin-right: auto;
-        max-width: 90%;
+        max-width: 87%;
 
     }
+    .header__container {
+        margin-right: auto;
+        margin-left: auto;
+        max-width: 96%;
+    }
     .filters-container {
         width: 535px;
     }

css/style.css

@@ -66,8 +66,9 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-left: 40px;
-    margin-right: 40px;
+    width: 1440px;
+    margin-left: auto;
+    margin-right: auto;
 
 }
 
@@ -89,22 +90,22 @@ header a {
     color: #000;
 }
 
-header ul .link_active {
+header ul li:first-child {
     margin-left: 0;
-    padding-top: 2px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
 }
 
-header ul .link_active img {
-    position: relative;
-    top: 14px;
+header ul .link_active {
+    
+    padding-top: 2px;
+    text-decoration: underline;
+    text-underline-offset: 13px; 
+    text-decoration-thickness: 4px;
 }
 
+
 header ul .link_active a{
     font-weight: 600;
-    color: #4c555e;
+    color: #11344C;
 }
 
 
@@ -376,7 +377,7 @@ select option{
 .pages .next {
     width: 103px;
     height: 35px;
-    background: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
+    background: #4c555e;
     border: none;
     cursor: pointer;
     border-radius: 6px;
@@ -397,18 +398,16 @@ select option{
 /* подвал */
 
 footer {
-    height: fit-content;
+    height: 60px;
     width: 100%;
     margin-top: 55px;
     padding-top: 15px;
-    padding-bottom: 15px;
-    background: #4c555e;
+    background: #1b1e20;
 }
 
 footer .container {
     display: flex;
     align-items: center;
-
 }
 
 footer ul {
@@ -496,6 +495,7 @@ footer a {
     scrollbar-color: dark;
     scrollbar-width: thin;
     overscroll-behavior: contain;
+    z-index: 2;
 }
 
 .select__list::-webkit-scrollbar {
@@ -576,7 +576,7 @@ main  {
     font-weight: 700;
     font-size: 14px;
     line-height: 19px;
-    color: #4c555e;
+    color: #11344C;
     margin-bottom: 40px;
 }
 .main ul{
@@ -594,9 +594,7 @@ main  {
     color: #0066FF;
     cursor: pointer;
 }
-.main li:last-child {
-    border-bottom: 1px solid #E5E5E5;
-}
+
 .main .circle {
     width: 8px;
     height: 8px;
@@ -627,14 +625,13 @@ main  {
 
 
 .mainTwo {
-    margin-left: 200px;
     width: 472px;
     
 } 
 
 .mainTwo h1 {
     font-style: normal;
-    font-weight: 700;
+    font-weight: bold;
     font-size: 16px;
     line-height: 19px;
     color: #000000;
@@ -646,7 +643,7 @@ main  {
     padding-bottom: 15px;
     display: flex;
     justify-content: space-between;
-    font-weight: 600;
+    font-weight: 400;
     font-size: 14px;
     cursor: pointer;
     border-bottom: 1px solid #E5E5E5;
@@ -661,7 +658,7 @@ main  {
 }
 
 .mainTwoThree .font {
-    font-weight: bold;
+    font-weight: 600;
     text-align: right;
 }
 .mainTwoThree .poz {
@@ -677,13 +674,13 @@ main  {
 .mainThree h1 {
 
     font-style: normal;
-    font-weight: 700;
+    font-weight: bold;
     font-size: 16px;
     line-height: 19px;
 }
 
-.btn {
-    background: #4c555e;
+.btn, .contact-btn {
+    background: #1b1e20;
     color: #FFFFFF;
     border: none;
     border-radius: 6px;
@@ -693,12 +690,16 @@ main  {
     margin-left: auto;
     display: block;
     margin-top: 40px;
+    cursor: pointer;
+
 }
 .mainTwoThree {
     display: flex;
     flex-direction: row;
     gap: 287px;
     margin-top: 40px;
+    justify-content: center;
+    flex-wrap: wrap;
 
 }
 .email {
@@ -708,32 +709,49 @@ main  {
     color: #0066FF;
     
 }
+.link-item--active{
+    color: #E5E5E5;
+}
 .files-item a {
     color: #0066FF;
     text-decoration: none;
 }
 .accordion-item {
     font-size: 14px;
-    padding: 0 7px;
+    padding: 0 15px;
     border-top: 1px solid #E5E5E5;
-    border-bottom: 1px solid #E5E5E5;
     border-left: 1px solid #FFFFFF;
     border-right: 1px solid #FFFFFF;
 }
 .accordion-item__trigger {
     display: flex;
     justify-content: space-between;
-    margin-top: 15px;
-    margin-bottom: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
     cursor: pointer;
 }
-
+.accordion-item--active .accordion-item__trigger {
+   
+}
 .accordion-item--active .accordion-item__content {
     display: block;
 }
 .accordion-item--active {
     border: 1px solid black;
     border-radius: 4px;
+    z-index: 2;
+}
+.main>div.accordion-item:last-child {
+    border-bottom: 1px solid #E5E5E5;
+    z-index: -100;
+}
+.gray {
+    border-bottom: 1px solid #E5E5E5;
+
+}
+.black {
+    border-bottom: 1px solid black;
+
 }
 .accordion-item__content {
     display: none;
@@ -757,3 +775,119 @@ main  {
 .nonedisplay {
     display: none;
 }
+.form-input {
+    width: 247px;
+    height: 36px;
+    margin-top: 6px;
+    padding-left: 10px;
+    border: 1px solid #C4C4C4;
+    border-radius: 3px;
+    font-weight: 400;
+    font-size: 14px;
+    z-index: -1;
+
+}
+.form-container {
+    display: flex;
+    justify-content: start;
+    flex-wrap: wrap;
+    margin-top: 40px;
+}
+.wrapper-container {
+    margin-bottom: 40px;
+}
+.wrapper {
+    display: grid;
+    grid-template-columns: 190px 454px;
+    font-size: 14px;
+    
+}
+.wrapper-active {
+    display: none;
+    grid-template-columns: 190px 454px;
+    font-size: 14px;
+}
+.contact-form {
+    display: grid;
+    grid-template-columns: 70px 281px;
+    font-size: 14px; 
+    grid-template-rows: 49px 49px 49px 150px 49px 49px 49px 150px;
+   
+}
+.contact-form-active { 
+    display: none;
+    grid-template-columns: 70px 281px;
+    font-size: 14px; 
+    grid-template-rows: 49px 49px 49px 150px 49px 49px 49px 150px;
+}
+.contact-form-container {
+    margin-left: 270px;
+}
+.form-input {
+    width: 100%;
+    height: 36px;
+    padding-left: 10px;
+    margin: 0;
+    border: 1px solid #C4C4C4;
+    border-radius: 3px;
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 13px;
+}
+div.lable {
+    margin-right: 10px;
+    margin-bottom: 13px;
+    text-align: end;
+}
+.lable p {
+    font-weight: 600;
+    padding-top: 7px;
+}
+.wrapper div .select, .wrapper-active div .select {
+    margin: 0;
+    margin-bottom: 13px;
+    font-weight: 600;
+}
+.form-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 19px;
+    margin-bottom: 30px;
+}
+
+.form-btn, .contact-form-btn {
+    background: #27AE60;
+    color: #FFFFFF;
+    border: none;
+    border-radius: 6px;
+    padding: 8px 28px;
+    font-weight: 700;
+    font-size: 14px;
+    margin-left: auto;
+    display: block;
+    margin-top: 40px;
+    cursor: pointer;
+}
+
+.list li{
+    display: flex;
+    justify-content: space-between;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 400;
+    font-size: 14px;
+    cursor: pointer;
+    border-bottom: 1px solid #E5E5E5;
+    color: #000000;
+}
+.poz {
+    text-align: right;
+}
+.font {
+    font-weight: 600;
+    text-align: right;
+}
+.nonedisplay

documents_page.html

@@ -16,32 +16,34 @@
 
     <header class="header">
       <div class="header__container" >
+
         <div class="logo">
           <a href="list_of_orders.html" id="header-logo" ><img class="open-logo" src="img/sharix_open_logo.png" alt="sharix-open"></a>
         </div>
+
         <nav class="header__nav">
           <div class="user">
             <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
-            <p>Антон Должанский</p>
+            <p>Имя Фамилия</p>
            </div>
           <ul class="menu header__menu">
-            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <li><a href="list_of_orders.html">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Машины</a></li>
+            <li class="link_active"><a href="documents_page.html" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Карта</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <li><a href="" class="menu__item">Элемент</a></li> 
             <div class="line_hidden"></div> 
-            <li><a href="" class="menu__item">Финансы</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <li><a href="" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>  
-            <li><a href="" class="menu__item">Помощь</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
         </ul>
         
         </nav>
@@ -63,7 +65,7 @@
         <h1>Документы</h1>
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Свидетельство о регистрации в качестве ИП</p>
+            <p class="link-item">Документ</p>
             <p class="green"><span class="circle"></span>Утвержден</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -77,7 +79,7 @@
         <!-- <div  class = "line" style="width: 100%; height: 1px; background-color: black;"></div> -->
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Договор на предрейсовый медицинский осмотр водителя</p>
+            <p class="link-item">Документ</p>
             <p class="green"><span class="circle"></span>Утвержден</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -90,7 +92,7 @@
         </div>
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Документ, подтверждающий систему налогообложения</p>
+            <p class="link-item">Документ</p>
             <p class="green"><span class="circle"></span>Утвержден</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -103,7 +105,7 @@
         </div>
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Уведомление о деятельности по перевозкам пассажиров</p>
+            <p class="link-item">Документ</p>
             <p class="green"><span class="circle"></span>Утвержден</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -116,7 +118,7 @@
         </div>
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Доверенность на заключение ОСГОП</p>
+            <p class="link-item">Документ</p>
             <p class="green"><span class="circle"></span>Утвержден</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -129,7 +131,7 @@
         </div>
         <div class="accordion-item">
           <div class="accordion-item__trigger">
-            <p class="link-item">Соглашение по агентскому договору</p>
+            <p class="link-item">Документ</p>
             <p class="yellow"><span class="circle"></span>Ожидает подтверждения</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -140,9 +142,9 @@
             <button class="btn btn-centered">Заменить</button>
           </div>
         </div>
-        <div class="accordion-item">
+        <div class="accordion-item accordion-item-seesh">
           <div class="accordion-item__trigger">
-            <p class="link-item">Соглашение по пользовательскому договору</p>
+            <p class="link-item">Документ</p>
             <p class="red"><span class="circle"></span >Документов нет</p>
           </div>
           <div class="accordion-item__content">С любой компанией, осуществляющей деятельность по предрейсовым и послерейсовым медицинским осмотрам, необходимо заключить договор. Загрузите договор и лицензию медицинского учреждения на осуществление деятельности по предрейсовым медосмотрам одним файлом PDF.
@@ -153,73 +155,173 @@
             <button class="btn btn-centered">Заменить</button>
           </div>
         </div> 
-     
-     <div class="mainTwoThree">
-     <div class="mainTwo">
-       <h1>Информация о компании</h1>
-       <ul>
-         <li>
-           <p class="font">Тип компании</p>
-           <p>ИП</p>
-         </li>
-         <li>
-           <p class="font">Юр. адрес</p>
-           <p class="poz">54138 г. Челябинск,<br> пр-кт Комсомольский, дом 36, кв. 160</p>
-         </li>
-         <li>
-           <p class="font">Является ли компания плательщиком НДС?</p>
-           <p>Нет</p>
-         </li>
-         <li>
-           <p class="font">ИНН</p>
-           <p>744811430253</p>
-         </li>
-         <li>
-           <p class="font">ОГРН/ОГРНИП</p>
-           <p>317745600090980</p>
-         </li>
-         <li>
-           <p class="font">Расчетный счет</p>
-           <p>40802810938000000117</p>
-         </li>
-         <li>
-           <p class="font">Корреспондентский счет</p>
-           <p>30101810145250000411</p>
-         </li>
-         <li>
-           <p class="font">БИК</p>
-           <p>044525411</p>
-         </li>
-         <li>
-           <p class="font">Банк</p>
-           <p>Филиал "ЦЕНТРАЛЬНЫЙ" Банка ВТБ ПАО Г. МОСКВА</p>
-         </li>
-       </ul>
-
-       <button class="btn">Редактировать</button>
      </div>
 
+<div  class = "form-container" >
+  <div class="wrapper-container">
+    <div class="wrapper">
+    
+    <div class="lable"></div>   
+    <div class="form-title"><p>Информация о компании</p></div>   
+    <div class="lable"></div>   
+    <div>
+     <div>
+      <ul class="list">
+        <li>
+          <p class="font">Тип компании</p>
+          <p>Тип</p>
+        </li>
+        <li>
+          <p class="font">Юр. адрес</p>
+          <p class="poz">Индекс, город, улица, дом, кв.</p>
+        </li>
+        <li>
+          <p class="font">Является ли компания плательщиком НДС?</p>
+          <p>Да/нет</p>
+        </li>
+        <li>
+          <p class="font">ИНН</p>
+          <p>123456789012</p>
+        </li>
+        <li>
+          <p class="font">ОГРН/ОГРНИП</p>
+          <p>123456789012345</p>
+        </li>
+        <li>
+          <p class="font">Расчетный счет</p>
+          <p>12345678901234567890</p>
+        </li>
+        <li>
+          <p class="font">Корреспондентский счет</p>
+          <p>12345678901234567890</p>
+        </li>
+        <li>
+          <p class="font">БИК</p>
+          <p>123456789</p>
+        </li>
+        <li>
+          <p class="font">Банк</p>
+          <p>Название банка</p>
+        </li>
+      </ul>
+     </div>
+    </div>
     
-     <div class="mainThree">
-     <h1>Контактная информация</h1>
-     <ul>
-       <li>
-         <p class="font" >e-mail</p>
-         <p class="email">alexandra@panyukova.info</p>
-       </li>
-       <li>
-         <p class="font">Телефон</p>
-         <p>+7 (916) 657 69 59</p>
-       </li>
-     </ul>
-     <button class="btn">Редактировать</button>
-   </div>
+    <div></div>
+    <button class="btn">Редактировать</button>
+
+  </div>
+
+  <div class=" wrapper-active nonedisplay">
+    <div class="lable"></div>   
+    <div class="form-title"><p>Информация о компании</p></div>   
+    <div class="lable"></div>   
+    <div>
+      <div class="select">
+        <input class="select__input" type="hidden" name="">
+        <div class="select__head">ИП</div>
+        <ul class="select__list" style="display: none;">
+            <li class="select__item">1</li>
+            <div></div>
+            <li class="select__item">2</li>
+            <div></div>
+            <li class="select__item">3</li>
+        </ul>
+      </div>
+    </div>
+    <div class="lable">
+      <p>Юр. адрес</p>
+    </div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="Индекс, город, улица, дом, кв.">
+    </div><div class="lable"><p></p></div>   
+    <div>
+      <div class="select">
+        <input class="select__input" type="hidden" name="">
+        <div class="select__head">Нет</div>
+        <ul class="select__list" style="display: none;">
+            <li class="select__item">1</li>
+            <div></div>
+            <li class="select__item">2</li>
+            <div></div>
+            <li class="select__item">3</li>
+        </ul>
+      </div>
+    </div>
+    <div class="lable"><p>ИНН</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="123456789012">
+    </div>
+    <div class="lable"><p>ОГРН/ОГРНИП</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="123456789012345">
+    </div><div class="lable"><p>Расчетный счет</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="12345678901234567890">
+    </div><div class="lable"><p>Корреспондентский счет</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="12345678901234567890">
+    </div>
+    <div class="lable"><p>БИК</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="123456789">
+    </div><div class="lable"><p>Банк</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder='Название банка'>
+    </div>
+    <div></div>
+    <button class="form-btn">Сохранить</button>
+</div>
+</div>
+
+ <div class="contact-form-container">
+  
+  <div class="contact-form">
+    <div class="lable"></div>   
+    <div class="form-title"><p>Контактная информация</p></div>   
+    <div></div> 
+    <div>
+      <ul class="list">
+      <li>
+        <p class="font" >e-mail</p>
+        <p class="email">example@mail.ru</p>
+      </li>
+      <li>
+        <p class="font">Телефон</p>
+        <p>+7 (999) 999 99 99</p>
+      </li>
+    </ul>
+    </div>  
+    <div></div>
+    <div></div>
+    <div></div>
+    <button class="contact-btn" style="width:min-content; height:min-content;">Редактировать</button>
+  </div>
+
+  <div class="contact-form-active">
+    <div class="lable"></div>   
+    <div class="form-title"><p>Контактная информация</p></div>   
+    
+    <div class="lable"><p>e-mail</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="example@mail.ru">
+    </div><div class="lable"><p>Телефон</p></div>   
+    <div>
+      <input class ="form-input" id="number" name="number" type="text" placeholder="+7 (999) 999 99 99">
+    </div>
+    <div></div>
+    <div><button class="contact-form-btn">Сохранить</button></div>
+  </div>
  </div>
+ 
+
+</div>
+
   </main>
   
   <footer>
     <div class="container">
-      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo.png" alt="sharix-open"></a>
+      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo-dark.png" alt="sharix-open"></a>
       <ul>
           <li><a href="">Контакты</a></li>
           <li><a href="">Условия использования</a></li>
@@ -230,7 +332,9 @@
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script defer src="js/document.min.js"></script>
+  <script defer src="js/form.min.js"></script>
   <script src="js/menu.js"></script> 
+  <script defer src="js/select.min.js"></script>
   
 
   </body>

img/link-active.svg

@@ -1,3 +0,0 @@
-<svg width="107" height="4" viewBox="0 0 107 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 4C0 1.79086 1.79086 0 4 0H103C105.209 0 107 1.79086 107 4H0Z" fill="#11344C"/>
-</svg>

js/document.min.js

@@ -1,18 +1,22 @@
 $(document).ready(function() {
     $('.accordion-item__trigger').click(function(){
+        $(this).parent('.accordion-item').toggleClass('accordion-item--active');
+        });
+
+    $('.main>div.accordion-item:last-child').click(function(){
         const parent = $(this).parent();
-        // var line = $('div.line');
+        
+        if ($('.main>div.accordion-item:last-child').hasClass('accordion-item--active')){
+            $('.main>div.accordion-item:last-child').css('border-bottom', '1px solid black');
 
-        if (parent.hasClass('accordion-item--active')){
-            parent.removeClass('accordion-item--active');
         } else {
-            $('.accordion-item').removeClass('accordion-item--active')
-            parent.addClass('accordion-item--active');
-            // line.addClass('nonedisplay');
 
+            $('.main>div.accordion-item:last-child').css('border-bottom', '1px solid #E5E5E5');
+           
         }
-        
+    }); 
+
+
 
-    });
    
 });

js/form.min.js

@@ -0,0 +1,21 @@
+$(document).ready(function() {
+    $('.btn').click(function(){
+        $(".wrapper-active").css('display', 'grid');
+        $('.wrapper').css('display', 'none');
+      }); 
+
+      $('.form-btn').click(function(){
+        $(".wrapper-active").css('display', 'none');
+        $('.wrapper').css('display', 'grid');
+      }); 
+
+      $('.contact-btn').click(function(){
+        $(".contact-form-active").css('display', 'grid');
+        $('.contact-form').css('display', 'none');
+      }); 
+
+       $('.contact-form-btn').click(function(){
+        $(".contact-form-active").css('display', 'none');
+        $('.contact-form').css('display', 'grid');
+      });  
+});

list_of_orders.html

@@ -23,26 +23,26 @@
         <nav class="header__nav">
           <div class="user">
             <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
-            <p>Антон Должанский</p>
+            <p>Имя Фамилия</p>
            </div>
           <ul class="menu header__menu">
-            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <li class="link_active"><a href="list_of_orders.html">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Машины</a></li>
+            <li><a href="documents_page.html" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Карта</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <li><a href="" class="menu__item">Элемент</a></li> 
             <div class="line_hidden"></div> 
-            <li><a href="" class="menu__item">Финансы</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <li><a href="" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>  
-            <li><a href="" class="menu__item">Помощь</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
         </ul>
         
         </nav>
@@ -128,10 +128,10 @@
               <li class="order_date"><span class="from">02.04.2021, 06:10</span><p>–</p><span class="to">02.04.2021, 12:23</span></li>
               <li class="order_duration">6 часов 13 минут</li>
               <li class="order_tariff"><div class="gray_circle"></div>Суточный</li>
-              <li class="order_cust">ИП Панюкова А. А.</li>
-              <li class="order_exec">ООО "ШЭРИКС"</li>
-              <li class="order_car">X537OK 178</li>
-              <li class="order_total">5000,34 &#8381;</li>
+              <li class="order_cust">Заказчик</li>
+              <li class="order_exec">Исполнитель</li>
+              <li class="order_car">Автомобиль</li>
+              <li class="order_total" style="font-family: 'Open Sans', sans-serif;">5000,34 &#8381;</li>
             </ul>
             <ul class="footing">
               <li class="text-bold">Особые пожелания: <span class="wishes">–</span></li>
@@ -163,7 +163,7 @@
   
   <footer>
     <div class="container">
-      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo.png" alt="sharix-open"></a>
+      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo-dark.png" alt="sharix-open"></a>
       <ul>
           <li><a href="">Контакты</a></li>
           <li><a href="">Условия использования</a></li>

list_of_orders_2.html

@@ -21,26 +21,26 @@
         <nav class="header__nav">
           <div class="user">
             <a href="" id="user-photo"><img src="img/user-photo.png" alt="user"></a>
-            <p>Антон Должанский</p>
+            <p>Имя Фамилия</p>
            </div>
           <ul class="menu header__menu">
-            <li class="link_active"><a href="list_of_orders.html">Список заказов</a><img src="img/link-active.svg"></li>
+            <li class="link_active"><a href="list_of_orders.html">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Машины</a></li>
+            <li><a href="documents_page.html" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Карта</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Исполнители</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Активные заявки</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Оборудование</a></li> 
+            <li><a href="" class="menu__item">Элемент</a></li> 
             <div class="line_hidden"></div> 
-            <li><a href="" class="menu__item">Финансы</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
             <div class="line_hidden"></div>
-            <li><a href="" class="menu__item">Схема услуг</a></li>
+            <li><a href="" class="menu__item">Элемент</a></li>
             <div class="line_hidden"></div>  
-            <li><a href="" class="menu__item">Помощь</a></li>  
+            <li><a href="" class="menu__item">Элемент</a></li>  
         </ul>
         
         </nav>
@@ -140,7 +140,7 @@
   
   <footer>
     <div class="container">
-      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo.png" alt="sharix-open"></a>
+      <a href="list_of_orders.html"><img class="open-logo" src="img/sharix_open_logo-dark.png" alt="sharix-open"></a>
       <ul>
           <li><a href="">Контакты</a></li>
           <li><a href="">Условия использования</a></li>