Added section discount

index.html

@@ -291,11 +291,84 @@
                 и скидки для наших клиентов
             </h2>
             <div class="container">
-                <div class="row">
+                <div class="row wrap-discount">
-
+                    <div class="col-md-3 col-sm-6">
+                        <div class="wrap-discount__item">
+                            <div class="discount-item__img">
+                                <div class="discount-img">
+                                    <span>10%</span>
+                                </div>
+                            </div>
+                            <div class="discount-item__description">
+                                <p>
+                                    Дополнительная скидка 10%<br>
+                                    на вторую запчасть<br>
+                                    и любые последующие<br>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-sm-6">
+                        <div class="wrap-discount__item">
+                            <div class="discount-item__img">
+                                <div class="discount-img">
+                                    <span>20%</span>
+                                </div>
+                            </div>
+                            <div class="discount-item__description">
+                                <p>
+                                    Скидка 20% при заключении<br>
+                                    договора на годовое<br>
+                                    сервисное обслуживание<br>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-sm-6">
+                        <div class="wrap-discount__item">
+                            <div class="discount-item__img">
+                                <div class="discount-img">
+                                    <img src="./src/img/main-discount/delivery-truck.png" alt="#">
+                                </div>
+                            </div>
+                            <div class="discount-item__description">
+                                <p>
+                                    Бесплатная доставка<br>
+                                    по всей России<br>
+                                    для всех клиентов<br>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-sm-6">
+                        <div class="wrap-discount__item">
+                            <div class="discount-item__img">
+                                <div class="discount-img">
+                                    <img src="./src/img/main-discount/telemarketer.png" alt="#">
+                                </div>
+                            </div>
+                            <div class="discount-item__description">
+                                <p>
+                                    Бесплатная круглосуточная<br>
+                                    техническая поддержка<br>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
+        <section id="working">
+            <h2>С нами удобно работать!</h2>
+            <div class="title-description">
+                <p>
+                    Более 70% клиентов приходят к нам по рекомендации!
+                </p>
+            </div>
+            <div class="container">
+
+            </div>
+        </section>
     </main>
     <!-- Index Js -->
     <script src="./src/js/index.js"></script>

src/styles/media.css

@@ -9,7 +9,9 @@
     #price h2 {
         text-align: center;
     }
-    #guarantees .guarantees-card__desctiption p br {
+
+    #guarantees .guarantees-card__desctiption p br,
+    #discount .discount-item__description p br {
         display: none;
     }
 }
@@ -43,14 +45,17 @@
         text-align: center;
     }
 }
-@media (max-width: 768px){
+
+@media (max-width: 768px) {
     #guarantees .wrap-guarantees__card {
         margin-top: 25px;
     }
+
     #guarantees .guarantees-card__desctiption {
         margin-top: 20px;
     }
 }
+
 @media (max-width: 630px) {
     #price .form-price__input {
         flex-direction: column;

src/styles/style.css

@@ -68,6 +68,7 @@ a {
 button {
     outline: none;
 }
+
 input {
     height: 70px;
     border: none;
@@ -267,11 +268,13 @@ header {
     width: 370px;
     margin-left: 30px;
 }
+
 .form-price__input input:nth-child(1) {
     background-image: url(../img/main-price/email-icon.png);
     background-repeat: no-repeat;
     background-position: center right 30px;
 }
+
 .form-price__input input:nth-child(2) {
     background-image: url(../img/main-price/phone-icon.png);
     background-repeat: no-repeat;
@@ -352,6 +355,7 @@ header {
 .advantages-card__img {
     height: 100px;
 }
+
 /* Section Detail */
 #detail {
     min-height: 580px;
@@ -359,19 +363,26 @@ header {
     background: url(../img/main-detail/main-detail__background.jpg) no-repeat center center;
     background-size: cover;
 }
-#detail h2, .title-description p {
+
+#detail h2,
+.title-description p {
     color: #fff;
 }
+
 #detail .title-description {
     margin-top: 30px;
 }
+
 .wrap-detail {
     margin-top: 60px;
 }
-.wrap-detail input, .wrap-detail button {
+
+.wrap-detail input,
+.wrap-detail button {
     width: 100%;
 }
-.wrap-detail .col-lg-4:nth-child(2) .wrap-detail__input input{
+
+.wrap-detail .col-lg-4:nth-child(2) .wrap-detail__input input {
     background-image: url(../img/main-price/phone-icon.png);
     background-repeat: no-repeat;
     background-position: center right 30px;
@@ -394,64 +405,139 @@ header {
     border: 2px solid #f7b516;
     color: #fff;
 }
+
 .detail-description {
     text-align: center;
     color: #fff;
     margin-top: 57px;
 }
+
 .detail-desciption__number {
     margin-top: 30px;
 }
+
 .detail-desciption__number p span {
     font-family: 'ProximaNovaExtraBold';
     font-size: 32px;
     display: block;
     margin-top: 10px;
 }
-.wrap-detail__input, .wrap-detail__button {
+
+.wrap-detail__input,
+.wrap-detail__button {
     margin-top: 15px;
 }
+
 /* Section Guarantees */
 #guarantees {
     padding-top: 100px;
     padding-bottom: 100px;
     background-color: #fff;
 }
+
 .wrap-guarantees {
     margin-top: 100px;
 }
+
 .wrap-guarantees__card {
     text-align: center;
 }
+
 .guarantees-card__img {
     height: 300px;
 }
+
 .wrap-guarantees .col-md-4:nth-child(1) .wrap-guarantees__card .guarantees-card__img img {
     background-color: #e1e1e1;
     padding: 15px;
     height: 300px;
     width: 230px;
 }
+
 .guarantees-card__desctiption {
     margin-top: 35px;
     font-family: 'ProximaNovaRegular';
 }
+
 .guarantees-card__link {
     text-transform: uppercase;
     margin-top: 25px;
 }
+
 .guarantees-card__link a {
     border-bottom: 1px solid #000;
     font-family: 'ProximaNovaBold';
 }
-/* #info, #price, #advantages, #detail, #guarantees {
+
-    display: none;
-} */
 /* Section Discount */
 #discount {
     padding-top: 100px;
+    padding-bottom: 100px;
     background-color: #08243e;
 }
+
 #discount h2 {
     color: #fff;
 }
+
+.wrap-discount {
+    margin-top: 100px;
+}
+
+.wrap-discount__item {
+    text-align: center;
+    margin-top: 25px;
+}
+
+.discount-item__img {
+    display: flex;
+    justify-content: center;
+}
+
+.discount-img {
+    height: 100px;
+    width: 100px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+}
+
+.discount-img span {
+    align-self: center;
+    color: #fff;
+    font-family: 'ProximaNovaExtraBold';
+    font-size: 24px;
+}
+
+.discount-img img {
+    align-self: center;
+}
+
+.discount-item__description {
+    color: #fff;
+    margin-top: 35px;
+}
+
+#info,
+#price,
+#advantages,
+#detail,
+#guarantees,
+#discount {
+    display: none;
+}
+
+/* Section Working */
+#working {
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+
+#working .title-description p {
+    color: #000;
+}
+
+#working .title-description {
+    margin-top: 25px;
+}