Pricing

Pricing Page

by zerrax

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <div class="pricing-table row">
		<div class="col-sm-4 pricing-container">
			<div class="pricing-table-item">
				<div class="item-cta-block" style="height: 213px;">
					<div id="js__block-price" class="block-price currency-container" style="display: inline-block;" data-country="usd">3$</div>
					<div class="block-sub-text"><div id="js__block-price" class="currency-container" style="display: none;" data-country="cad">USD</div> Per Month</div>
					<div class="pricing-toggle-holder">
						<button class="pricing-toggle">
							<span class="pricing-toggle-open">See Standard Features <span class="glyphicon glyphicon-plus"></span></span>
							<span class="pricing-toggle-close">Hide Standard Features <span class="glyphicon glyphicon-minus"></span></span>
						</button>
					</div>
					<a class="button orange-button outbound" href="" target="_blank">Buy</a>
				</div>
				<div class="item-details-block">
					<div class="plus-header">Includes the following features:</div>
					<div class="separator"></div>
					<ul>
						<li><i class="fa fa-check" aria-hidden="true"></i>Automatique Skip</li>
						<li><i class="fa fa-check" aria-hidden="true"></i>Résume média time and season, épisode</li>
						<li><i class="fa fa-check" aria-hidden="true"></i>And mores ...</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.pricing-table {
    margin-top: 0px;
}
.pricing-table {
    margin-top: 30px;
    margin-bottom: 30px;
}
.pricing-table .pricing-table-item {
    border-bottom: 0px;
}
.pricing-table .item-header {
    color: #ffffff;
    text-align: center;
    line-height: 50px;
}
h2, .header-two {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.3;
    text-transform: uppercase;
}
.pricing-table .item-cta-block {
    padding: 30px;
    text-align: center;
    position: relative;
}
.pricing-table .block-price {
    color: #000000;
    font-size: 45px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .block-sub-text {
    text-transform: uppercase;
    font-size: 15px;
    color: #000000;
    line-height: 26px;
    margin-bottom: 10px;
}
.pricing-table .pricing-toggle-holder {
    display: none;
}
.pricing-table .pricing-toggle-holder button {
    padding-left: 0;
    padding-right: 0;
}
.item-cta-block .button.orange-button {
    display: inline-block;
}
button.orange-button, input[type="button"].orange-button, input[type="reset"].orange-button, input[type="submit"].orange-button, a.button.orange-button {
    color: #ffffff;
    padding: 12px 20px;
    box-shadow: 0 3px 0 0 rgba(24, 24, 25, 0.1);
    -webkit-transition: all .75s;
    transition: all .75s;
    margin-bottom: 6px;
    background: red;
}
button .glyphicon-menu-right, input[type="button"] .glyphicon-menu-right, input[type="reset"] .glyphicon-menu-right, input[type="submit"] .glyphicon-menu-right, a.button .glyphicon-menu-right {
    top: -1px;
    margin-left: 5px;
    font-size: 9px;
}
.pricing-table .item-details-block {
    padding: 38px 30px;
}
.pricing-table .plus-header {
    text-align: center;
    font-size: 18px;
    font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .separator {
    margin-bottom: 38px;
}
.separator {
    background-color: #d2282e;
    height: 3px;
    width: 100px;
    margin: 0 auto;
    margin-top: 27px;
   ...