Skip to content

Instantly share code, notes, and snippets.

@adesignl

adesignl/pricing-tables.css

Created April 26, 2013 13:44
Show Gist options
  • Save adesignl/5467468 to your computer and use it in GitHub Desktop.
Save adesignl/5467468 to your computer and use it in GitHub Desktop.
Download ZIP
Flexible pricing tables
Raw
pricing-tables.css
/*----------
Blocks
----------*/
/*Pricing table and price blocks*/
.pricing_table {
line-height: 150%;
font-size: 12px;
margin: 0 auto;
width: 75%;
max-width: 800px;
padding-top: 10px;
margin-top: 100px;
}
.price_block {
text-align: center;
width: 100%;
color: #fff;
float: left;
list-style-type: none;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
-ms-transition: all 0.25s;
transition: all 0.25s;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 10px;
border-bottom: 1px solid transparent;
}
/*Price heads*/
.pricing_table h3 {
text-transform: uppercase;
padding: 5px 0;
background: #333;
margin: -10px 0 1px 0;
}
/*Price tags*/
.price {
display: table;
background: #444;
width: 100%;
height: 70px;
}
.price_figure {
font-size: 24px;
text-transform: uppercase;
vertical-align: middle;
display: table-cell;
}
.price_number {
font-weight: bold;
display: block;
}
.price_tenure {
font-size: 11px;
}
/*Features*/
.features {
background: #DEF0F4;
color: #000;
}
.features li {
padding: 8px 15px;
border-bottom: 1px solid #ccc;
font-size: 11px;
list-style-type: none;
}
.footer {
padding: 15px;
background: #DEF0F4;
}
.action_button {
text-decoration: none;
color: #fff;
font-weight: bold;
border-radius: 5px;
background: -webkit-linear-gradient(#666, #333);
background: -moz-linear-gradient(#666, #333);
background: -o-linear-gradient(#666, #333);
background: -ms-linear-gradient(#666, #333);
background: linear-gradient(#666, #333);
padding: 5px 20px;
font-size: 11px;
text-transform: uppercase;
}
.price_block:hover {
-webkit-box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.04) translateY(-5px);
-moz-transform: scale(1.04) translateY(-5px);
-o-transform: scale(1.04) translateY(-5px);
-ms-transform: scale(1.04) translateY(-5px);
transform: scale(1.04) translateY(-5px);
z-index: 1;
border-bottom: 0 none;
}
.price_block:hover .price {
background: -webkit-linear-gradient(#DB7224, #F9B84A);
background: -moz-linear-gradient(#DB7224, #F9B84A);
background: -o-linear-gradient(#DB7224, #F9B84A);
background: -ms-linear-gradient(#DB7224, #F9B84A);
background: linear-gradient(#DB7224, #F9B84A);
-webkit-box-shadow: inset 0 0 45px 1px #DB7224;
box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
background: #222;
}
.price_block:hover .action_button {
background: -webkit-linear-gradient(#F9B84A, #DB7224);
background: -moz-linear-gradient(#F9B84A, #DB7224);
background: -o-linear-gradient(#F9B84A, #DB7224);
background: -ms-linear-gradient(#F9B84A, #DB7224);
background: linear-gradient(#F9B84A, #DB7224);
}
@media only screen and (min-width : 480px) and (max-width : 768px) {
.price_block {
width: 50%;
}
.price_block:nth-child(odd) {
border-right: 1px solid transparent;
}
.price_block:nth-child(3) {
clear: both;
}
.price_block:nth-child(odd):hover {
border: 0 none;
}
}
@media only screen and (min-width : 768px) {
.price_block {
width: 25%;
}
.price_block {
border-right: 1px solid transparent;
border-bottom: 0 none;
}
.price_block:last-child {
border-right: 0 none;
}
.price_block:hover {
border: 0 none;
}
}
.skeleton,.skeleton ul,.skeleton li,.skeleton div,.skeleton h3,.skeleton span,.skeleton p {
border: 5px solid rgba(255, 255, 255, 0.9);
border-radius: 5px;
margin: 7px !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 0 !important;
text-align: left !important;
display: block !important;
width: auto !important;
height: auto !important;
font-size: 10px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: black !important;
}
.skeleton .label {
font-size: 11px !important;
font-style: italic !important;
text-transform: none !important;
font-weight: normal !important;
color: white !important;
border: 0 none !important;
padding: 5px !important;
margin: 0 !important;
float: none !important;
text-align: left !important;
text-shadow: 0 0 1px white;
background: none !important;
}
.skeleton {
display: none !important;
margin: 100px !important;
clear: both;
}
Raw
pricing-tables.html
<ul class="pricing_table">
<li class="price_block">
<h3>Starter</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">FREE</span>
</div>
</div>
<ul class="features">
<li>1GB Storage</li>
<li>2 Clients</li>
<li>5 Active Projects</li>
<li>5 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Basic</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$9.99</span>
<span class="price_tenure">per month</span>
</div>
</div>
<ul class="features">
<li>2GB Storage</li>
<li>5 Clients</li>
<li>10 Active Projects</li>
<li>10 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Premium</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$19.99</span>
<span class="price_tenure">per month</span>
</div>
</div>
<ul class="features">
<li>5GB Storage</li>
<li>10 Clients</li>
<li>20 Active Projects</li>
<li>20 Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
<li class="price_block">
<h3>Lifetime</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$999</span>
</div>
</div>
<ul class="features">
<li>Unlimited Storage</li>
<li>Unlimited Clients</li>
<li>Unlimited Projects</li>
<li>Unlimited Colors</li>
<li>Free Goodies</li>
<li>24/7 Email support</li>
</ul>
<div class="footer">
<a href="#" class="action_button">Buy Now</a>
</div>
</li>
</ul>
<ul class="skeleton pricing_table" style="margin-top: 100px; overflow: hidden;">
<li class="label" style="margin: 0 none;">ul.pricing_table</li>
<li class="price_block">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.5;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
<li class="price_block" style="opacity: 0.25;">
<span class="label">li.price_block</span>
<h3><span class="label">h3</span></h3>
<div class="price">
<span class="label">div.price</span>
<div class="price_figure">
<span class="label">div.price_figure</span>
<span class="price_number">
<span class="label">span.price_number</span>
</span>
<span class="price_tenure">
<span class="label">span.price_tenure</span>
</span>
</div>
</div>
<ul class="features">
<li class="label">ul.features</li>
<br /><br /><br />
</ul>
<div class="footer">
<span class="label">div.footer</span>
</div>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment