add style for desktop

css/styles.css

@@ -152,7 +152,12 @@ header {
   }
 }
 .header-link {
-  margin-right: 2.5%;
+  margin-right: 31px;
+}
+@media (max-width: 1250px) {
+  .header-link {
+    margin-right: 10px;
+  }
 }
 @media (max-width: 992px) {
   .header-link {
@@ -173,7 +178,12 @@ header {
   }
 }
 .header-link-language {
-  margin-right: 2.5%;
+  margin-right: 31px;
+}
+@media (max-width: 1250px) {
+  .header-link-language {
+    margin-right: 10px;
+  }
 }
 @media (max-width: 992px) {
   .header-link-language {
@@ -199,6 +209,11 @@ header {
   margin-top: -6px;
   border-left: white 1px solid;
 }
+@media (max-width: 1250px) {
+  .header-line {
+    width: 5px;
+  }
+}
 @media (max-width: 992px) {
   .header-line {
     margin-right: 5px;
@@ -209,8 +224,7 @@ header {
 }
 .header-icon i {
   color: white;
-  font-size: 18px;
-  margin-right: 5px;
+  font-size: 16px;
 }
 @media (max-width: 992px) {
   .header-icon i {
@@ -218,11 +232,8 @@ header {
     margin-left: 0;
   }
 }
-.header-icon i:last-child {
-  margin-right: 0!important;
-}
-i.icon-last {
-  margin-right: 0;
+.header-icon i:first-child {
+  margin-left: 0!important;
 }
 h1 {
   position: relative;
@@ -441,7 +452,7 @@ video {
 }
 .h2-desktop-tittle {
   font-family: Avenir Next;
-  font-weight: 2000;
+  font-weight: 800;
 }
 @media (max-width: 576px) {
   .h2-desktop-tittle {
@@ -561,7 +572,7 @@ video {
   background-size: 100% 100%;
   background-position: center center;*/
   background: #f9fbff;
-  padding-top: 182px;
+  padding-top: 184px;
   padding-bottom: 60px;
   margin-bottom: 70px;
 }
@@ -602,11 +613,12 @@ video {
 .advertising {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 110px;
+  height: 315px;
+  margin-bottom: 160px;
 }
-@media (max-width: 576px) {
+@media (max-width: 992px) {
   .advertising {
-    flex-flow: wrap;
+    height: 355px;
   }
 }
 @media (max-width: 1250px) {
@@ -614,6 +626,48 @@ video {
     margin-bottom: 50px;
   }
 }
+@media (max-width: 768px) {
+  .advertising {
+    margin-bottom: 50px;
+    height: 405px;
+  }
+}
+@media (max-width: 576px) {
+  .advertising {
+    flex-flow: wrap;
+  }
+}
+.two-img {
+  margin-bottom: 238px;
+  position: relative;
+}
+.advertising-img-position {
+  position: absolute;
+  width: 674px;
+  height: 445px;
+  right: 640px;
+}
+@media (max-width: 1250px) {
+  .advertising-img-position {
+    width: 524px;
+    height: 342px;
+    right: 500px;
+  }
+}
+@media (max-width: 992px) {
+  .advertising-img-position {
+    width: 390px;
+    height: 242px;
+    right: 390px;
+  }
+}
+@media (max-width: 768px) {
+  .advertising-img-position {
+    width: 290px;
+    height: 172px;
+    right: 290px;
+  }
+}
 .advertising-text-order {
   width: 110%;
 }
@@ -624,15 +678,15 @@ video {
   }
 }
 .advertising-text-order h2 {
-  font-family: Avenir Next;
   font-size: 36px;
   line-height: 62px;
   margin-bottom: 3px;
   color: #315197;
   letter-spacing: 0.36px;
   max-width: 803px;
-  font-family: AvenirNext-Heavy;
+  font-family: Avenir Next;
   margin-bottom: 21px;
+  margin-top: 8px;
   line-height: 36px;
   font-weight: 800;
 }
@@ -650,7 +704,6 @@ video {
 @media (max-width: 768px) {
   .advertising-text-order h2 {
     font-size: 30px;
-    font-family: AvenirNext-Heavy;
     margin-bottom: 15px;
   }
 }
@@ -658,7 +711,6 @@ video {
   .advertising-text-order h2 {
     width: 300px!important;
     font-size: 30px;
-    font-family: AvenirNext-Heavy;
     margin-bottom: 15px;
   }
 }
@@ -667,6 +719,7 @@ video {
 }
 .advertising-text h2 {
   font-size: 36px;
+  font-weight: 800;
   line-height: 62px;
   margin-bottom: 3px;
   color: #315197;
@@ -675,8 +728,8 @@ video {
   font-family: Avenir Next;
   font-weight: 700;
   margin-bottom: 21px;
+  margin-top: 4px;
   line-height: 36px;
-  font-weight: 800;
 }
 @media (max-width: 576px) {
   .advertising-text h2 {
@@ -692,7 +745,6 @@ video {
 @media (max-width: 768px) {
   .advertising-text h2 {
     font-size: 30px;
-    font-family: AvenirNext-Heavy;
     margin-bottom: 15px;
   }
 }
@@ -700,7 +752,6 @@ video {
   .advertising-text h2 {
     width: 100%;
     font-size: 30px;
-    font-family: AvenirNext-Heavy;
     margin-bottom: 15px;
   }
 }
@@ -715,6 +766,14 @@ video {
 .advertising-text-order .main-line {
   margin-bottom: 24px;
 }
+.advertising-img-order {
+  position: relative;
+  z-index: 3;
+}
+.advertising-img-order img {
+  position: relative;
+  z-index: 3;
+}
 @media (max-width: 576px) {
   .advertising-img-order {
     min-width: 300px;
@@ -740,17 +799,6 @@ video {
     padding-top: 25px;
   }
 }
-/* p {
-   .text-h2-desktop;
-        @media (max-width: 768px) {
-   font-size: 18px;
-        letter-spacing: 0.16px;
-          margin-bottom: 0;
- }
- }
- @media (max-width: 576px) {
-   width: 100%;
- }*/
 @media (min-height: 577px) {
   .advertising-img {
     margin-top: -65px;
@@ -1005,7 +1053,7 @@ video {
   background-size: 100% 100%;
   background-position: center;
   padding-top: 118px;
-  padding-bottom: 115px;
+  padding-bottom: 95px;
 }
 @media (max-width: 576px) {
   .protection-background {
@@ -1056,6 +1104,7 @@ video {
   }
 }
 .protection-img {
+  height: 120px;
   width: 100%;
 }
 @media (max-width: 768px) {
@@ -1377,20 +1426,20 @@ video {
   }
 }
 .technology-card {
-  width: 50%;
+  width: 48%;
   text-align: left;
   padding-right: 80px;
   height: 138px;
 }
 @media (max-width: 1250px) {
   .technology-card {
-    padding-right: 50px;
+    padding-right: 15px;
   }
 }
 @media (max-width: 576px) {
   .technology-card {
     height: 190px;
-    padding-right: 5px;
+    padding-right: 0;
     text-align: center!important;
   }
 }
@@ -1448,11 +1497,7 @@ video {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 128px;
-  /*@media (max-width:  768px) {
-      position: absolute;
-    display: none;
-}*/
+  margin-bottom: 180px;
 }
 @media (max-width: 992px) {
   .price-wrapper {
@@ -1471,11 +1516,11 @@ video {
   position: relative;
   max-width: 256px;
   height: 834px;
-  margin-top: 15px;
+  margin-top: 17px;
   padding: 30px 16px 32px 16px;
   background: #f9fbff;
   border: #e6effa 1px solid;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 @media (max-width: 1250px) {
   .price-container,
@@ -1526,7 +1571,7 @@ video {
 @media (max-width: 1250px) {
   .price-container img,
   .price-container-active img {
-    width: 288px;
+    width: 100%;
   }
 }
 @media (max-width: 992px) {
@@ -1537,14 +1582,14 @@ video {
 }
 .price-container-active {
   box-shadow: 0 25px 25px #e6effa;
-  height: 901px;
+  height: 875px;
   position: relative;
   width: 256px;
   margin-top: 20px;
   padding: 20px 16px 32px 16px;
   background: white;
   border: #e6effa 1px solid;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 @media (max-width: 1250px) {
   .price-container-active {
@@ -1585,7 +1630,7 @@ video {
 }
 @media (max-width: 1250px) {
   .price-container-active img {
-    width: 288px;
+    width: 100%;
   }
 }
 @media (max-width: 992px) {
@@ -1753,7 +1798,7 @@ video {
 .price-btn-active {
   background: #c94d4e;
   color: white;
-  margin-top: 27px;
+  margin-top: 35px;
 }
 @media (max-width: 1250px) {
   .price-btn-active {
@@ -1927,7 +1972,7 @@ input.form-last-child {
 .footer-wrapper-logo {
   display: flex;
   justify-content: space-between;
-  padding-top: 40px;
+  padding-top: 34px;
 }
 @media (max-width: 576px) {
   .footer-wrapper-logo {
@@ -1952,6 +1997,17 @@ input.form-last-child {
     color: #315197;
   }
 }
+.footer-logo-link {
+  margin-top: -1px;
+}
+.footer-logo-link a {
+  font-family: SFUIDisplay-Regular;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 30px;
+  letter-spacing: 0.35px;
+  color: #315197;
+}
 .footer-wrapper-info {
   display: flex;
   justify-content: space-between;
@@ -1962,7 +2018,15 @@ input.form-last-child {
   }
 }
 .footer-info {
-  margin-top: 20px;
+  margin-top: 22px;
+}
+.footer-info p {
+  font-family: SFUIDisplay-Regular;
+  width: 244px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #315197;
+  letter-spacing: 0.14px;
 }
 @media (max-width: 576px) {
   .footer-info {
@@ -2031,6 +2095,9 @@ input.form-last-child {
     color: #315197;
   }
 }
+.footer-contacts-link {
+  height: 34px;
+}
 .footer-contact-img {
   padding-top: 5px;
 }
@@ -2040,7 +2107,7 @@ input.form-last-child {
   }
 }
 .footer-icon-text {
-  font-family: SFUIDisplay-Regular sans-serif;
+  font-family: SFUIDisplay-Regular;
   font-size: 16px;
   font-weight: 400;
   line-height: 30px;

css/styles.less

@@ -90,6 +90,7 @@ header {
     height: 200px;
   }
 }
+
 .header-wrapp {
   display: flex;
   justify-content: space-between;
@@ -132,7 +133,10 @@ header {
   }
 }
 .header-link {
-  margin-right: 2.5%;
+  margin-right: 31px;
+  @media (max-width: 1250px) {
+    margin-right: 10px;
+  }
   @media (max-width: 992px) {
     margin-right: 10px;
   }
@@ -149,7 +153,10 @@ header {
   }
 }
 .header-link-language {
-  margin-right: 2.5%;
+  margin-right: 31px;
+  @media (max-width: 1250px) {
+    margin-right: 10px;
+  }
   @media (max-width: 992px) {
     margin-right: 10px;
   }
@@ -170,6 +177,9 @@ header {
   height: 35px;
   margin-top: -6px;
   border-left: white 1px solid;
+  @media (max-width: 1250px) {
+    width: 5px;
+  }
   @media (max-width: 992px) {
     margin-right: 5px;
     width: 4px;
@@ -180,20 +190,17 @@ header {
 .header-icon {
   i {
     color: white;
-    font-size: 18px;
-    margin-right: 5px;
+    font-size: 16px;
     @media (max-width: 992px) {
       font-size: 12px;
       margin-left: 0;
     }
   }
-  i:last-child {
-    margin-right: 0!important;
+  i:first-child {
+    margin-left: 0!important;
   }
 }
-i.icon-last {
-  margin-right: 0;
-}
+
 h1 {
   position: relative;
   z-index: 3;
@@ -384,7 +391,7 @@ video {
 }
 .h2-desktop-tittle {
   font-family: Avenir Next;
-  font-weight: 2000;
+  font-weight: 800;
   @media (max-width: 576px){
     max-width: 170px;
   }
@@ -486,7 +493,7 @@ video {
   background-size: 100% 100%;
   background-position: center center;*/
   background: #f9fbff;
-  padding-top: 182px;
+  padding-top: 184px;
   padding-bottom: 60px;
   margin-bottom: 70px;
   @media (max-width: 576px) {
@@ -517,12 +524,46 @@ video {
 .advertising {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 110px;
+  height: 315px;
+  margin-bottom: 160px;
+  @media (max-width: 992px) {
+    height: 355px;
+  }
+  @media (max-width: 1250px) {
+    margin-bottom: 50px;
+  }
+  @media (max-width: 768px) {
+    margin-bottom: 50px;
+    height: 405px;
+  }
   @media (max-width: 576px) {
     flex-flow: wrap;
+
   }
+}
+.two-img {
+  margin-bottom: 238px;
+  position: relative;
+}
+.advertising-img-position {
+  position: absolute;
+  width: 674px;
+  height: 445px;
+  right: 640px;
   @media (max-width: 1250px) {
-    margin-bottom: 50px;
+    width: 524px;
+    height: 342px;
+    right: 500px;
+  }
+  @media (max-width: 992px) {
+    width: 390px;
+    height: 242px;
+    right: 390px;
+  }
+  @media (max-width: 768px) {
+    width: 290px;
+    height: 172px;
+    right: 290px;
   }
 }
 .advertising-text-order {
@@ -533,19 +574,18 @@ video {
   width: 110%;
   h2 {
     .h2-desktop;
-    font-family: AvenirNext-Heavy;
+    font-family: Avenir Next;
     margin-bottom: 21px;
+    margin-top: 8px;
     line-height: 36px;
     font-weight: 800;
     @media (max-width: 768px) {
       font-size: 30px;
-      font-family: AvenirNext-Heavy;
       margin-bottom: 15px;
     }
     @media (max-width: 576px) {
       width: 300px!important;
       font-size: 30px;
-      font-family: AvenirNext-Heavy;
       margin-bottom: 15px;
     }
 
@@ -560,17 +600,15 @@ video {
     font-family: Avenir Next;
     font-weight: 700;
     margin-bottom: 21px;
+    margin-top: 4px;
     line-height: 36px;
-    font-weight: 800;
     @media (max-width: 768px) {
       font-size: 30px;
-      font-family: AvenirNext-Heavy;
       margin-bottom: 15px;
     }
     @media (max-width: 576px) {
       width: 100%;
       font-size: 30px;
-      font-family: AvenirNext-Heavy;
       margin-bottom: 15px;
     }
 
@@ -587,6 +625,12 @@ video {
   margin-bottom: 24px;
 }
 .advertising-img-order {
+  position: relative;
+  z-index: 3;
+  img {
+    position: relative;
+    z-index: 3;
+  }
   @media (max-width: 576px) {
     min-width: 300px;
     order: 5;
@@ -607,19 +651,6 @@ video {
     padding-top: 25px;
   }
 }
-
-/* p {
-   .text-h2-desktop;
-        @media (max-width: 768px) {
-   font-size: 18px;
-        letter-spacing: 0.16px;
-          margin-bottom: 0;
- }
- }
- @media (max-width: 576px) {
-   width: 100%;
- }*/
-
 .advertising-img {
   @media (min-height: 577px) {
     margin-top: -65px;
@@ -824,7 +855,7 @@ video {
   background-size: 100% 100%;
   background-position: center;
   padding-top: 118px;
-  padding-bottom: 115px;
+  padding-bottom: 95px;
   @media (max-width: 576px) {
     padding-top: 51px;
   }
@@ -863,6 +894,7 @@ video {
   }
 }
 .protection-img {
+  height: 120px;
   width: 100%;
   @media (max-width: 768px) {
     height: 126px;
@@ -1118,16 +1150,16 @@ video {
   }
 }
 .technology-card {
-  width: 50%;
+  width: 48%;
   text-align: left;
   padding-right: 80px;
   height: 138px;
   @media (max-width: 1250px) {
-    padding-right: 50px;
+    padding-right: 15px;
   }
   @media (max-width: 576px) {
     height: 190px;
-    padding-right: 5px;
+    padding-right: 0;
     text-align: center!important;
   }
   p {
@@ -1176,7 +1208,7 @@ video {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 128px;
+  margin-bottom: 180px;
   @media (max-width:  992px) {
     margin-left: -15px;
   }
@@ -1185,21 +1217,16 @@ video {
     height: 731px;
     text-overflow: ellipsis;
   }
-
-  /*@media (max-width:  768px) {
-      position: absolute;
-    display: none;
-}*/
 }
 .price-container, .price-container-active {
   position: relative;
   max-width: 256px;
   height: 834px;
-  margin-top: 15px;
+  margin-top: 17px;
   padding: 30px 16px 32px 16px;
   background: #f9fbff;
   border: #e6effa 1px solid;
-  border-radius: 4px;
+  border-radius: 8px;
   @media (max-width:  1250px) {
     width: 288px;
     height: 870px;
@@ -1232,7 +1259,7 @@ video {
     left: 0;
     top: 0;
     @media (max-width:  1250px) {
-      width: 288px;
+      width: 100%;
     }
     @media (max-width:  992px) {
       width: 190px;
@@ -1241,14 +1268,14 @@ video {
 }
 .price-container-active {
   box-shadow: 0 25px 25px #e6effa;
-  height: 901px;
+  height: 875px;
   position: relative;
   width: 256px;
   margin-top: 20px;
   padding: 20px 16px 32px 16px;
   background: white;
   border: #e6effa 1px solid;
-  border-radius: 4px;
+  border-radius: 8px;
   @media (max-width:  1250px) {
     width: 288px;
     height: 901px;
@@ -1280,7 +1307,7 @@ video {
     width: 288px;
     height: 124px;
     @media (max-width:  1250px) {
-      width: 288px;
+      width: 100%;
     }
     @media (max-width:  992px) {
       width: 191px;
@@ -1424,7 +1451,7 @@ video {
 .price-btn-active {
   background: #c94d4e;
   color: white;
-  margin-top: 27px;
+  margin-top: 35px;
   @media (max-width:  1250px) {
     margin-top: 8px;
   }
@@ -1576,7 +1603,7 @@ footer {
 .footer-wrapper-logo {
   display: flex;
   justify-content: space-between;
-  padding-top: 40px;
+  padding-top: 34px;
   @media (max-width:  576px) {
     margin-bottom: 15px;
   }
@@ -1598,6 +1625,17 @@ footer {
     }
   }
 }
+.footer-logo-link {
+  margin-top: -1px;
+  a {
+    font-family: SFUIDisplay-Regular;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 30px;
+    letter-spacing: 0.35px;
+    color: #315197;
+  }
+}
 .footer-wrapper-info {
   display: flex;
   justify-content: space-between;
@@ -1605,9 +1643,16 @@ footer {
     flex-wrap: wrap;
   }
 }
-
 .footer-info {
-  margin-top: 20px;
+  margin-top: 22px;
+  p {
+    font-family: SFUIDisplay-Regular;
+    width: 244px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #315197;
+    letter-spacing: 0.14px;
+  }
   @media (max-width:  576px) {
     order: 3;
     width: 320px;
@@ -1669,6 +1714,9 @@ footer {
     }
   }
 }
+.footer-contacts-link {
+  height: 34px;
+}
 .footer-contact-img {
   padding-top: 5px;
   @media (max-width:  576px) {
@@ -1676,7 +1724,7 @@ footer {
   }
 }
 .footer-icon-text {
-  font-family: SFUIDisplay-Regular sans-serif;
+  font-family: SFUIDisplay-Regular;
   font-size: 16px;
   font-weight: 400;
   line-height: 30px;

index.html

@@ -66,11 +66,9 @@
                         и неограниченными возможностями масштабирования.<br>
                         С помощью MSO вы сможете автоматизировать любой бизнес-процесс.
                     </p>
-
                     <button type="button" class="header-btn">Зарегистрироваться</button>
                     <button type="button" class="header-btn-background header-btn">Узнать больше</button>
                 </div>
-
                 <div class="header-video">
                     <video controls="controls" poster="img/video.png">
                         <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
@@ -89,9 +87,6 @@
         </div>
     </div>
 </header>
-
-
-
 <section class="main-container">
     <h2 class="h2-desktop h2-desktop-tittle">Что такое MySmart Office</h2>
     <div class="main-line">
@@ -259,7 +254,6 @@
         <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">
@@ -379,7 +373,9 @@
             <img src="img/advertising7.png">
         </div>
     </div>
-    <div class="advertising main-container">
+
+    <div class="advertising two-img main-container">
+        <img class="advertising-img-position" src="img/advertising2.png">
         <div class="advertising-img-order">
             <img src="img/advertising11.png">
         </div>
@@ -403,10 +399,8 @@
             <div class="main-line">
             </div>
             <p class="text-h2-desktop">
-                Вся настройка системы может быть осуществлена силами внутренней
-                команды ИТ-службы. Постепенная и несложная локализация MSO поможет
-                команде лучше понять внутренние процессы и внедрять продукт, полностью
-                удовлетворяющий ваши бизнес-потребности.
+                Принимайте грамотные решения, опираясь на исчерпывающую
+                бизнес-аналитику, прогнозы, отображение на персональных dashboard.
             </p>
         </div>
         <div class="advertising-img">
@@ -414,7 +408,6 @@
         </div>
     </div>
 </section>
-
 <section class="option main-container">
     <h2>Варианты развертывания</h2>
     <div class="main-line">
@@ -450,7 +443,6 @@
         </div>
     </div>
 </section>
-
 <section class="protection-background">
     <div class="main-container">
         <h2 class="h2-desktop">Защита данных в облаке</h2>
@@ -668,8 +660,6 @@
         </div>
     </div>
 </section>
-
-
 <section class="main-container">
     <h2 class="h2-desktop">Цены</h2>
     <div class="main-line">
@@ -1107,16 +1097,13 @@
         </div>
     </div>
 </section>
-
 <footer>
     <div class="main-container footer-wrapper-logo">
         <img src="img/logo.png">
-        <div class="footer-contacts-link">
+        <div class="footer-logo-link">
             <a href="">Вход для клиентов</a>
         </div>
     </div>
-
-
     <div class="main-container footer-wrapper-info">
         <div class="footer-info">
             <div class="footer-link">
@@ -1125,7 +1112,9 @@
             <div class="footer-link">
                 <a href="">Политика конфиденциальности</a>
             </div>
-            <img class="footer-img" src="img/footer-img.png">
+            <p>
+                &#169 Copyright 2018
+            </p>
         </div>
         <div class="footer-contacts">
             <div class="footer-contacts-link">