add style for desktop

0f37d9ac · Iren · f0125107 · 0f37d9ac · 0f37d9ac · 0f37d9ac
Commit 0f37d9ac authored Jan 28, 2019 by Iren
Expand all Hide whitespace changes
Inline Side-by-side

Showing with 228 additions and 124 deletions

styles.css css/styles.css +118 -51

styles.css.map css/styles.css.map +0 -0

styles.less css/styles.less +101 -53

index.html index.html +9 -20

No files found.
--- a/css/styles.css
+++ b/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;

--- a/css/styles.css.map
+++ b/css/styles.css.map
--- a/css/styles.less
+++ b/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;

--- a/index.html
+++ b/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">