add style for max-widht 576px add tabs

css/styles.css

@@ -58,7 +58,7 @@ button.main-btn {
 header {
   background-image: url("../img/banner.jpg");
   background-repeat: no-repeat;
-  /*background-size: 100% 100%;*/
+  background-size: 100% 100%;
   background-position: center;
   margin-bottom: 97px;
 }
@@ -69,7 +69,7 @@ header {
 }
 @media (max-width: 576px) {
   header {
-    width: 320px;
+    /* width: 320px;*/
     height: 560px;
     margin-bottom: 58px;
   }
@@ -77,7 +77,7 @@ header {
 .background-banner {
   background-image: url("../img/banner-background.png");
   background-repeat: no-repeat;
-  /*background-size: 100% 100%;*/
+  background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
   opacity: 0.65;
@@ -651,7 +651,7 @@ video {
   }
 }
 .text-h3-desktop {
-  font-family: SFUIDisplay-Light;
+  font-family: Avenir Next;
   margin-top: -12px;
   font-size: 16px;
   font-weight: 300;
@@ -661,7 +661,6 @@ video {
 }
 @media (max-width: 576px) {
   .text-h3-desktop {
-    font-family: SFUIDisplay-Light;
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0;
@@ -864,12 +863,14 @@ video {
   width: 674px;
   height: 445px;
   right: 640px;
+  top: 30px;
 }
 @media (max-width: 1250px) {
   .advertising-img-position {
     width: 524px;
     height: 342px;
     right: 500px;
+    top: 0;
   }
 }
 @media (max-width: 992px) {
@@ -877,6 +878,7 @@ video {
     width: 50%;
     height: 90%;
     right: 53%;
+    top: 0;
   }
 }
 @media (max-width: 768px) {
@@ -884,6 +886,7 @@ video {
     width: 45%;
     height: 50%;
     right: 55%;
+    top: 0;
   }
 }
 @media (max-width: 576px) {
@@ -910,7 +913,10 @@ video {
 }
 .advertising-text-order h2 {
   /*.h2-desktop;*/
-  font-family: SFUIDisplay-Regular;
+  font-family: SF-UI-Display-Black;
+  font-size: 36px;
+  color: #303a81;
+  letter-spacing: 0.36px;
   margin-bottom: 21px;
   margin-top: 8px;
   line-height: 36px;
@@ -924,7 +930,6 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-text-order h2 {
-    font-family: SFUIDisplay-Regular;
     font-size: 24px;
     width: 300px!important;
     font-weight: 700;
@@ -940,7 +945,10 @@ video {
 }
 .advertising-text h2 {
   /*.h2-desktop;*/
-  font-family: SFUIDisplay-Regular;
+  font-family: SF-UI-Display-Black;
+  font-size: 36px;
+  color: #303a81;
+  letter-spacing: 0.36px;
   font-weight: 700;
   margin-bottom: 21px;
   margin-top: 4px;
@@ -954,7 +962,6 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-text h2 {
-    font-family: SFUIDisplay-Regular;
     font-size: 24px;
     width: 300px!important;
     font-weight: 700;
@@ -1080,6 +1087,7 @@ video {
     margin-bottom: 15px;
     line-height: 24px;
     font-weight: 800;
+    margin-top: -22px;
   }
 }
 .option-card-img {
@@ -1233,6 +1241,14 @@ video {
 .option-btn {
   margin-top: 0;
   margin-bottom: 146px;
+  width: 290px;
+  height: 52px;
+  border-radius: 26px;
+  background: #c94d4e;
+  color: white;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0.18px;
 }
 @media (max-width: 992px) {
   .option-btn {
@@ -1379,7 +1395,7 @@ video {
   }
 }
 .protection-text {
-  font-family: SFUIDisplay-Regular;
+  font-family: SF-UI-Display-Black;
   height: 90px;
 }
 @media (max-width: 768px) {
@@ -2219,8 +2235,7 @@ video {
 }
 @media (max-width: 576px) {
   .form-wrapper p {
-    margin-left: 21px;
-    margin-right: 21px;
+    margin: 0 auto;
     width: 281px;
     font-family: SFUIDisplay-Regular;
     font-size: 14px;
@@ -2246,6 +2261,12 @@ input {
     padding-left: 16px;
   }
 }
+@media (max-width: 576px) {
+  form {
+    max-width: 350px;
+    margin: 0 auto;
+  }
+}
 @media (max-width: 768px) {
   .form-wrapper input {
     width: 500px;

css/styles.less

@@ -56,14 +56,14 @@ button.main-btn /*.header-btn */{
 header {
   background-image: url("../img/banner.jpg");
   background-repeat: no-repeat;
-  /*background-size: 100% 100%;*/
+  background-size: 100% 100%;
   background-position: center;
   margin-bottom: 97px;
   @media (max-width: 992px) {
     margin-bottom: 57px;
   }
   @media (max-width: 576px) {
-    width: 320px;
+   /* width: 320px;*/
     height: 560px;
     margin-bottom: 58px;
   }
@@ -71,7 +71,7 @@ header {
 .background-banner {
   background-image: url("../img/banner-background.png");
   background-repeat: no-repeat;
-  /*background-size: 100% 100%;*/
+  background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
   opacity: 0.65;
@@ -93,7 +93,6 @@ header {
     height: 200px;
   }
 }
-
 .header-wrapp {
   display: flex;
   justify-content: space-between;
@@ -246,7 +245,6 @@ header {
     margin-left: 0!important;
   }
 }
-
 h1 {
   position: relative;
   z-index: 3;
@@ -452,7 +450,6 @@ video {
   @media (max-width: 576px) {
     padding-left: 10px;
     padding-right: 10px;
-
   }
 }
 .h2-desktop {
@@ -548,7 +545,7 @@ video {
   }
 }
 .text-h3-desktop {
-  font-family: SFUIDisplay-Light;
+  font-family: Avenir Next;
   margin-top: -12px;
   font-size: 16px;
   font-weight: 300;
@@ -556,7 +553,6 @@ video {
   color: #303a81;
   letter-spacing: 0.16px;
   @media (max-width: 576px) {
-    font-family: SFUIDisplay-Light;
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0;
@@ -709,7 +705,6 @@ video {
     flex-flow: wrap;
     height: auto;
     margin-bottom: 1px;
-
   }
 }
 .two-img {
@@ -724,20 +719,24 @@ video {
   width: 674px;
   height: 445px;
   right: 640px;
+  top: 30px;
   @media (max-width: 1250px) {
     width: 524px;
     height: 342px;
     right: 500px;
+    top: 0;
   }
   @media (max-width: 992px) {
     width: 50%;
     height: 90%;
     right: 53%;
+    top: 0;
   }
   @media (max-width: 768px) {
     width: 45%;
     height: 50%;
     right: 55%;
+    top: 0;
   }
   @media (max-width: 576px) {
     width: 290px;
@@ -759,7 +758,10 @@ video {
   width: 110%;
   h2 {
     /*.h2-desktop;*/
-    font-family: SFUIDisplay-Regular;
+    font-family: SF-UI-Display-Black;
+    font-size: 36px;
+    color: #303a81;
+    letter-spacing: 0.36px;
     margin-bottom: 21px;
     margin-top: 8px;
     line-height: 36px;
@@ -769,7 +771,6 @@ video {
       margin-bottom: 15px;
     }
     @media (max-width: 576px) {
-      font-family: SFUIDisplay-Regular;
       font-size: 24px;
       width: 300px!important;
       font-weight: 700;
@@ -779,16 +780,16 @@ video {
       margin-bottom: 15px;
       height: auto;
     }
-
   }
-
 }
-
 .advertising-text {
   width: 110%;
   h2 {
     /*.h2-desktop;*/
-    font-family: SFUIDisplay-Regular;
+    font-family: SF-UI-Display-Black;
+    font-size: 36px;
+    color: #303a81;
+    letter-spacing: 0.36px;
     font-weight: 700;
     margin-bottom: 21px;
     margin-top: 4px;
@@ -798,7 +799,6 @@ video {
       margin-bottom: 15px;
     }
     @media (max-width: 576px) {
-      font-family: SFUIDisplay-Regular;
       font-size: 24px;
       width: 300px!important;
       font-weight: 700;
@@ -808,7 +808,6 @@ video {
       margin-bottom: 15px;
       height: auto;
     }
-
   }
 }
 .advertising-text .main-line {
@@ -816,7 +815,6 @@ video {
   @media (max-width: 768px) {
     margin-bottom: 15px;
   }
-
 }
 .advertising-text-order .main-line {
   margin-bottom: 24px;
@@ -828,9 +826,7 @@ video {
     position: relative;
     z-index: 3;
   }
-
   @media (min-height: 577px) {
-
     width: 120%;
     padding-top: 0;
     margin-top: 0;
@@ -874,7 +870,6 @@ video {
       margin-left: -25px;
     }
   }
-
 }
 /*option*/
 .option-container {
@@ -901,7 +896,7 @@ video {
       margin-bottom: 15px;
       line-height: 24px;
       font-weight: 800;
-
+      margin-top: -22px;
     }
   }
 }
@@ -1033,6 +1028,14 @@ video {
 .option-btn {
   margin-top: 0;
   margin-bottom: 146px;
+  width: 290px;
+  height: 52px;
+  border-radius: 26px;
+  background: #c94d4e;
+  color: white;
+  font-size: 18px;
+  line-height: 30px;
+  letter-spacing: 0.18px;
   @media (max-width: 992px) {
     margin-bottom: 71px;
   }
@@ -1149,7 +1152,7 @@ video {
   }
 }
 .protection-text {
-  font-family: SFUIDisplay-Regular;
+  font-family: SF-UI-Display-Black;
   height: 90px;
   @media (max-width: 768px) {
     height: 150px;
@@ -1268,7 +1271,6 @@ video {
       width: 70px;
     }
   }
-
 }
 .catalig-img {
   margin-top: -20px;
@@ -1432,7 +1434,6 @@ video {
       width: 88px;
     }
   }
-
 }
 .technology-card-end {
   padding-right: 0;
@@ -1471,7 +1472,6 @@ video {
     position: relative;
     display: none;
   }
-
 }
 .price-container, .price-container-active {
   position: relative;
@@ -1819,8 +1819,7 @@ video {
     margin-bottom: 27px;
 
     @media (max-width: 576px) {
-      margin-left: 21px;
-      margin-right: 21px;
+      margin: 0 auto;
       width: 281px;
       font-family: SFUIDisplay-Regular;
       font-size: 14px;
@@ -1845,7 +1844,13 @@ input {
     padding-left: 16px;
   }
 }
+form {
+  @media (max-width:  576px) {
+    max-width: 350px;
+    margin: 0 auto;
 
+  }
+}
 .form-wrapper input {
   @media (max-width:  768px) {
     width: 500px;
@@ -1954,7 +1959,6 @@ footer {
       letter-spacing: 0.14px;
     }
   }
-
 }
 .footer-wrapper-info {
   display: flex;
@@ -2015,7 +2019,6 @@ footer {
     order: 0;
     width: 320px;
     text-align: left;
-
   }
   a {
     font-family: SFUIDisplay-Regular;
@@ -2062,7 +2065,6 @@ footer {
   }
   @media (max-width:  576px) {
     width: 5px;
-
   }
 }
 

index.html

@@ -87,7 +87,6 @@
                         <a href="video/duel.mp4">Скачайте видео</a>.
                     </video>
                 </div>
-
             </div>
         </div>
     </div>
@@ -368,7 +367,6 @@
                 планирует встречи, организует процессы,
                 ставит задачи, предупреждает/информирует
                 команду, контролирует исполнение.
-
             </p>
         </div>
     </div>
@@ -389,7 +387,6 @@
             <img src="img/advertising7.png">
         </div>
     </div>
-
     <div class="advertising two-img main-container">
         <img class="advertising-img-position" src="img/advertising2.png">
         <div class="advertising-img-order">
@@ -407,8 +404,6 @@
                 для отдельных сфер бизнеса. RestAPI позволит
                 без проблем интегрировать ваши локальные
                 и прикладные разработки в общую систему.
-
-
             </p>
         </div>
     </div>
@@ -788,7 +783,6 @@
             </ol>
             <button type="button" class="price-btn">Попробовать бесплатно</button>
         </div>
-
         <div class="price-container-active">
             <img src="img/price1.png">
             <h6>Standard</h6>
@@ -944,6 +938,12 @@
                     </div>
                 </li>
                 <li class="price-display-none">
+                    <p>
+                        Оперативная поддержка <span>+</span>
+                    </p>
+                    <div class="price-line-big">
+                    </div>
+                </li>
                 <li>
                     <p>
                         Модуль dashboard <span>+</span>
@@ -986,11 +986,6 @@
                     <div class="price-line-big">
                     </div>
                 </li>
-                <li class="price-display-none">
-                    <p>
-                        Собственный домен<span>-</span>
-                    </p>
-                </li>
             </ol>
             <button type="button" class="price-btn">Попробовать бесплатно</button>
         </div>