Added Section Advantages

index.html

@@ -121,6 +121,69 @@
                 </div>
             </div>
         </section>
+        <section id="advantages">
+            <div class="container">
+                <h2>Вам не придется ждать!</h2>
+                <div class="title-desctiprion">
+                    <p>
+                        Любые запчасти для всех моделей Белаз<br>
+                        всегда в наличии!
+                    </p>
+                </div>
+                <div class="row wrap-advantages">
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="wrap-advantages__card">
+                            <div class="advantages-card__img">
+                                <img src="./src/img/main-advantages/icon-1.png" alt="#">
+                            </div>
+                            <div class="advantages-card__description">
+                                <p>
+                                    Все модификации Белаз<br>
+                                    от 45т до 450 т
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="wrap-advantages__card">
+                            <div class="advantages-card__img">
+                                <img src="./src/img/main-advantages/icon-2.png" alt="#">
+                            </div>
+                            <div class="advantages-card__description">
+                                <p>
+                                    Отгружаем в день заказа!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="wrap-advantages__card">
+                            <div class="advantages-card__img">
+                                <img src="./src/img/main-advantages/icon-3.png" alt="#">
+                            </div>
+                            <div class="advantages-card__description">
+                                <p>
+                                    Любые типы деталей<br>
+                                    от шайбы до двигателя!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-3 col-sm-6">
+                        <div class="wrap-advantages__card">
+                            <div class="advantages-card__img">
+                                <img src="./src/img/main-advantages/icon-4.png" alt="#">
+                            </div>
+                            <div class="advantages-card__description">
+                                <p>
+                                    Доставим в любое место!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </main>
     <!-- Index Js -->
     <script src="./src/js/index.js"></script>

src/styles/media.css

@@ -1,15 +1,21 @@
 @media (max-width: 991px) {
-    #price .form-price__input input, #price .form-price__submit button, #price .form-submit__description  {
+
+    #price .form-price__input input,
+    #price .form-price__submit button,
+    #price .form-submit__description {
         width: 440px;
     }
+
     #price h2 {
         text-align: center;
     }
 }
+
 @media (max-width: 880px) {
     header .header-wrap {
         flex-direction: column;
     }
+
     header .header-wrap__info p {
         display: block;
         text-align: center;
@@ -17,65 +23,80 @@
         margin-bottom: 15px;
         margin-top: 15px;
     }
+
     header .header-wrap__info {
         display: flex;
         justify-content: center;
         flex-direction: column;
         align-items: center;
     }
+
     header .header-wrap__opening {
         order: 1;
         margin-top: 15px;
     }
+
     header .header-wrap__logo {
         text-align: center;
     }
 }
+
 @media (max-width: 630px) {
     #price .form-price__input {
         flex-direction: column;
     }
+
     #price .form-price__input input {
         margin-left: 0px;
         margin-top: 15px;
         width: 100%;
     }
+
     #price .form-price__submit {
         flex-direction: column;
     }
+
     #price .form-submit__description {
         width: 100%;
         text-align: center;
     }
+
     #price .form-price__submit button {
         width: 100%;
         margin: 0;
         margin-top: 30px;
     }
 }
+
 @media (max-width: 576px) {
     #info .info-wrap__card {
         padding-left: 50px;
     }
+
     #info .info-card__title h1 {
         font-size: 32px;
     }
+
     #info .info-card__description p {
         font-size: 18px;
     }
+
     #info .info-advantages__item p {
         font-size: 16px;
     }
-    .no-gutter > [class*='col-'] {
+
-        padding-right:0;
+    .no-gutter>[class*='col-'] {
-        padding-left:0;
+        padding-right: 0;
+        padding-left: 0;
     }
 }
+
 @media (max-width: 400px) {
     #info .info-wrap__card {
         padding-left: 25px;
     }
 }
+
 @media (max-width: 360px) {
     #info .info-card__title h1 {
         font-size: 29px;

src/styles/style.css

@@ -7,6 +7,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'ProximaNovaBold';
     src: url('../fonts/ProximaNova-Bold.eot');
@@ -15,7 +16,7 @@
         url('../fonts/ProximaNova-Bold.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: 'ProximaNovaBlack';
@@ -26,6 +27,7 @@
     font-weight: normal;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'ProximaNovaExtraBold';
     src: url('../fonts/ProximaNova-Extrabld.eot');
@@ -34,7 +36,7 @@
         url('../fonts/ProximaNova-Extrabld.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
-    }
+}
 
 h1,
 h2,
@@ -46,11 +48,13 @@ p {
     margin: 0;
     padding: 0;
 }
+
 h2 {
     font-family: 'ProximaNovaBlack';
     text-align: center;
-    font-size: 26px;
+    font-size: 29px;
 }
+
 body {
     font-family: 'ProximaNovaRegular';
     margin: 0;
@@ -63,6 +67,12 @@ button {
 .container {
     max-width: 1170px;
 }
+
+.title-desctiprion {
+    text-align: center;
+    margin-top: 35px;
+}
+
 /* Section Header */
 header {
     padding-top: 25px;
@@ -70,30 +80,39 @@ header {
     background-color: #191919;
     color: #fff;
 }
+
 .header-wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
-.header-wrap__logo, .header-wrap__opening, .header-wrap__info {
+
+.header-wrap__logo,
+.header-wrap__opening,
+.header-wrap__info {
     width: 370px;
 }
+
 .header-wrap__opening {
     width: 150px;
 }
+
 .header-wrap__opening p {
     font-size: 13px;
     line-height: 23px;
     font-family: 'ProximaNovaBold';
     text-align: center;
 }
+
 .header-wrap__opening p span {
     font-family: 'ProximaNovaRegular';
     font-size: 12px;
 }
+
 .header-wrap__info {
     text-align: right;
 }
+
 .header-wrap__info button {
     width: 170px;
     cursor: pointer;
@@ -107,10 +126,12 @@ header {
     vertical-align: top;
     height: 50px;
 }
+
 .header-wrap__info button:hover {
     background: none;
     border: 2px solid #1669b3;
 }
+
 .header-wrap__info p {
     display: inline-block;
     text-align: right;
@@ -119,12 +140,14 @@ header {
     position: relative;
     right: 28px;
 }
+
 /* Section Maon-info */
 #info {
     min-height: 860px;
     background: url(../img/main-info/main-info__background.jpg) no-repeat center center;
     background-size: cover;
 }
+
 .info-wrap__card {
     background-color: #f7b516;
     color: #000000;
@@ -132,28 +155,34 @@ header {
     padding-top: 100px;
     padding-left: 100px;
 }
+
 .info-card__title h1 {
     text-transform: uppercase;
     font-family: 'ProximaNovaBlack';
     font-size: 38px;
 }
+
 .info-card__description p {
     font-family: 'ProximaNovaExtraBold';
     margin-top: 47px;
     font-size: 24px;
 }
+
 .info-card__advantages {
     margin-top: 100px;
     font-family: 'ProximaNovaRegular';
 }
+
 .info-advantages__item {
     margin-top: 45px;
 }
+
 .info-advantages__item p {
     padding-left: 15px;
     display: inline-block;
     font-size: 18px;
 }
+
 .info-advantages__item:nth-child(1)::before {
     content: '';
     display: inline-block;
@@ -163,6 +192,7 @@ header {
     bottom: 4px;
     background: url(../img/main-info/icon-1.png) no-repeat center center;
 }
+
 .info-advantages__item:nth-child(2)::before {
     content: '';
     display: inline-block;
@@ -172,6 +202,7 @@ header {
     bottom: 4px;
     background: url(../img/main-info/icon-2.png) no-repeat center center;
 }
+
 .info-advantages__item:nth-child(3)::before {
     content: '';
     display: inline-block;
@@ -181,6 +212,7 @@ header {
     bottom: 4px;
     background: url(../img/main-info/icon-3.png) no-repeat center center;
 }
+
 .info-advantages__item:nth-child(4)::before {
     content: '';
     display: inline-block;
@@ -190,6 +222,7 @@ header {
     bottom: 4px;
     background: url(../img/main-info/icon-4.png) no-repeat center center;
 }
+
 /* Section Main-price */
 #price {
     min-height: 500px;
@@ -198,19 +231,24 @@ header {
     padding-top: 100px;
     padding-bottom: 100px;
 }
+
 #price h2 {
     text-align: right;
 }
+
 .wrap-price {
     margin-top: 60px;
 }
-.form-price__input{
+
+.form-price__input {
     display: flex;
     justify-content: space-between;
 }
+
 .form-price__input input:nth-child(1) {
     margin-left: 0px;
 }
+
 .form-price__input input {
     width: 370px;
     margin-left: 30px;
@@ -222,17 +260,20 @@ header {
     font-family: 'ProximaNovaRegular';
     text-transform: uppercase;
 }
+
 .form-price__submit {
     margin-top: 30px;
     display: flex;
     justify-content: space-between;
 }
+
 .form-price__submit p {
     text-align: right;
     padding-top: 27px;
     display: inline-block;
     padding-right: 30px;
 }
+
 .form-price__submit button {
     width: 360px;
     margin-left: 30px;
@@ -245,15 +286,18 @@ header {
     cursor: pointer;
     transition: all .2s;
 }
+
 .form-price__submit button:hover {
     background: none;
     border: 2px solid #1866af;
     color: #000;
 }
+
 .form-submit__description {
     width: 360px;
     text-align: right;
 }
+
 .form-submit__description::after {
     content: '';
     display: inline-block;
@@ -261,3 +305,32 @@ header {
     height: 30px;
     background: url(../img/main-price/clock-icon.png) no-repeat center center;
 }
+
+/* Section Advantages */
+#advantages {
+    background-color: #08243e;
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+
+#advantages h2,
+#advantages p {
+    color: #fff;
+}
+
+.wrap-advantages {
+    margin-top: 100px;
+}
+
+.wrap-advantages__card {
+    text-align: center;
+    margin-top: 25px;
+}
+
+.advantages-card__description {
+    margin-top: 50px;
+}
+
+.advantages-card__img {
+    height: 100px;
+}