From d3eb3b7ec3e645a0ea7f906df9f046debbee1af2 Mon Sep 17 00:00:00 2001
From: "Bartlomiej Pluta (PGS Software)" <bpluta@pgs-soft.com>
Date: Tue, 3 Apr 2018 13:23:28 +0200
Subject: [PATCH] Create pricing section

---
 src/index.html         | 55 +++++++++++++++++++++++++++++
 src/scss/_pricing.scss | 79 ++++++++++++++++++++++++++++++++++++++++++
 src/scss/style.scss    |  3 +-
 3 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/scss/_pricing.scss

diff --git a/src/index.html b/src/index.html
index 36e4f0f..e4465ef 100644
--- a/src/index.html
+++ b/src/index.html
@@ -323,6 +323,61 @@
             </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>
+    </section>
 </div>
 
 <!-- JavaScript -->
diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss
new file mode 100644
index 0000000..e144437
--- /dev/null
+++ b/src/scss/_pricing.scss
@@ -0,0 +1,79 @@
+.pricing {
+  background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30% / contain;
+  padding-top: 90px;
+  position: relative;
+}
+
+.pricing__title {
+  padding-bottom: 110px;
+  font-family: Montserrat, sans-serif;
+  font-size: 48px;
+  font-weight: bold;
+  color: white;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.price {
+  background-color: rgba(255, 255, 255, 0.06);
+  height: 450px;
+}
+
+.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 50px;
+  text-align: center;
+}
+
+.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 {
+  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;
+}
+
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3e0223e..93cc2f7 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -10,4 +10,5 @@
 @import "feature";
 @import "reviews";
 @import "social";
-@import "testimonials";
\ No newline at end of file
+@import "testimonials";
+@import "pricing";
\ No newline at end of file