A pricing table shamelessly copied from dribbble
Created
January 27, 2014 17:45
-
-
Save hadyfayed/8653579 to your computer and use it in GitHub Desktop.
A Pen by hady.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
copy pasted from http://dribbble.com/shots/508443-Premier-price-plan?list=tags&tag=milo | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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