Pricing table 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-pricing-1"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <span class="ct-fw-300">Free</span> <h3 class="ct-fw-600">$0/mo</h3> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <ul class="list-unstyled"> <li class="ct-u-colorBlack">Yokohama</li> <li>Worshipped</li> <li>Passepartout</li> <li>Buddhist</li> <li>Confucius</li> </ul> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <a class="btn btn-link" href="#"><span>Try this</span><i class="fa fa-angle-right"></i></a> </div> </div> </div> </div> |
Pricing table 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="ct-pricing-2" data-bg-image="assets/images/pricing-1.jpg"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <span class="ct-fw-300">Free</span> <h3 class="ct-fw-600">$0/mo</h3> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <ul class="list-unstyled"> <li class="ct-u-colorWhite">Yokohama</li> <li>Worshipped</li> <li>Passepartout</li> <li>Buddhist</li> <li>Confucius</li> </ul> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell ct-u-colorWhite"> <a class="btn btn-lg ct-btn--transparent ct-btn-rounded" href="#"><span>Try this</span><i class="fa fa-angle-right"></i></a> </div> </div> </div> </div> |
Background image can be change with data attribute:
data-bg-image – just define url to your image,
Pricing table 3 – inverse
|
1 2 3 4 5 |
<div class="ct-u-backgroundBlack> //Pricing table </div> |
Pricing table 4 – Counter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="ct-pricing-2" data-bg-image="assets/images/pricing-1.jpg"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <span class="ct-fw-300">Free</span> //Counter --> <h3>$</h3> <h3 class="ct-u-colorWhite ct-js-counter" data-ct-to="2134" data-ct-speed="5000">$0</h3> <h3>/mo</h3> //Counter <-- </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <ul class="list-unstyled"> <li class="ct-u-colorWhite">Yokohama</li> <li>Worshipped</li> <li>Passepartout</li> <li>Buddhist</li> <li>Confucius</li> </ul> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell ct-u-colorWhite"> <a class="btn btn-lg ct-btn--transparent ct-btn-rounded" href="#"><span>Try this</span><i class="fa fa-angle-right"></i></a> </div> </div> </div> </div> |
Script required for Pricing table 4 – Counter:
|
1 2 |
<script src="assets/js/counter/jquery.countTo.js"></script> , <script src="assets/js/counter/init.js"></script> |