Create newsletter section

Pricing

src/index.html

@@ -323,6 +323,88 @@
             </div>
         </div>
     </section>
+    <section class="pricing">
+        <p class="pricing__title">Fork Subscription Pricing</p>
+        <div class="container">
+            <div class="row">
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Students</p>
+                        <p class="price__value">$29</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Personal License</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Professional</p>
+                        <p class="price__value">$59</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Professional License<br/>Email Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Agency</p>
+                        <p class="price__value">$99</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">1-12 Team Members<br/>Phone Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <div class="price">
+                        <p class="price__title">Enterprise</p>
+                        <p class="price__value">$159</p>
+                        <p class="price__period">Per month</p>
+                        <hr class="price__splitter">
+                        <p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
+                        <a href="#" class="rounded-button price__rounded-button--purchase">
+                            Purchase
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-10">
+                    <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
+                        et
+                        magnis dis parturient montes, nascetur ridiculus mus.
+                    </p>
+                </div>
+            </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 -->

src/scss/_buttons.scss

@@ -25,6 +25,11 @@
     font-size: 21px;
     padding: 15px 60px;
   }
+
+  &--uppercase {
+    text-transform: uppercase;
+    font-weight: 500;
+  }
 }
 
 .rect-button {

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;
+}

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;
+}
+

src/scss/_pricing.scss

@@ -0,0 +1,105 @@
+.pricing {
+  background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%;
+  padding-top: 90px;
+  padding-bottom: 75px;
+}
+
+.pricing__title {
+  font-family: Montserrat, sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.price {
+  position: relative;
+  margin-top: 110px;
+  margin-bottom: 125px;
+  background-color: rgba(255, 255, 255, 0.06);
+  height: 450px;
+  transition: $hover-duration;
+
+  &:hover {
+    margin-top: 70px;
+    margin-bottom: 75px;
+    background-color: rgba(0, 0, 0, 0.06);
+    transition: $hover-duration;
+    height: 530px;
+
+    & > .price__title {
+      background-color: rgba(0, 0, 0, 0.06);
+      transition: $hover-duration;
+    }
+  }
+}
+
+.price__title {
+  background-color: rgba(255, 255, 255, 0.06);
+  font-family: Montserrat, sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  color: white;
+  text-transform: uppercase;
+  padding: 30px 0;
+  text-align: center;
+  transition: $hover-duration;
+}
+
+.price__value {
+  font-family: Montserrat, sans-serif;
+  font-size: 60px;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+}
+
+.price__period {
+  font-family: Montserrat, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  opacity: 0.3;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.price__splitter {
+  margin: 30px auto;
+  color: $primary;
+  border: none;
+  width: 60px;
+  height: 5px;
+  background-color: $primary;
+}
+
+.price__description {
+  font-family: Montserrat, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.price__rounded-button--purchase {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: rgba(255, 255, 255, 0.15);
+  position: absolute;
+  bottom: 35px;
+  left: 20%;
+  font-family: Montserrat, sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+.pricing__footer {
+  font-family: Source Sans Pro, sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  color: $light-text;
+  text-align: center;
+}

src/scss/_variables.scss

@@ -3,6 +3,8 @@ $primary-dark: #635c73;
 $primary-light: #a599c8;
 $regular-text: #848e97;
 $dark-text: #323232;
+$light-text: #a291a5;
+$gray-text: #c8cbcf;
 
 $background-light: #f4f4f4;
 $background-violet: #4a3b4e;

src/scss/style.scss

@@ -10,4 +10,7 @@
 @import "feature";
 @import "reviews";
 @import "social";
-@import "testimonials";
+@import "testimonials";
+@import "pricing";
+@import "newsletter";
+@import "form";