Вороз измнений

css/styles.css

@@ -383,12 +383,12 @@ h1 {
   }
   @media (max-width: 768px) {
     h1 {
-      font-size: 36px;
+ё      font-size: 30px;
     }
   }
   @media (max-width: 576px) {
     h1 {
-      font-size: 36px;
+      font-size: 30px;
     }
   }
 }
@@ -1000,7 +1000,6 @@ video {
   .advertising-img-position {
     width: 50%;
     height: 120%;
-    /*right: 53%;*/
     top: 0;
   }
 }
@@ -1009,7 +1008,6 @@ video {
     width: 50%;
     height: 90%;
     left: 0;
-    /*right: 53%;*/
     top: 0;
   }
 }
@@ -1098,7 +1096,6 @@ video {
   }
 }
 .advertising-text-order h2 {
-  /*.h2-desktop;*/
   font-family: SF-UI-Text-Heavy;
   font-size: 36px;
   color: #303a81;
@@ -1117,7 +1114,7 @@ video {
 @media (max-width: 576px) {
   .advertising-text-order h2 {
     font-size: 22px;
-    width: 320px!important;
+    width: 300px!important;
     font-weight: 700;
     letter-spacing: 0;
     color: #303a81;
@@ -1138,7 +1135,6 @@ video {
   }
 }
 .advertising-text h2 {
-  /*.h2-desktop;*/
   font-family: SF-UI-Text-Heavy;
   font-size: 36px;
   color: #303a81;
@@ -1157,7 +1153,7 @@ video {
 @media (max-width: 576px) {
   .advertising-text h2 {
     font-size: 22px;
-    width: 320px!important;
+    width: 300px!important;
     font-weight: bolder;
     letter-spacing: 0;
     color: #303a81;
@@ -1208,10 +1204,8 @@ video {
     order: 5;
   }
   .advertising-img-order img {
-    /*width: 320px;*/
     min-width: 320px;
     min-height: 183px;
-    margin-left: -25px;
     margin-bottom: 4px;
   }
 }
@@ -1237,10 +1231,8 @@ video {
     margin-top: 0;
   }
   .advertising-img img {
-    /*width: 320px;*/
     min-width: 320px;
     min-height: 183px;
-    margin-left: -25px;
     margin-bottom: 21px;
   }
 }
@@ -1378,7 +1370,6 @@ video {
 .option-card-img-container {
   text-align: center;
   margin: 0 auto;
-  /*max-width: 281px;*/
   max-height: 279px;
 }
 @media (max-width: 768px) {
@@ -1594,6 +1585,11 @@ video {
     margin-bottom: 0px;
   }
 }
+@media (max-width: 576px) {
+  .protection-img img {
+    width: 72px;
+  }
+}
 .protection-text-margin {
   font-family: SFUIDisplay-Light;
   font-size: 18px;
@@ -2171,7 +2167,7 @@ video {
     width: 50px;
   }
 }
-.price-container-active {
+.price-container.active {
   box-shadow: 0 25px 25px #e6effa;
   height: 875px;
   position: relative;
@@ -2183,25 +2179,25 @@ video {
   border-radius: 8px;
 }
 @media (max-width: 1250px) {
-  .price-container-active {
+  .price-container.active {
     width: 288px;
     height: 901px;
   }
 }
 @media (max-width: 992px) {
-  .price-container-active {
+  .price-container.active {
     width: 174px;
     height: 970px;
     padding: 30px 8px 32px 8px;
   }
 }
 @media (max-width: 768px) {
-  .price-container-active {
+  .price-container.active {
     width: 60px;
     height: 476px;
   }
 }
-.price-container-active h6 {
+.price-container.active h6 {
   font-family: AvenirNext-Heavy;
   position: relative;
   z-index: 3;
@@ -2212,7 +2208,7 @@ video {
   letter-spacing: 0.3px;
   color: white;
 }
-.price-container-active img {
+.price-container.active img {
   position: absolute;
   z-index: 2;
   left: 0;
@@ -2221,17 +2217,17 @@ video {
   height: 124px;
 }
 @media (max-width: 1250px) {
-  .price-container-active img {
+  .price-container.active img {
     width: 100%;
   }
 }
 @media (max-width: 992px) {
-  .price-container-active img {
+  .price-container.active img {
     width: 191px;
   }
 }
 @media (max-width: 768px) {
-  .price-container-active img {
+  .price-container.active img {
     width: 50px;
   }
 }
@@ -2313,7 +2309,6 @@ video {
   height: 90px;
 }
 .price .price-p-margin {
-  /*line-height: 110px;*/
   font-size: 28px;
   font-weight: 500;
   text-transform: none;

css/styles.less

@@ -314,23 +314,19 @@ h1 {
   @media (max-width: 1250px) {
     font-size: 50px;
   }
-
-
   @media (max-width: 992px) {
     font-size: 36px;
     color: white;
   }
 
   @media (max-width: 768px) {
-    font-size: 36px;
+    font-size: 30px;
   }
-
   @media (max-width: 576px) {
-    font-size: 36px;
+    font-size: 30px;
   }
 }
 }
-
 .header-h1-line{
   position: relative;
   z-index: 3;
@@ -510,7 +506,6 @@ video {
   @media (max-width: 576px) {
     padding-left: 10px;
     padding-right: 10px;
-
   }
 }
 .h2-desktop {
@@ -820,15 +815,12 @@ video {
   @media (max-width: 1120px) {
     width: 50%;
     height: 120%;
-
-    /*right: 53%;*/
     top: 0;
   }
   @media (max-width: 992px) {
     width: 50%;
     height: 90%;
     left: 0;
-    /*right: 53%;*/
     top: 0;
   }
   @media (max-width: 768px) {
@@ -854,42 +846,42 @@ video {
   p {
     width: 100%;
     font-family: SFUIDisplay-Light;
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 24px;
-  letter-spacing: 0.24px;
-  color: #303a81;
-     @media (max-width: 768px) {
-    font-size: 14px;
-    letter-spacing: 0.14px;
-  }
-  @media (max-width: 576px) {
-    font-size: 14px;
-    letter-spacing: 0.14px;
-    line-height: 21px;
-    margin-bottom: 20px;
-  }
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 24px;
+    letter-spacing: 0.24px;
+    color: #303a81;
+    @media (max-width: 768px) {
+      font-size: 14px;
+      letter-spacing: 0.14px;
+    }
+    @media (max-width: 576px) {
+      font-size: 14px;
+      letter-spacing: 0.14px;
+      line-height: 21px;
+      margin-bottom: 20px;
+    }
   }
 }
 .advertising-text-order {
   p {
     width: 100%;
     font-family: SFUIDisplay-Light;
-  font-size: 18px;
-  font-weight: 300;
-  line-height: 24px;
-  letter-spacing: 0.24px;
-  color: #303a81;
-     @media (max-width: 768px) {
-    font-size: 14px;
-    letter-spacing: 0.14px;
-  }
-  @media (max-width: 576px) {
-    font-size: 14px;
-    letter-spacing: 0.14px;
-    line-height: 21px;
-     margin-bottom: 20px;
-  }
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 24px;
+    letter-spacing: 0.24px;
+    color: #303a81;
+    @media (max-width: 768px) {
+      font-size: 14px;
+      letter-spacing: 0.14px;
+    }
+    @media (max-width: 576px) {
+      font-size: 14px;
+      letter-spacing: 0.14px;
+      line-height: 21px;
+      margin-bottom: 20px;
+    }
   }
 }
 .advertising-text-p {
@@ -904,7 +896,6 @@ video {
   }
   width: 110%;
   h2 {
-    /*.h2-desktop;*/
     font-family: SF-UI-Text-Heavy;
     font-size: 36px;
     color: #303a81;
@@ -919,7 +910,7 @@ video {
     }
     @media (max-width: 576px) {
       font-size: 22px;
-      width: 320px!important;
+      width: 300px!important;
       font-weight: 700;
       letter-spacing: 0;
       color: #303a81;
@@ -938,7 +929,6 @@ video {
   }
   width: 110%;
   h2 {
-    /*.h2-desktop;*/
     font-family: SF-UI-Text-Heavy;
     font-size: 36px;
     color: #303a81;
@@ -953,7 +943,7 @@ video {
     }
     @media (max-width: 576px) {
       font-size: 22px;
-      width: 320px!important;
+      width: 300px!important;
       font-weight: bolder;
       letter-spacing: 0;
       color: #303a81;
@@ -996,10 +986,8 @@ video {
     min-width: 300px;
     order: 5;
     img {
-      /*width: 320px;*/
       min-width: 320px;
       min-height: 183px;
-      margin-left: -25px;
       margin-bottom: 4px;
     }
   }
@@ -1021,10 +1009,8 @@ video {
     min-width: 300px;
     margin-top: 0;
     img {
-      /*width: 320px;*/
       min-width: 320px;
       min-height: 183px;
-      margin-left: -25px;
       margin-bottom: 21px;
     }
   }
@@ -1054,7 +1040,6 @@ video {
       margin-bottom: 15px;
       line-height: 24px;
       font-weight: 800;
-
     }
   }
 }
@@ -1135,7 +1120,6 @@ video {
 .option-card-img-container {
   text-align: center;
   margin: 0 auto;
-  /*max-width: 281px;*/
   max-height: 279px;
   @media (max-width: 768px) {
     height: 169px;
@@ -1292,9 +1276,9 @@ video {
 .protection-img {
 
   width: 100%;
-   @media (min-width: 1150px) {
-      height: 98px;
-    }
+  @media (min-width: 1150px) {
+    height: 98px;
+  }
   @media (max-width: 768px) {
     height: 126px;
     margin-left: -10px;
@@ -1305,10 +1289,12 @@ video {
     margin-left: -10px;
   }
   img {
-     @media(min-width: 1250px){
-    margin-bottom: 0px;
-
-  }
+    @media(min-width: 1250px){
+      margin-bottom: 0px;
+    }
+    @media(max-width: 576px){
+      width: 72px;
+    }
   }
 }
 .protection-text-margin {
@@ -1317,15 +1303,15 @@ video {
   font-weight: 300;
   letter-spacing: 0.24px;
   color: #303a81;
-      line-height: 27px;
-      margin-bottom: 20px;
+  line-height: 27px;
+  margin-bottom: 20px;
   @media(min-width: 1250px){
     p {
       font-family: SFUIDisplay-Light;
-  font-size: 18px;
-  font-weight: 300;
-  letter-spacing: 0.24px;
-  color: #303a81;
+      font-size: 18px;
+      font-weight: 300;
+      letter-spacing: 0.24px;
+      color: #303a81;
       line-height: 27px;
       margin-bottom: 20px;
     }
@@ -1339,10 +1325,10 @@ video {
   }
   @media (max-width: 576px) {
     margin-bottom: 35px;
-     font-size: 14px;
-  font-weight: 300;
-  letter-spacing: 0.14px;
-      line-height: 21px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 0.14px;
+    line-height: 21px;
   }
 }
 .protection-text {
@@ -1610,7 +1596,7 @@ video {
   }
 }
 .technology-text {
-   font-family: SFUIDisplay-Light;
+  font-family: SFUIDisplay-Light;
   font-size: 18px;
   font-weight: 300;
   line-height: 27px;
@@ -1761,7 +1747,7 @@ video {
     }
   }
 }
-.price-container-active {
+.price-container.active {
   box-shadow: 0 25px 25px #e6effa;
   height: 875px;
   position: relative;
@@ -1829,7 +1815,6 @@ video {
     }
   }
 }
-
 .price, .price-active {
   width: 100%;
   height: auto;
@@ -1873,7 +1858,6 @@ video {
   height: 90px;
 }
 .price .price-p-margin {
-  /*line-height: 110px;*/
   font-size: 28px;
   font-weight: 500;
   text-transform: none;
@@ -2172,7 +2156,6 @@ footer {
       line-height: 30px;
       letter-spacing: 0.14px;
       color: #315197;
-
     }
   }
 }

index.html

@@ -277,6 +277,7 @@
         <button type="button" class="main-btn main-btn-margin">Узнать больше</button>
     </div>
 </section>
+
 <section class="advertising-background">
     <div class="advertising main-container">
         <div class="advertising-text">
@@ -439,6 +440,7 @@
         </div>
     </div>
 </section>
+
 <section class="option main-container">
     <h2>Варианты развертывания</h2>
     <div class="main-line">
@@ -474,6 +476,7 @@
         </div>
     </div>
 </section>
+
 <section class="protection-background">
     <div class="main-container">
         <h2 class="h2-desktop">Защита данных в облаке</h2>
@@ -759,7 +762,7 @@
                 </li>
                 <li class="price-display-none">
                     <p>
-                        Оперативная поддержка<p class="price-info-carry">Только по e-mail</p>
+                        Оперативная поддержка<span class="price-info-carry">Только по e-mail</span>
                     </p>
                     <div class="price-line price-display-none">
                     </div>
@@ -800,7 +803,7 @@
             </ol>
             <button type="button" class="price-btn">Попробовать бесплатно</button>
         </div>
-        <div class="price-container-active">
+        <div class="price-container active">
             <img src="img/price1.png">
             <h6>Standard</h6>
             <div class="price-active">
@@ -1211,7 +1214,7 @@
 <script>
     $(document).ready(function () {
         $.pixlayout({
-            src: "layouts/mobile.jpg",
+            src: "layouts/desktop-cropped.png",
             opacity: 0.8,
             top: 0,
             center: true,
@@ -1223,8 +1226,6 @@
 
     $('#header-img-navicon').click(function(event) {
         $('#cat').toggleClass('page-header__burger--active');
-
-
     });
 </script>
 </body>