add style 320px

4c4918f5 · Iren · f17bc746 · 4c4918f5 · 4c4918f5 · 4c4918f5
Commit 4c4918f5 authored Jan 31, 2019 by Iren
Expand all Show whitespace changes
Inline Side-by-side

Showing with 221 additions and 63 deletions

styles.css css/styles.css +115 -32

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

styles.less css/styles.less +103 -28

index.html index.html +3 -3

No files found.
--- a/css/styles.css
+++ b/css/styles.css
@@ -342,7 +342,7 @@ h1 {
  color: white;
  font-weight: 800;
  line-height: 62px;
-  letter-spacing: 0.6px;
+  letter-spacing: 1px;
  margin-bottom: 2.5%;
  text-align: left;
 }
@@ -881,6 +881,12 @@ video {
  color: #303a81;
  line-height: 21px;
 }
+@media (min-width: 1250px) {
+  .main-text {
+    line-height: 27px;
+    margin-bottom: 50px;
+  }
+}
 @media (max-width: 768px) {
  .main-text {
    font-size: 14px;
@@ -901,7 +907,7 @@ video {
  background: #f9fbff;
  padding-top: 184px;
  padding-bottom: 60px;
-  margin-bottom: 70px;
+  margin-bottom: 75px;
 }
 @media (max-width: 576px) {
  .advertising-background {
@@ -933,7 +939,7 @@ video {
 }
 @media (max-width: 576px) {
  .advertising-background {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
    padding-top: 60px;
  }
 }
@@ -1028,10 +1034,11 @@ video {
    width: 100%;
    height: 45%;
    right: 0;
-    top: 40%;
+    top: 45%;
  }
 }
-.advertising-text {
+.advertising-text p {
+  width: 100%;
  font-family: SFUIDisplay-Light;
  font-size: 18px;
  font-weight: 300;
@@ -1040,18 +1047,43 @@ video {
  color: #303a81;
 }
 @media (max-width: 768px) {
-  .advertising-text {
+  .advertising-text p {
    font-size: 14px;
    letter-spacing: 0.14px;
  }
 }
 @media (max-width: 576px) {
-  .advertising-text {
+  .advertising-text p {
+    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) {
+  .advertising-text-order p {
    font-size: 14px;
    letter-spacing: 0.14px;
  }
 }
 @media (max-width: 576px) {
+  .advertising-text-order p {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 576px) {
  .advertising-text-p {
    margin-bottom: 0;
  }
@@ -1180,12 +1212,12 @@ video {
    min-width: 320px;
    min-height: 183px;
    margin-left: -25px;
-    margin-bottom: 13px;
+    margin-bottom: 4px;
  }
 }
 @media (max-width: 1250px) {
  .advertising-img {
-    padding-top: 25px;
+    padding-top: 26px;
  }
 }
 @media (min-height: 577px) {
@@ -1209,7 +1241,7 @@ video {
    min-width: 320px;
    min-height: 183px;
    margin-left: -25px;
-    margin-bottom: 52px;
+    margin-bottom: 21px;
  }
 }
 /*option*/
@@ -1231,13 +1263,12 @@ video {
 .option h2 {
  font-size: 36px;
  line-height: 62px;
-  margin-bottom: 3px;
  color: #315197;
  letter-spacing: 0.36px;
  max-width: 803px;
  font-family: SF-UI-Display-Black;
  font-weight: 800;
-  margin-bottom: 0;
+  margin-bottom: 3px;
 }
 @media (max-width: 576px) {
  .option h2 {
@@ -1254,12 +1285,16 @@ video {
    margin-bottom: 15px;
    line-height: 24px;
    font-weight: 800;
-    margin-top: -22px;
  }
 }
 .option-card-img {
  text-align: center;
-  max-width: 485px;
+  width: 500px;
+}
+@media (max-width: 1250px) {
+  .option-card-img {
+    width: 400px;
+  }
 }
 @media (max-width: 768px) {
  .option-card-img {
@@ -1344,7 +1379,7 @@ video {
  text-align: center;
  margin: 0 auto;
  /*max-width: 281px;*/
-  max-height: 284px;
+  max-height: 279px;
 }
 @media (max-width: 768px) {
  .option-card-img-container {
@@ -1457,7 +1492,7 @@ video {
  background: #f9fbff;
  background-size: 100% 100%;
  background-position: center;
-  padding-top: 118px;
+  padding-top: 123px;
  padding-bottom: 95px;
 }
 @media (max-width: 576px) {
@@ -1534,9 +1569,13 @@ video {
  }
 }
 .protection-img {
-  height: 120px;
  width: 100%;
 }
+@media (min-width: 1150px) {
+  .protection-img {
+    height: 98px;
+  }
+}
 @media (max-width: 768px) {
  .protection-img {
    height: 126px;
@@ -1550,12 +1589,29 @@ video {
    margin-left: -10px;
  }
 }
-@media (max-width: 576px) {
+@media (min-width: 1250px) {
  .protection-img img {
-    width: 70px;
-    height: 70px;
-    margin-bottom: 0;
-    margin-right: 16px;
+    margin-bottom: 0px;
+  }
+}
+.protection-text-margin {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  line-height: 27px;
+  margin-bottom: 20px;
+}
+@media (min-width: 1250px) {
+  .protection-text-margin p {
+    font-family: SFUIDisplay-Light;
+    font-size: 18px;
+    font-weight: 300;
+    letter-spacing: 0.24px;
+    color: #303a81;
+    line-height: 27px;
+    margin-bottom: 20px;
  }
 }
 @media (min-width: 1250px) {
@@ -1572,6 +1628,10 @@ video {
 @media (max-width: 576px) {
  .protection-text-margin {
    margin-bottom: 35px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 0.14px;
+    line-height: 21px;
  }
 }
 .protection-text {
@@ -1599,12 +1659,12 @@ video {
 }
 @media (max-width: 576px) {
  .protection-line {
-    margin-top: 13px;
+    margin-top: 10px;
  }
 }
 /*catalog*/
 .catalog {
-  padding-top: 135px;
+  padding-top: 163px;
 }
 @media (max-width: 992px) {
  .catalog {
@@ -1613,7 +1673,7 @@ video {
 }
 @media (max-width: 576px) {
  .catalog {
-    padding-top: 55px;
+    padding-top: 57px;
  }
 }
 .catalog-container {
@@ -1827,7 +1887,7 @@ video {
  background-position: center;
  padding-top: 118px;
  padding-bottom: 113px;
-  margin-bottom: 103px;
+  margin-bottom: 114px;
 }
 @media (max-width: 576px) {
  .technology {
@@ -1856,7 +1916,7 @@ video {
 }
 @media (max-width: 576px) {
  .technology {
-    padding-top: 58px;
+    padding-top: 60px;
    padding-bottom: 35px;
    margin-bottom: 40px;
  }
@@ -1915,6 +1975,29 @@ video {
    margin-bottom: 5px;
  }
 }
+.technology-text {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 27px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  margin-bottom: 32px;
+}
+@media (max-width: 768px) {
+  .technology-text {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+  }
+}
+@media (max-width: 576px) {
+  .technology-text {
+    font-size: 14px;
+    letter-spacing: 0.14px;
+    line-height: 21px;
+    margin-bottom: 10px;
+  }
+}
 .technology-card {
  width: 48%;
  text-align: left;
@@ -2336,7 +2419,7 @@ video {
  margin-left: 7px;
  width: 240px;
  height: 40px;
-  margin-top: 20px;
+  margin-top: 15px;
  background: #f9fbff;
  border: #c94d4e 1px solid;
  border-radius: 20px;
@@ -2406,7 +2489,7 @@ video {
  max-width: 650px;
  margin: 0 auto;
  padding-top: 12.7%;
-  padding-bottom: 14%;
+  padding-bottom: 211px;
 }
 @media (max-width: 576px) {
  .form-wrapper {
@@ -2420,8 +2503,8 @@ video {
  font-size: 60px;
  font-weight: 400;
  color: white;
-  letter-spacing: 0.6px;
-  margin-bottom: 20px;
+  letter-spacing: 0.9px;
+  margin-bottom: 25px;
 }
 @media (max-width: 768px) {
  .form-wrapper h6 {
@@ -2444,7 +2527,7 @@ video {
  color: white;
  letter-spacing: 0;
  line-height: 30px;
-  margin-bottom: 27px;
+  margin-bottom: 55px;
 }
 @media (max-width: 576px) {
  .form-wrapper p {

--- a/css/styles.css.map
+++ b/css/styles.css.map
--- a/css/styles.less
+++ b/css/styles.less
@@ -289,7 +289,7 @@ h1 {
  color: white;
  font-weight: 800;
  line-height: 62px;
-  letter-spacing: 0.6px;
+  letter-spacing: 1px;
  margin-bottom: 2.5%;
  text-align: left;
  @media (max-width: 992px) {
@@ -736,6 +736,10 @@ video {
  }
 }
 .main-text {
+  @media(min-width: 1250px){
+    line-height: 27px;
+    margin-bottom: 50px;
+  }
  .catalog-tittle-text;
  line-height: 21px;
 }
@@ -747,7 +751,7 @@ video {
  background: #f9fbff;
  padding-top: 184px;
  padding-bottom: 60px;
-  margin-bottom: 70px;
+  margin-bottom: 75px;
  @media (max-width: 576px) {
    padding-top: 60px;
    padding-bottom: 5px;
@@ -769,7 +773,7 @@ video {
    padding-top: 90px;
  }
  @media (max-width: 576px) {
-    padding-bottom: 20px;
+    padding-bottom: 10px;
    padding-top: 60px;
  }
 }
@@ -843,10 +847,12 @@ video {
    width: 100%;
    height: 45%;
    right: 0;
-    top: 40%;
+    top: 45%;
  }
 }
 .advertising-text {
+  p {
+    width: 100%;
    font-family: SFUIDisplay-Light;
  font-size: 18px;
  font-weight: 300;
@@ -860,6 +866,30 @@ video {
  @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;
+  }
  }
 }
 .advertising-text-p {
@@ -970,13 +1000,13 @@ video {
      min-width: 320px;
      min-height: 183px;
      margin-left: -25px;
-      margin-bottom: 13px;
+      margin-bottom: 4px;
    }
  }
 }
 .advertising-img {
  @media (max-width: 1250px) {
-    padding-top: 25px;
+    padding-top: 26px;
  }
  @media (min-height: 577px) {
    margin-top: -65px;
@@ -995,7 +1025,7 @@ video {
      min-width: 320px;
      min-height: 183px;
      margin-left: -25px;
-      margin-bottom: 52px;
+      margin-bottom: 21px;
    }
  }
 }
@@ -1019,18 +1049,21 @@ video {
    .h2-desktop;
    font-family: SF-UI-Display-Black;
    font-weight: 800;
-    margin-bottom: 0;
+    margin-bottom: 3px;
    @media (max-width: 576px) {
      margin-bottom: 15px;
      line-height: 24px;
      font-weight: 800;
-      margin-top: -22px;
+
    }
  }
 }
 .option-card-img {
  text-align: center;
-  max-width: 485px;
+  width: 500px;
+  @media (max-width: 1250px){
+    width: 400px;
+  }
  @media (max-width: 768px) {
    text-align: center;
    width: 275px;
@@ -1103,7 +1136,7 @@ video {
  text-align: center;
  margin: 0 auto;
  /*max-width: 281px;*/
-  max-height: 284px;
+  max-height: 279px;
  @media (max-width: 768px) {
    height: 169px;
    max-width: 180px;
@@ -1198,7 +1231,7 @@ video {
  background: #f9fbff;
  background-size: 100% 100%;
  background-position: center;
-  padding-top: 118px;
+  padding-top: 123px;
  padding-bottom: 95px;
  @media (max-width: 576px) {
    padding-top: 51px;
@@ -1257,8 +1290,11 @@ video {
  }
 }
 .protection-img {
-  height: 120px;
+
  width: 100%;
+   @media (min-width: 1150px) {
+      height: 98px;
+    }
  @media (max-width: 768px) {
    height: 126px;
    margin-left: -10px;
@@ -1269,15 +1305,31 @@ video {
    margin-left: -10px;
  }
  img {
-    @media (max-width: 576px) {
-      width: 70px;
-      height: 70px;
-      margin-bottom: 0;
-      margin-right: 16px;
+     @media(min-width: 1250px){
+    margin-bottom: 0px;
+
  }
  }
 }
 .protection-text-margin {
+  font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: 0.24px;
+  color: #303a81;
+      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;
+      line-height: 27px;
+      margin-bottom: 20px;
+    }
+  }
  @media(min-width: 1250px){
    width: 740px;
    margin-bottom: 50px;
@@ -1287,6 +1339,10 @@ video {
  }
  @media (max-width: 576px) {
    margin-bottom: 35px;
+     font-size: 14px;
+  font-weight: 300;
+  letter-spacing: 0.14px;
+      line-height: 21px;
  }
 }
 .protection-text {
@@ -1308,17 +1364,17 @@ video {
 .protection-line {
  margin-bottom: 12px;
  @media (max-width: 576px) {
-    margin-top: 13px;
+    margin-top: 10px;
  }
 }
 /*catalog*/
 .catalog {
-  padding-top: 135px;
+  padding-top: 163px;
  @media (max-width: 992px) {
    padding-top: 65px
  }
  @media (max-width: 576px) {
-    padding-top: 55px
+    padding-top: 57px
  }
 }
 .catalog-container {
@@ -1486,7 +1542,7 @@ video {
  background-position: center;
  padding-top: 118px;
  padding-bottom: 113px;
-  margin-bottom: 103px;
+  margin-bottom: 114px;
  @media (max-width: 576px) {
    padding-top: 51px;
  }
@@ -1505,7 +1561,7 @@ video {
    margin-bottom: 40px;
  }
  @media (max-width: 576px) {
-    padding-top: 58px;
+    padding-top: 60px;
    padding-bottom: 35px;
    margin-bottom: 40px;
  }
@@ -1553,6 +1609,25 @@ video {
    margin-bottom: 5px;
  }
 }
+.technology-text {
+   font-family: SFUIDisplay-Light;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 27px;
+  letter-spacing: 0.24px;
+  color: #303a81;
+  margin-bottom: 32px;
+  @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: 10px;
+  }
+}
 .technology-card {
  width: 48%;
  text-align: left;
@@ -1885,7 +1960,7 @@ video {
  margin-left: 7px;
  width: 240px;
  height: 40px;
-  margin-top: 20px;
+  margin-top: 15px;
  background: #f9fbff;
  border: #c94d4e 1px solid;
  border-radius: 20px;
@@ -1944,7 +2019,7 @@ video {
  max-width: 650px;
  margin: 0 auto;
  padding-top: 12.7%;
-  padding-bottom: 14%;
+  padding-bottom: 211px;
  @media (max-width: 576px) {
    height: 560px;
    padding-top: 45px;
@@ -1955,8 +2030,8 @@ video {
    font-size: 60px;
    font-weight: 400;
    color: white;
-    letter-spacing: 0.6px;
-    margin-bottom: 20px;
+    letter-spacing: 0.9px;
+    margin-bottom: 25px;
    @media (max-width: 768px) {
      font-size: 50px;
    }
@@ -1975,7 +2050,7 @@ video {
    color: white;
    letter-spacing: 0;
    line-height: 30px;
-    margin-bottom: 27px;
+    margin-bottom: 55px;

    @media (max-width: 576px) {
      margin: 0 auto;

--- a/index.html
+++ b/index.html
@@ -479,7 +479,7 @@
        <h2 class="h2-desktop">Защита данных в облаке</h2>
        <div class="main-line protection-line">
        </div>
-        <p class="advertising-text protection-text-margin">
+        <p class="protection-text-margin">
            Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной
            или случайно гибели данных всех своих пользователей благодаря использованию
            персональной архитектуры и, как следствие, минимизации рисков.
@@ -614,7 +614,7 @@
        <h2 class="h2-desktop">Технологии</h2>
        <div class="main-line protection-line">
        </div>
-        <p class="catalog-tittle-text technology-p-margin">
+        <p class="technology-text technology-p-margin">
            На всех этапах разработки, адаптации и внедрения проекта команда использует
            только самые актуальные на сегодняшний день технологии, позволяющие
            клиенту не беспокоиться о будущем MSO.
@@ -1116,7 +1116,7 @@
            <div class="form-line">
            </div>
            <p>
-                Свяжитесь с нашим специалистом, <br>чтобы узнать, как быстро
+                Свяжитесь с нашим специалистом, чтобы узнать, как быстро
                и безболезненно для Вашего бизнеса повысить его эффективность!
            </p>
            <form>