Created
June 29, 2013 06:26
-
-
Save A973C/5890099 to your computer and use it in GitHub Desktop.
CSS pricing table - http://codepen.io/A973C/pen/HyJAv
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 id="pricing-table"> | |
| <div class="plan plan1"> | |
| <div class="header" style="line-height: 1.5em; font-size: 14px">Choose Your Plan</div> | |
| <div class="price">Price</div> | |
| <div class="monthly">per month</div> | |
| <ul> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/facebook.png"/><b> Facebook</b></li> | |
| <li><b>Create a fan page</b></li> | |
| <li><b>Custom Graphics</b></li> | |
| <li><b>Build Fan Base</b></li> | |
| <li><b>Posts</b></li> | |
| <li><b>Promotions/Giveaways</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/twitter.png"/><b> Twitter</b></li> | |
| <li><b>Set up business account</b></li> | |
| <li><b>Custom Graphics</b></li> | |
| <li><b>Tweets</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/youtube.png"/><b> YouTube</b></li> | |
| <li><b>Set up account</b></li> | |
| <li><b>Create Custom Background</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/yelp.png"/><b> YELP</b></li> | |
| <li><b>Page Claim & Set Up</b></li> | |
| <li><b>Complete Business Profile</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/linkedin.png"/><b> LinkedIn</b></li> | |
| <li><b>Business Profile</b></li> | |
| <li><b>Messages</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/wordpress.png"/><b> Blog</b></li> | |
| <li><b>Content Creation</b></li> | |
| <li><b>Posts per Week</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/google.png"/><b> SEO</b></li> | |
| <li><b>Unique Content Creation</b></li> | |
| <li><b>Google Keywords</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/email.png"/><b> Marketing & Advertising</b></li> | |
| <li><b>Build Email List</b></li> | |
| <li><b>Email Newsletter</b></li> | |
| <li><b>Facility Promotions</b></li> | |
| <li><b>Adwords</b></li> | |
| <li><b>Text Based Promotions</b></li> | |
| <li><b>Build Text List</b></li> | |
| <li><b>Local Business Partnerships</b></li> | |
| <li></li> | |
| <li><img src="http://jogomarketing.com/wp-content/uploads/2013/06/button-orange.png"/><b> Web Services</b></li> | |
| <li><b>Real Time Reporting</b></li> | |
| <li><b>Analytics</b></li> | |
| <li><b>Connect with Social Media Sites</b></li> | |
| <li><b>Content Update</b></li> | |
| <li><b>Custom Tournament Reporting</b></li> | |
| <li><b>Emergency Service Hours</b></li> | |
| <li><b>Home Page Revamp</b></li> | |
| <li><b>Full Access Content Management</b></li> | |
| </ul> | |
| <a class="signup" href="">Sign up</a> | |
| </div> | |
| <div class="plan plan1"> | |
| <div class="header">Enterprise</div> | |
| <div class="price">$59</div> | |
| <div class="monthly">per month</div> | |
| <ul> | |
| <li><b>10GB</b> Disk Space</li> | |
| <li><b>100GB</b> Monthly Bandwidth</li> | |
| <li><b>20</b> Email Accounts</li> | |
| <li><b>Unlimited</b> subdomains</li> | |
| </ul> | |
| <a class="signup" href="">Sign up</a> | |
| </div> | |
| <div class="plan plan2 popular-plan"> | |
| <div class="header">Enterprise</div> | |
| <div class="price">$59</div> | |
| <div class="monthly">per month</div> | |
| <ul> | |
| <li><b>10GB</b> Disk Space</li> | |
| <li><b>100GB</b> Monthly Bandwidth</li> | |
| <li><b>20</b> Email Accounts</li> | |
| <li><b>Unlimited</b> subdomains</li> | |
| </ul> | |
| <a class="signup" href="">Sign up</a> | |
| </div> | |
| <div class="plan plan3"> | |
| <div class="header">Enterprise</div> | |
| <div class="price">$59</div> | |
| <div class="monthly">per month</div> | |
| <ul> | |
| <li><b>10GB</b> Disk Space</li> | |
| <li><b>100GB</b> Monthly Bandwidth</li> | |
| <li><b>20</b> Email Accounts</li> | |
| <li><b>Unlimited</b> subdomains</li> | |
| </ul> | |
| <a class="signup" href="">Sign up</a> | |
| </div> | |
| <div class="plan plan4"> | |
| <div class="header">Enterprise</div> | |
| <div class="price">$59</div> | |
| <div class="monthly">per month</div> | |
| <ul> | |
| <li><b>10GB</b> Disk Space</li> | |
| <li><b>100GB</b> Monthly Bandwidth</li> | |
| <li><b>20</b> Email Accounts</li> | |
| <li><b>Unlimited</b> subdomains</li> | |
| </ul> | |
| <a class="signup" href="">Sign up</a> | |
| </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
| #pricing-table { | |
| margin: 30px auto; | |
| text-align: center; | |
| width: 1228px; /* total computed width */ | |
| zoom: 1; | |
| } | |
| #pricing-table:before, #pricing-table:after { | |
| content: ""; | |
| display: table | |
| } | |
| #pricing-table:after { | |
| clear: both | |
| } | |
| #pricing-table .plan { | |
| font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; | |
| background: #fff; | |
| border: 1px solid #ddd; | |
| color: #333; | |
| padding: 20px; | |
| width: 180px; | |
| float: left; | |
| _display: inline; /* IE6 double margin fix */ | |
| position: relative; | |
| margin: 0 px; | |
| box-shadow: 0 2px 2px -1px rgba(0,0,0,.3); | |
| } | |
| #pricing-table .plan:after { | |
| z-index: -1; | |
| position: absolute; | |
| content: ""; | |
| bottom: 10px; | |
| right: 4px; | |
| width: 80%; | |
| top: 80%; | |
| box-shadow: 0 12px 5px rgba(0, 0, 0, .3); | |
| transform: rotate(3deg); | |
| } | |
| #pricing-table .popular-plan { | |
| top: -20px; | |
| padding: 40px 20px; | |
| } | |
| #pricing-table .header { | |
| position: relative; | |
| font-size: 18px; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| padding: 40px; | |
| margin: -20px -20px 20px -20px; | |
| border-bottom: 8px solid; | |
| background-color: #eee; | |
| background-image: linear-gradient(#fff, #eee); | |
| } | |
| #pricing-table .header:after { | |
| position: absolute; | |
| bottom: -8px; left: 0; | |
| height: 3px; width: 100%; | |
| content: ''; | |
| background-image: url(data:image/png;base64,iVBO[...]); | |
| } | |
| #pricing-table .popular-plan .header { | |
| margin-top: -40px; | |
| padding-top: 60px; | |
| } | |
| #pricing-table .plan1 .header { | |
| border-bottom-color: #B3E03F; | |
| } | |
| #pricing-table .plan2 .header { | |
| border-bottom-color: #7BD553; | |
| } | |
| #pricing-table .plan3 .header { | |
| border-bottom-color: #3AD5A0; | |
| } | |
| #pricing-table .plan4 .header { | |
| border-bottom-color: #45D0DA; | |
| } | |
| #pricing-table .price{ | |
| font-size: 45px; | |
| } | |
| #pricing-table .monthly{ | |
| font-size: 13px; | |
| margin-bottom: 20px; | |
| text-transform: uppercase; | |
| color: #999; | |
| } | |
| /* --------------- */ | |
| #pricing-table ul { | |
| margin: 20px 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| #pricing-table li { | |
| padding: 10px 0; | |
| } | |
| /* --------------- */ | |
| #pricing-table .signup { | |
| position: relative; | |
| padding: 10px 20px; | |
| color: #fff; | |
| font: bold 14px Arial, Helvetica; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| display: inline-block; | |
| background-color: #72ce3f; | |
| border-radius: 3px; | |
| text-shadow: 0 -1px 0 rgba(0,0,0,.15); | |
| opacity: .9; | |
| } | |
| #pricing-table .signup:hover { | |
| opacity: 1; | |
| } | |
| #pricing-table .signup:active { | |
| box-shadow: 0 2px 2px rgba(0,0,0,.3) inset; | |
| } | |
| #pricing-table .plan1 .signup{ | |
| background: #B3E03F; | |
| } | |
| #pricing-table .plan2 .signup{ | |
| background: #7BD553; | |
| } | |
| #pricing-table .plan3 .signup{ | |
| background: #3AD5A0; | |
| } | |
| #pricing-table .plan4 .signup{ | |
| background: #45D0DA; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment