From 251436500c377b8c108827c8259b307362dc5748 Mon Sep 17 00:00:00 2001
From: "Bartlomiej Pluta (PGS Software)" <bpluta@pgs-soft.com>
Date: Mon, 9 Apr 2018 12:13:36 +0200
Subject: [PATCH] Create newsletter section

---
 src/index.html            | 18 +++++++++++++++++-
 src/scss/_buttons.scss    |  5 +++++
 src/scss/_form.scss       | 29 +++++++++++++++++++++++++++++
 src/scss/_newsletter.scss | 15 +++++++++++++++
 src/scss/_pricing.scss    |  1 +
 src/scss/_variables.scss  |  1 +
 src/scss/style.scss       |  4 +++-
 7 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/_form.scss
 create mode 100644 src/scss/_newsletter.scss

diff --git a/src/index.html b/src/index.html
index 683ece3..4e5e505 100644
--- a/src/index.html
+++ b/src/index.html
@@ -381,7 +381,8 @@
                     <p class="pricing__footer">
                         Duis lobortis arcu sed arcu tincidunt feugiat. Nulla nisi mauris, facilisis vitae aliquet id,
                         imperdiet quis
-                        nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque penatibus
+                        nibh. Donec eget elit eu libero tincidunt consequat nec elementum orci. Cum sociis natoque
+                        penatibus
                         et
                         magnis dis parturient montes, nascetur ridiculus mus.
                     </p>
@@ -389,6 +390,21 @@
             </div>
         </div>
     </section>
+    <section class="newsletter">
+        <div class="container">
+            <div class="row justify-content-between">
+                <div class="col-6 newsletter__title">
+                    Subscribe to our newsletter
+                </div>
+                <div class="col-6 oneline__form">
+                    <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
+                    <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
+                            type="submit">Subscribe
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
 </div>
 
 <!-- JavaScript -->
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
index d185075..6c20184 100644
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -25,6 +25,11 @@
     font-size: 21px;
     padding: 15px 60px;
   }
+
+  &--uppercase {
+    text-transform: uppercase;
+    font-weight: 500;
+  }
 }
 
 .rect-button {
diff --git a/src/scss/_form.scss b/src/scss/_form.scss
new file mode 100644
index 0000000..6115c23
--- /dev/null
+++ b/src/scss/_form.scss
@@ -0,0 +1,29 @@
+.textfield {
+  padding: 7px 25px;
+  border: none;
+  border-radius: 30px;
+  background-color: white;
+  color: $regular-text;
+
+  &::placeholder {
+    font-family: Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    color: $gray-text;
+  }
+}
+
+.oneline__form {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+}
+
+.oneline__form__component--growing {
+  width: 100%;
+  margin: 0 20px;
+}
+
+.oneline__form__component--fixed {
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/scss/_newsletter.scss b/src/scss/_newsletter.scss
new file mode 100644
index 0000000..733d2be
--- /dev/null
+++ b/src/scss/_newsletter.scss
@@ -0,0 +1,15 @@
+.newsletter {
+  padding: 55px 0;
+  background-color: #f4f4f4;
+}
+
+.newsletter__title {
+  display: flex;
+  align-items: center;
+  font-family: Montserrat, sans-serif;
+  font-weight: bold;
+  font-size: 30px;
+  color: $primary-dark;
+  text-transform: capitalize;
+}
+
diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss
index 01cb7eb..2686207 100644
--- a/src/scss/_pricing.scss
+++ b/src/scss/_pricing.scss
@@ -1,6 +1,7 @@
 .pricing {
   background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
   padding-top: 90px;
+  padding-bottom: 75px;
 }
 
 .pricing__title {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ee743e1..72ae24f 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -4,6 +4,7 @@ $primary-light: #a599c8;
 $regular-text: #848e97;
 $dark-text: #323232;
 $light-text: #a291a5;
+$gray-text: #c8cbcf;
 
 $background-light: #f4f4f4;
 $background-violet: #4a3b4e;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 93cc2f7..25faa18 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -11,4 +11,6 @@
 @import "reviews";
 @import "social";
 @import "testimonials";
-@import "pricing";
\ No newline at end of file
+@import "pricing";
+@import "newsletter";
+@import "form";
\ No newline at end of file