add section technology (for desktop)

css/styles.css

@@ -651,4 +651,52 @@ header {
   }
 }
 /*technology*/
+.technology-container-wrapper {
+  display: flex;
+  width: 100%;
+}
+@media (max-width: 576px) {
+  .technology-container-wrapper {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+}
+.technology-containe {
+  width: 50%;
+  margin-top: 50px;
+  display: flex;
+}
+@media (max-width: 576px) {
+  .technology-containe {
+    justify-content: center;
+    width: 100%;
+  }
+}
+.technology-card {
+  width: 50%;
+  text-align: left;
+  padding-right: 80px;
+  height: 158px;
+  border: yellow 1px solid;
+}
+.technology-card p {
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+  color: #303a81;
+  letter-spacing: 0.16px;
+}
+@media (max-width: 576px) {
+  .technology-card img {
+    width: 142px;
+  }
+}
+@media (max-width: 576px) {
+  .technology-card {
+    padding-right: 0;
+  }
+}
+.technology-img {
+  height: 110px;
+}
 /*# sourceMappingURL=styles.css.map */
\ No newline at end of file

css/styles.less

@@ -524,5 +524,47 @@ header {
   }
 }
 /*technology*/
+.technology-container-wrapper {
+  display: flex;
+  width: 100%;
+   @media (max-width: 576px) {
+    flex-wrap: wrap;
+     justify-content: flex-start;
+  }
+}
+.technology-containe {
+  width: 50%;
+  margin-top: 50px;
+  display: flex;
+     @media (max-width: 576px) {
+     justify-content: center;
+       width: 100%;
+  }
+}
 
+.technology-card {
+  width: 50%;
+  text-align: left;
+  padding-right: 80px;
+  height: 158px;
+  border: yellow 1px solid;
+  p {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 24px;
+    color: #303a81;
+    letter-spacing: 0.16px;
+  }
+  img {
+     @media (max-width: 576px) {
+    width: 142px;
+  }
+  }
+  @media (max-width: 576px) {
+    padding-right: 0;
+  }
+}
+.technology-img {
+  height: 110px;
+}
 

index.html

@@ -511,6 +511,78 @@
             только самые актуальные на сегодняшний день технологии, позволяющие
             клиенту не беспокоиться о будущем MSO.
         </p>
+        <div class="technology-container-wrapper">
+            <div class="technology-containe">
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology1.png">
+                    </div>
+                    <p>
+                        Автоматизация развертывания
+и управления приложениями
+                    </p>
+                </div>
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology2.png">
+                    </div>
+                    <p>
+                        Удобный менеджер пакетов
+                    </p>
+                </div>
+            </div>
+            <div class="technology-containe">
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology3.png">
+                    </div>
+                    <p>
+                        Для выполнения JavaScript
+                    </p>
+                </div>
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology4.png">
+                    </div>
+                    <p>
+                        Для разработки веб-приложений
+                    </p>
+
+                </div>
+            </div>
+        </div>
+        <div class="technology-container-wrapper">
+        <div class="technology-containe">
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology5.png">
+                    </div>
+                    <p>
+                        Для управления кластерами
+виртуальных машин
+                    </p>
+                </div>
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology6.png">
+                    </div>
+                    <p>
+                        Для фронтенд разработок
+                    </p>
+                </div>
+            </div>
+            <div class="technology-containe">
+                <div class="technology-card">
+                    <div class="technology-img">
+                        <img src="img/technology7.png">
+                    </div>
+                    <p>
+                        В качестве менеджера
+зависимостей для PHP
+                    </p>
+                </div>
+            </div>
+        </div>
     </div>
 </section>
 <!--<section id="id_about_section">