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

Merge pull request #4 from bartlomiej-pluta/pricing

Browse Source 
Pricing
This commit is contained in:
Bartłomiej Przemysław Pluta
2018-04-09 10:52:11 +02:00
committed by GitHub
parent 7985979bc2 06c9f15746
commit beb1929445
4 changed files with 173 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/index.html
View File

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

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

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

1
src/scss/_variables.scss
View File

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

3
src/scss/style.scss
View File

@@ -10,4 +10,5 @@
@import "feature";
@import "reviews";
@import "social";
@import "testimonials";
@import "testimonials";
@import "pricing";