Верстка блоков

css/styles.css

@@ -32,6 +32,9 @@
     }
   }
 }*/
+body {
+  box-sizing: border-box;
+}
 .main-flex-btn {
   display: flex;
   justify-content: center;
@@ -642,6 +645,7 @@ header {
   background-position: center;
   padding-top: 140px;
   padding-bottom: 115px;
+  margin-bottom: 148px;
 }
 @media (max-width: 576px) {
   .technology {
@@ -697,4 +701,59 @@ header {
 .technology-img {
   height: 110px;
 }
+/*price*/
+.price-wrapper {
+  display: flex;
+}
+.price-container {
+  width: 288px;
+  height: 896px;
+  margin-top: 15px;
+  padding: 132px 16px 32px 16px;
+  /*background: #f9fbff;*/
+  background: yellow;
+  border: #e6effa 1px solid;
+  border-radius: 4px;
+}
+.price {
+  text-align: center;
+  width: 75px;
+  height: 53px;
+  margin: 0 auto;
+  margin-bottom: 16px;
+  border-bottom: #c94d4e 1px solid;
+}
+.price p {
+  font-size: 60px;
+  color: #303a81;
+}
+.price span {
+  font-size: 30px;
+}
+.price-line {
+  display: inline-block;
+  width: 256px;
+  height: 45px;
+  border-bottom: red 1px solid;
+}
+.price-line p {
+  font-size: 16px;
+  font-weight: 300;
+  letter-spacing: 0;
+  line-height: 52px;
+}
+.price-line span {
+  margin-left: 20px;
+  color: #c94d4e;
+}
+.price-point {
+  background: red;
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-top: 17px;
+  font-size: 30px;
+  float: left;
+}
 /*# sourceMappingURL=styles.css.map */
\ No newline at end of file

css/styles.less

@@ -33,6 +33,9 @@
     }
   }
 }*/
+body {
+  box-sizing: border-box;
+}
 .main-flex-btn {
   display: flex;
   justify-content: center;
@@ -521,6 +524,8 @@ header {
   background-position: center;
   padding-top: 140px;
   padding-bottom: 115px;
+      margin-bottom: 148px;
+
   @media (max-width: 576px) {
     padding-top: 51px;
   }
@@ -568,4 +573,60 @@ header {
 .technology-img {
   height: 110px;
 }
+/*price*/
+.price-wrapper {
+  display: flex;
+}
+.price-container {
+  width: 288px;
+  height: 896px;
+  margin-top: 15px;
+  padding: 132px 16px 32px 16px;
+  /*background: #f9fbff;*/
+  background: yellow;
+  border: #e6effa 1px solid;
+  border-radius: 4px;
+}
+.price {
+  text-align: center;
+  width: 75px;
+  height: 53px;
+  margin: 0 auto;
+  margin-bottom: 16px;
+  border-bottom: #c94d4e 1px solid;
+  p {
+    font-size: 60px;
+    color: #303a81;
+  }
+  span {
+    font-size: 30px;
+  }
+}
+.price-line {
+  display: inline-block;
+  width: 256px;
+  height: 45px;
+  border-bottom: red 1px solid;
+  p {
+    font-size: 16px;
+    font-weight: 300;
+    letter-spacing: 0;
+    line-height: 52px;
+  }
+  span {
+    margin-left: 20px;
+    color: #c94d4e;
+  }
+}
+.price-point {
+  background: red;
+  height: 5px;
+  width: 5px;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-top: 17px;
+  font-size: 30px;
+  float: left;
+
+}
 

index.html

@@ -585,6 +585,28 @@
         </div>
     </div>
 </section>
+<section class="main-container">
+    <h2 class="h2-desktop">Цены</h2>
+        <div class="main-line">
+        </div>
+    <div class="price-wrapper">
+        <div class="price-container">
+            <div class="price">
+                <p>0<span>&#8381</span></p>
+            </div>
+            <div class="price-line">
+                <div class="price-point">
+                </div>
+                <p>Объём данных<span>1 Гбайт</span></p>
+            </div>
+            <div class="price-line">
+                <div class="price-point">
+                </div>
+                <p>Объём данных<span>1 Гбайт</span></p>
+            </div>
+        </div>
+    </div>
+</section>
 <!--<section id="id_about_section">
     <div class="section-header">
         <h3>Что такое MySmart Office</h3>