From 51707b65542779f409d968d6b34077b2d9a18a8f Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sat, 31 Aug 2019 16:14:31 +0300
Subject: [PATCH] Added section Price

---
 index.html                        |  39 +++++++++++++---
 src/img/main-price/clock-icon.png | Bin 0 -> 647 bytes
 src/styles/media.css              |  30 +++++++++++++
 src/styles/style.css              |  71 +++++++++++++++++++++++++++++-
 4 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 src/img/main-price/clock-icon.png

diff --git a/index.html b/index.html
index 93a6fac..438032a 100644
--- a/index.html
+++ b/index.html
@@ -68,20 +68,20 @@
                                     </div>
                                     <div class="info-advantages__item">
                                         <p>
-                                                Срочная бесплатная доставка<br>
-                                                за 7 дней
+                                            Срочная бесплатная доставка<br>
+                                            за 7 дней
                                         </p>
                                     </div>
                                     <div class="info-advantages__item">
                                         <p>
-                                                Даем рассрочку<br>
-                                                6 месяцев                                                  
+                                            Даем рассрочку<br>
+                                            6 месяцев
                                         </p>
                                     </div>
                                     <div class="info-advantages__item">
                                         <p>
-                                                Даем гарантию<br>
-                                                от 12 месяцев                                                 
+                                            Даем гарантию<br>
+                                            от 12 месяцев
                                         </p>
                                     </div>
                                 </div>
@@ -93,7 +93,32 @@
         </section>
         <section id="price">
             <div class="container">
-                
+                <h2>Получите прайс прямо сейчас<br>
+                    на электронную почту!
+                </h2>
+                <div class="row">
+                    <div class="col-lg-8 offset-lg-4">
+                        <div class="wrap-price">
+                            <div class="wrap-price__form">
+                                <form action="#">
+                                    <div class="form-price__input">
+                                        <input required placeholder="Введите ваш e-mail" type="text">
+                                        <input required placeholder="Введите ваш телефон" type="text">
+                                    </div>
+                                    <div class="form-price__submit">
+                                        <div class="form-submit__description">
+                                            <p>
+                                                Прайс придет к Вам на почту<br>
+                                                в течение 5 минут!
+                                            </p>
+                                        </div>
+                                        <button type="submit">Получить прайс</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </section>
     </main>
diff --git a/src/img/main-price/clock-icon.png b/src/img/main-price/clock-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f02e5574dc9bcf325535565316ac65c8e7f19fad
GIT binary patch
literal 647
zcmV;20(kw2P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0006`Nkl<ZNQu3d
z-)qfr7{_0}&F`NjEh!f($^~+#UC_#GgbZ6Krb+S-m|RGWDHdxNLUExaa)}$tZdPt&
zGZ!+&iY1wt7LlfBy}$Kz+BxU*`R<(au20|2^Ld{4`}v&D_wziT?+n7R4X6h;0IPv&
zz~a9EL%>VmDexHh7r{Fv<^rdIVPGO~d;-n_i?WI~i6j;L3fu(RfLdUU#zvqOxDI^I
z@jnnN+T{q|iFkHETorH-c<th^hKk;DL6?CfHf!O$<GEMN*{`%UqoBt=$9E&2Q-gCl
zR07cyyB%*!?xgL_m?nDy$m)P|z~Vsh4srhl=KG10n)nz<^g{k^f&PZKin-v8qcZLf
zB<Yp^i3s6F#ry(hnPIC8-y=w#DCTHHjA2A^&306F%J?9XBn$2;W=EphYj{=x;a)x0
zB`WxaHyMaVBK?Q-tg&OXOh3jV2-0e{ON}H^r~2Xce=7WxZL)!+hkI3o@T&rys!+vS
zk@{8XC@lpRMhIU5jsY{B%~m|FzMKyWWS?AlpR$N<VHvPpS_8H>1B%~V0pU%04&t&H
zt$^^b|92C;jb_+WM$tNH`~l{q#xpX$FQf3FG_H7~W$;@Q7t0{p?vC4%+{q?4xwnL(
z^^W&QKBsHWsksEAjgIe5G3WcvxnmllryS3t&>+9^eqGu^VfFjDi@zP4@nKyKCfpm}
zt^HpQtkhVm3tgAH-lR8;<FTSCtcG_2-y%L?tjk#v%L@^QezeWgO=XK#Tce~5medE8
hUi)Z!ShU3g{{jC?yq(+36<7cO002ovPDHLkV1g_WHsAmN

literal 0
HcmV?d00001

diff --git a/src/styles/media.css b/src/styles/media.css
index dbc5e52..7dbf674 100644
--- a/src/styles/media.css
+++ b/src/styles/media.css
@@ -1,3 +1,11 @@
+@media (max-width: 991px) {
+    #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;
@@ -23,6 +31,28 @@
         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;
diff --git a/src/styles/style.css b/src/styles/style.css
index 1f6d582..1575123 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -46,7 +46,11 @@ p {
     margin: 0;
     padding: 0;
 }
-
+h2 {
+    font-family: 'ProximaNovaBlack';
+    text-align: center;
+    font-size: 26px;
+}
 body {
     font-family: 'ProximaNovaRegular';
     margin: 0;
@@ -193,4 +197,67 @@ header {
     background-size: cover;
     padding-top: 100px;
     padding-bottom: 100px;
-}
\ No newline at end of file
+}
+#price h2 {
+    text-align: right;
+}
+.wrap-price {
+    margin-top: 60px;
+}
+.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;
+    height: 70px;
+    border: none;
+    background-color: #f2f2f2;
+    outline: none;
+    padding-left: 30px;
+    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;
+    background-color: #1866af;
+    border: none;
+    text-transform: uppercase;
+    color: #fff;
+    height: 80px;
+    font-family: 'ProximaNovaBold';
+    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;
+    width: 30px;
+    height: 30px;
+    background: url(../img/main-price/clock-icon.png) no-repeat center center;
+}