diff --git a/src/index.html b/src/index.html index 36e4f0f..683ece3 100644 --- a/src/index.html +++ b/src/index.html @@ -323,6 +323,72 @@ +
+

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..01cb7eb --- /dev/null +++ b/src/scss/_pricing.scss @@ -0,0 +1,104 @@ +.pricing { + background: $background-violet url(../img/testimonials/pricing.png) no-repeat 50% 30%; + padding-top: 90px; +} + +.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; +} \ 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; 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