Skip to content

Instantly share code, notes, and snippets.

@secondfret

secondfret/dabblet.css

Created February 6, 2012 18:31
Show Gist options
  • Save secondfret/1753915 to your computer and use it in GitHub Desktop.
Save secondfret/1753915 to your computer and use it in GitHub Desktop.
Download ZIP
Design Shack Pricing Table Example
Raw
dabblet.css
/**
* Design Shack Pricing Table Example
*/
* {margin: 0; padding: 0;}
body {background: #ededed;}
#container {
width: 780px;
margin: 100px auto;
}
/*Top Bar*/
.top {
width: 250px; height: 50px;
background: #2F2E35;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.top h2 {
color: #fff;
text-align: center;
font: 300 30px/50px Helvetica, Verdana, sans-serif;
}
/*Shape*/
.pricingtable {
width: 250px; height: 450px;
background: white;
margin: 5px;
float: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}
/*Features*/
.pricingtable ul {
list-style-type: none;
font: 300 18px/2 Helvetica, Verdana, sans-serif;
margin: 20px 0 0 45px;
}
.pricingtable ul strong {
font-weight: bold;
}
/*Dividing Line*/
.pricingtable hr {
border: 0;
background-color: #BCBEC0;
color: #BCBEC0;
height: 1px;
width: 190px;
margin: 20px 0 0 30px;
}
/*Price*/
.pricingtable h1 {
text-align: center;
font: bold 88px/1 Helvetica, Verdana, sans-serif;
margin: 20px 0 0 0;
}
.pricingtable h1 sup {
font-size: 45px;
}
.pricingtable p {
text-align: center;
font: 500 14px/1 Helvetica, Verdana, sans-serif;
color: #BCBEC0;
}
/*Button*/
.pricingtable a {
display: block;
height: 40px;
width: 150px;
color: #fff;
margin: 25px 0 0 50px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font: 500 16px/40px Helvetica, Verdana, sans-serif;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*Gradient*/
background: #9dcc55; /* Old browsers */
background: -moz-linear-gradient(top, #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* IE10+ */
background: linear-gradient(top, #9dcc55 0%,#96c23d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}
.pricingtable a:hover {
background: #b2e560; /* Old browsers */
background: -moz-linear-gradient(top, #b2e560 0%, #96c23d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b2e560 0%,#96c23d 100%); /* IE10+ */
background: linear-gradient(top, #b2e560 0%,#96c23d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}
/*Scaled Version*/
.featured {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="container">
<div class="pricingtable">
<div class="top">
<h2>Basic</h2>
</div>
<ul>
<li><strong>Full</strong> Email Support</li>
<li><strong>25GB</strong> of Storage</li>
<li><strong>5</strong> Domains</li>
<li><strong>10</strong> Email Addresses</li>
</ul>
<hr />
<h1><sup>$</sup>25</h1>
<p>per month</p>
<a href="#">Sign Up</a>
</div>
<div class="pricingtable featured">
<div class="top">
<h2>Pro</h2>
</div>
<ul>
<li><strong>Full</strong> Email Support</li>
<li><strong>50GB</strong> of Storage</li>
<li><strong>10</strong> Domains</li>
<li><strong>20</strong> Email Addresses</li>
</ul>
<hr />
<h1><sup>$</sup>49</h1>
<p>per month</p>
<a href="#">Sign Up</a>
</div>
<div class="pricingtable">
<div class="top">
<h2>Premium</h2>
</div>
<ul>
<li><strong>Full</strong> Email Support</li>
<li><strong>Unlimited</strong> Storage</li>
<li><strong>Unlimited</strong> Domains</li>
<li><strong>50</strong> Email Addresses</li>
</ul>
<hr />
<h1><sup>$</sup>79</h1>
<p>per month</p>
<a href="#">Sign Up</a>
</div>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment