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

Add footer to pricing section

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-04-09 10:27:58 +02:00
parent d8ff782ad9
commit a5bdf1fcf6
3 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/index.html
View File

@@ -345,7 +345,7 @@
<p class="price__value">$59</p> <p class="price__value">$59</p>
<p class="price__period">Per month</p> <p class="price__period">Per month</p>
<hr class="price__splitter"> <hr class="price__splitter">
<p class="price__description">Professional License<br />Email Support</p> <p class="price__description">Professional License<br/>Email Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase"> <a href="#" class="rounded-button price__rounded-button--purchase">
Purchase Purchase
</a> </a>
@@ -357,7 +357,7 @@
<p class="price__value">$99</p> <p class="price__value">$99</p>
<p class="price__period">Per month</p> <p class="price__period">Per month</p>
<hr class="price__splitter"> <hr class="price__splitter">
<p class="price__description">1-12 Team Members<br />Phone Support</p> <p class="price__description">1-12 Team Members<br/>Phone Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase"> <a href="#" class="rounded-button price__rounded-button--purchase">
Purchase Purchase
</a> </a>
@@ -369,13 +369,24 @@
<p class="price__value">$159</p> <p class="price__value">$159</p>
<p class="price__period">Per month</p> <p class="price__period">Per month</p>
<hr class="price__splitter"> <hr class="price__splitter">
<p class="price__description">Unlimited Team Members<br />24/7 Phone Support</p> <p class="price__description">Unlimited Team Members<br/>24/7 Phone Support</p>
<a href="#" class="rounded-button price__rounded-button--purchase"> <a href="#" class="rounded-button price__rounded-button--purchase">
Purchase Purchase
</a> </a>
</div> </div>
</div> </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> </div>
</section> </section>
</div> </div>

10
src/scss/_pricing.scss
View File

@@ -15,12 +15,14 @@
.price { .price {
position: relative; position: relative;
margin-top: 110px; margin-top: 110px;
margin-bottom: 125px;
background-color: rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.06);
height: 450px; height: 450px;
transition: $hover-duration; transition: $hover-duration;
&:hover { &:hover {
margin-top: 70px; margin-top: 70px;
margin-bottom: 75px;
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
transition: $hover-duration; transition: $hover-duration;
height: 530px; height: 530px;
@@ -90,3 +92,11 @@
font-size: 16px; font-size: 16px;
text-transform: uppercase; 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; $primary-light: #a599c8;
$regular-text: #848e97; $regular-text: #848e97;
$dark-text: #323232; $dark-text: #323232;
$light-text: #a291a5;
$background-light: #f4f4f4; $background-light: #f4f4f4;
$background-violet: #4a3b4e; $background-violet: #4a3b4e;