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

Fix pricing section

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-04-19 13:02:59 +02:00
parent 3153593ea5
commit 664cd80b37
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.html
View File

@@ -328,7 +328,7 @@
<p class="pricing__title">Fork Subscription Pricing</p> <p class="pricing__title">Fork Subscription Pricing</p>
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-8 col-xl-3"> <div class="col-8 col-sm-6 col-lg-3">
<div class="price"> <div class="price">
<p class="price__title">Students</p> <p class="price__title">Students</p>
<p class="price__value">$29</p> <p class="price__value">$29</p>
@@ -340,7 +340,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-8 col-xl-3"> <div class="col-8 col-sm-6 col-lg-3">
<div class="price"> <div class="price">
<p class="price__title">Professional</p> <p class="price__title">Professional</p>
<p class="price__value">$59</p> <p class="price__value">$59</p>
@@ -352,7 +352,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-8 col-xl-3"> <div class="col-8 col-sm-6 col-lg-3">
<div class="price"> <div class="price">
<p class="price__title">Agency</p> <p class="price__title">Agency</p>
<p class="price__value">$99</p> <p class="price__value">$99</p>
@@ -364,7 +364,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-8 col-xl-3"> <div class="col-8 col-sm-6 col-lg-3">
<div class="price"> <div class="price">
<p class="price__title">Enterprise</p> <p class="price__title">Enterprise</p>
<p class="price__value">$159</p> <p class="price__value">$159</p>

17
src/scss/_pricing.scss
View File

@@ -21,17 +21,26 @@
height: 450px; height: 450px;
transition: $hover-duration; transition: $hover-duration;
@media all and (max-width: $desktop-xl) { @media all and (max-width: $desktop) {
margin-top: 7px; margin-top: 15px;
margin-bottom: 7px; margin-bottom: 15px;
}
@media all and (min-width: $desktop) and (max-width: $desktop-xl) {
height: 470px;
} }
&:hover { &:hover {
@media all and (min-width: $desktop-xl) { @media all and (min-width: $desktop) {
margin-top: 70px; margin-top: 70px;
margin-bottom: 75px; margin-bottom: 75px;
height: 530px; height: 530px;
} }
@media all and (max-width: $desktop) {
margin-top: 7px;
margin-bottom: 7px;
height: 467px;
}
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration; transition: $hover-duration;