add img too main-card

css/styles.css

@@ -147,6 +147,7 @@ header {
 @media (max-width: 576px) {
   .header-nav {
     display: none;
+    left: 5px;
     width: 50px;
   }
 }
@@ -328,6 +329,16 @@ h1 {
   display: flex;
   justify-content: space-between;
 }
+.header-video {
+  position: relative;
+}
+@media (max-width: 576px) {
+  .header-video {
+    display: none;
+    width: 150px;
+    left: 5px;
+  }
+}
 video {
   width: 100%;
   height: 70%;
@@ -343,6 +354,12 @@ video {
     margin-left: 25px;
   }
 }
+@media (max-width: 576px) {
+  video {
+    width: 20%;
+    height: 20%;
+  }
+}
 .main-container {
   position: relative;
   max-width: 1250px;
@@ -700,11 +717,11 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-img-order {
-    min-width: 320px;
+    min-width: 300px;
     order: 5;
   }
   .advertising-img-order img {
-    min-width: 320px;
+    min-width: 300px;
     margin-left: -25px;
   }
 }
@@ -746,7 +763,7 @@ video {
 }
 @media (max-width: 576px) {
   .advertising-img {
-    min-width: 320px;
+    min-width: 300px;
   }
   .advertising-img img {
     min-width: 320px;

css/styles.less

@@ -127,6 +127,7 @@ header {
   }
   @media (max-width: 576px) {
     display: none;
+    left: 5px;
     width: 50px;
   }
 }
@@ -141,7 +142,7 @@ header {
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 0.14px;
-    font-family: SFUIDisplay-Regular;
+     font-family: SFUIDisplay-Regular;
     @media (max-width: 992px) {
       font-size: 12px;
     }
@@ -284,6 +285,14 @@ h1 {
   display: flex;
   justify-content: space-between;
 }
+.header-video {
+  position: relative;
+  @media (max-width:  576px) {
+    display: none;
+    width: 150px;
+    left: 5px;
+  }
+}
 video {
   width: 100%;
   height: 70%;
@@ -296,6 +305,10 @@ video {
     margin-top: 50px;
     margin-left: 25px;
   }
+  @media (max-width: 576px) {
+    width: 20%;
+    height: 20%;
+  }
 }
 .main-container {
   position: relative;
@@ -575,10 +588,10 @@ video {
 }
 .advertising-img-order {
   @media (max-width: 576px) {
-    min-width: 320px;
+    min-width: 300px;
     order: 5;
     img {
-      min-width: 320px;
+      min-width: 300px;
       margin-left: -25px;
     }
   }
@@ -617,7 +630,7 @@ video {
     }
   }
   @media (max-width: 576px) {
-    min-width: 320px;
+    min-width: 300px;
     img {
       min-width: 320px;
       margin-left: -25px;

index.html

@@ -71,7 +71,7 @@
                     <button type="button" class="header-btn-background header-btn">Узнать больше</button>
                 </div>
 
-                <div>
+                <div class="header-video">
                     <video controls="controls" poster="img/video.png">
                         <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
                         <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
@@ -91,6 +91,7 @@
 </header>
 
 
+
 <section class="main-container">
     <h2 class="h2-desktop h2-desktop-tittle">Что такое MySmart Office</h2>
     <div class="main-line">
@@ -118,7 +119,7 @@
                 <img src="img/office2.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Маркетинг</h3>
                 <p class="text-h3-desktop">
                     Адаптируйте свои предложения под запросы
                     клиентов.
@@ -130,9 +131,11 @@
                 <img src="img/office3.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">BI аналитика</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Регулярно анализируйте, делайте выводы
+                    и прогнозируйте результаты управленческих
+                    решений любого уровня.
                 </p>
             </div>
         </div>
@@ -140,21 +143,21 @@
     <div class="main-flex">
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office1.png">
+                <img src="img/office4.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Call-center</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Быстро организуйте свою телефонию.
                 </p>
             </div>
         </div>
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office1.png">
+                <img src="img/office5.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">POS</h3>
                 <p class="text-h3-desktop">
                     Все продажи вашего магазина быстро доступны
                     у вас в системе.
@@ -163,12 +166,13 @@
         </div>
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office4.png">
+                <img src="img/office6.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Project Managment</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Управляйте проектами, задачами
+                    и ресурсами.
                 </p>
             </div>
         </div>
@@ -176,21 +180,22 @@
     <div class="main-flex">
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office5.png">
+                <img src="img/office7.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Склад</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Управляйте складскими резервами, избавляйтесь
+                    от неликвидов, оптимизируйте запасы.
                 </p>
             </div>
         </div>
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office6.png">
+                <img src="img/office8.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">HR</h3>
                 <p class="text-h3-desktop">
                     Подбор, прием и работа с персоналом
                     сильно упрощается.
@@ -199,12 +204,14 @@
         </div>
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office7.png">
+                <img src="img/office9.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Mobile</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Сохраняйте мобильность свою и команды. Будьте
+                    доступны и открыты для новых возможностей,
+                    не теряя контроль.
                 </p>
             </div>
         </div>
@@ -215,9 +222,10 @@
                 <img src="img/office8.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Сервис для клиентов</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Удерживайте клиента, создавайте комфортное
+                    взаимодействие и опережайте его желания
                 </p>
             </div>
         </div>
@@ -226,7 +234,7 @@
                 <img src="img/office13.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Логистика</h3>
                 <p class="text-h3-desktop">
                     Адаптируйте существующие и создавайте
                     новые логистические цепочки для повышения
@@ -236,12 +244,13 @@
         </div>
         <div class="main-card">
             <div class="main-img">
-                <img src="img/office10.png">
+                <img src="img/office12.png">
             </div>
             <div class="main-card-text">
-                <h3 class="h3-desktop">Продажи</h3>
+                <h3 class="h3-desktop">Производство</h3>
                 <p class="text-h3-desktop">
-                    Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
+                    Контролируйте все этапы, качество и стоимость
+                    каждой заготовки своего продукта.
                 </p>
             </div>
         </div>
@@ -417,7 +426,8 @@
             </div>
             <h4>Cloud</h4>
             <div class="option-text">
-                <p>Быстрый и менее затратный вариант развертывания
+                <p>
+                    Быстрый и менее затратный вариант развертывания
                     системы с использованием облачных технологий.
                 </p>
             </div>
@@ -431,7 +441,8 @@
             </div>
             <h4>Cloud</h4>
             <div class="option-text">
-                <p>Быстрый и менее затратный вариант развертывания
+                <p>
+                    Быстрый и менее затратный вариант развертывания
                     системы с использованием облачных технологий.
                 </p>
             </div>