From d3eb3b7ec3e645a0ea7f906df9f046debbee1af2 Mon Sep 17 00:00:00 2001 From: "Bartlomiej Pluta (PGS Software)" Date: Tue, 3 Apr 2018 13:23:28 +0200 Subject: [PATCH 1/4] 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 @@ +
+

Fork Subscription Pricing

+
+
+
+
+

Students

+

$29

+

Per month

+
+

Personal License

+ + Purchase + +
+
+
+
+

Professional

+

$59

+

Per month

+
+

Professional License
Email Support

+ + Purchase + +
+
+
+
+

Agency

+

$99

+

Per month

+
+

1-12 Team Members
Phone Support

+ + Purchase + +
+
+
+
+

Enterprise

+

$159

+

Per month

+
+

Unlimited Team Members
24/7 Phone Support

+ + Purchase + +
+
+
+
+
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 From d8ff782ad936586501dd63a5002e8f8301cf5fbe Mon Sep 17 00:00:00 2001 From: "Bartlomiej Pluta (PGS Software)" Date: Mon, 9 Apr 2018 10:18:40 +0200 Subject: [PATCH 2/4] Add hover effect --- src/scss/_pricing.scss | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss index e144437..d57caab 100644 --- a/src/scss/_pricing.scss +++ b/src/scss/_pricing.scss @@ -1,11 +1,9 @@ .pricing { - background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30% / contain; + background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%; padding-top: 90px; - position: relative; } .pricing__title { - padding-bottom: 110px; font-family: Montserrat, sans-serif; font-size: 48px; font-weight: bold; @@ -15,8 +13,23 @@ } .price { + position: relative; + margin-top: 110px; background-color: rgba(255, 255, 255, 0.06); height: 450px; + transition: $hover-duration; + + &:hover { + margin-top: 70px; + 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 { @@ -26,8 +39,9 @@ font-weight: 500; color: white; text-transform: uppercase; - padding: 30px 50px; + padding: 30px 0; text-align: center; + transition: $hover-duration; } .price__value { @@ -76,4 +90,3 @@ font-size: 16px; text-transform: uppercase; } - From a5bdf1fcf6531596ea123ea03feed7e53209fa13 Mon Sep 17 00:00:00 2001 From: "Bartlomiej Pluta (PGS Software)" Date: Mon, 9 Apr 2018 10:27:58 +0200 Subject: [PATCH 3/4] Add footer to pricing section --- src/index.html | 17 ++++++++++++++--- src/scss/_pricing.scss | 10 ++++++++++ src/scss/_variables.scss | 1 + 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index e4465ef..683ece3 100644 --- a/src/index.html +++ b/src/index.html @@ -345,7 +345,7 @@

$59

Per month

-

Professional License
Email Support

+

Professional License
Email Support

Purchase @@ -357,7 +357,7 @@

$99

Per month

-

1-12 Team Members
Phone Support

+

1-12 Team Members
Phone Support

Purchase @@ -369,13 +369,24 @@

$159

Per month

-

Unlimited Team Members
24/7 Phone Support

+

Unlimited Team Members
24/7 Phone Support

Purchase +
+
+

+ 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. +

+
+
diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss index d57caab..79d7d5f 100644 --- a/src/scss/_pricing.scss +++ b/src/scss/_pricing.scss @@ -15,12 +15,14 @@ .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; @@ -90,3 +92,11 @@ 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; +} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 722d973..ee743e1 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -3,6 +3,7 @@ $primary-dark: #635c73; $primary-light: #a599c8; $regular-text: #848e97; $dark-text: #323232; +$light-text: #a291a5; $background-light: #f4f4f4; $background-violet: #4a3b4e; From 06c9f15746f9a99ecaa56542bed256d91e8c57f4 Mon Sep 17 00:00:00 2001 From: "Bartlomiej Pluta (PGS Software)" Date: Mon, 9 Apr 2018 10:49:32 +0200 Subject: [PATCH 4/4] Fix buttons padding --- src/scss/_pricing.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/_pricing.scss b/src/scss/_pricing.scss index 79d7d5f..01cb7eb 100644 --- a/src/scss/_pricing.scss +++ b/src/scss/_pricing.scss @@ -83,6 +83,8 @@ } .price__rounded-button--purchase { + padding-top: 10px; + padding-bottom: 10px; background-color: rgba(255, 255, 255, 0.15); position: absolute; bottom: 35px;