Skip to content

Instantly share code, notes, and snippets.

@hadyfayed
Created January 27, 2014 17:45
Show Gist options
  • Save hadyfayed/8653579 to your computer and use it in GitHub Desktop.
Save hadyfayed/8653579 to your computer and use it in GitHub Desktop.
A Pen by hady.

A simple pricing table

A pricing table shamelessly copied from dribbble

A Pen by hady on CodePen.

License.

<div class="pricing-container">
<div class="header">
Premium
</div>
<div class="price">
<span>
<sup class="currency">$</sup><span class="figure">39</span> <sup class="cent">99</sup> <sup class="frequency">monthly</sup>
</span>
<div class='details'>based on 1 yr</div>
</div>
<div class="itemsWrapper">
<ul class="items">
<li class='item'>Full Access</li>
<li class="item"><b>Unlimited</b> Pizza</li>
<li class="item"><b>Free</b> Beer</li>
<li class="item">2 free forks every months</li>
<li class="item"><b>Unlimited</b> Burger</li>
<li class="item"><b>Daft Punk</b> every evenings</li>
<li class="item"><b>Free</b> domain name</li>
</ul>
</div>
</div>
/*
copy pasted from http://dribbble.com/shots/508443-Premier-price-plan?list=tags&tag=milo
*/
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
body{
background:#ddd;
}
sup{
top:-.4em;
}
.pricing-container{
width: 300px;
text-align:center;
font-family:'Open Sans Condensed', sans-serif;
position:absolute;
margin-left:-150px;
left:50%;
bottom:0;
.header{
background:#2F2F2F;
color:white;
padding:25px;
font-size:2.5em;
font-weight:300;
border-radius:5px 5px 0 0;
}
.price{
background: #66D2AC;
background:linear-gradient(10deg, #93DA9F 30%, #66D2AC 80%);
color:white;
padding:10px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
text-shadow: 0 1px 1px rgba(0,0,0,.2);
font-size:1.3em;
.figure{
font-weight:800;
font-size:1.2em;
margin:0 2px;
}
.cent{
text-decoration:underline;
}
.frequency{
color:#2F757F;
text-shadow:none;
}
&:hover .details{
height:20px;
}
.details{
color:#2F757F;
font-size:.6em;
display:block;
height:0;
overflow:hidden;
transition: all 400ms ease;
}
}
.itemsWrapper{
border:1px solid #E6E6E6;
border-top:none;
border-radius:0 0 2px 2px;
background:white;
box-shadow: inset 14px 0 white, inset 15px 0 #f2f2f2, inset -14px 0 white, inset -15px 0 #f2f2f2;
.items{
list-style:none;
padding:15px;
margin:0;
}
.item{
padding:7px;
text-transform:capitalize;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment