bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create pricing section

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-04-03 13:23:28 +02:00
parent 7985979bc2
commit d3eb3b7ec3
3 changed files with 136 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/index.html
View File

@@ -323,6 +323,61 @@
</div> </div>
</div> </div>
</section> </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> </div>
<!-- JavaScript --> <!-- JavaScript -->

79
src/scss/_pricing.scss Normal file
View File

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

1
src/scss/style.scss
View File

@@ -11,3 +11,4 @@
@import "reviews"; @import "reviews";
@import "social"; @import "social";
@import "testimonials"; @import "testimonials";
@import "pricing";