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

Enable RWD on pricing section

Browse Source
This commit is contained in:
Bartłomiej Pluta
2018-04-16 14:20:29 +02:00
parent d2f03f2ca6
commit 59dd5095b1
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.html
View File

@@ -329,8 +329,8 @@
<div class="pricing"> <div class="pricing">
<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"> <div class="row justify-content-center">
<div class="col-3"> <div class="col-8 col-xl-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>
@@ -342,7 +342,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-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>
@@ -354,7 +354,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-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>
@@ -366,7 +366,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-3"> <div class="col-8 col-xl-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>

20
src/scss/_pricing.scss
View File

@@ -21,12 +21,19 @@
height: 450px; height: 450px;
transition: $hover-duration; transition: $hover-duration;
@media all and (max-width: $desktop-xl) {
margin-top: 7px;
margin-bottom: 7px;
}
&:hover { &:hover {
margin-top: 70px; @media all and (min-width: $desktop-xl) {
margin-bottom: 75px; margin-top: 70px;
margin-bottom: 75px;
height: 530px;
}
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration; transition: $hover-duration;
height: 530px;
& > .price__title { & > .price__title {
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
@@ -88,8 +95,13 @@
padding-bottom: 10px; padding-bottom: 10px;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
position: absolute; position: absolute;
left: 0;
text-align: center;
right: 0;
bottom: 35px; bottom: 35px;
left: 20%; margin: auto;
display: block;
width: 80%;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;