Pricing Table for your website

HTML
<!DOCTYPE html> <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Pricing Table</title> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div class="plans"> <div class="plan"> <h2 class="plan-title">Solo</h2> <p class="plan-price">$19<span>/mo</span></p> <ul class="plan-features"> <li><strong>1</strong> user</li> <li><strong>Unlimited</strong> projects</li> <li><strong>2GB</strong> storage</li> </ul> <a href="index.html" class="plan-button">Start Now</a> </div> <div class="plan plan-tall"> <h2 class="plan-title">Team</h2> <p class="plan-price">$49<span>/mo</span></p> <ul class="plan-features"> <li><strong>10</strong> users</li> <li><strong>Unlimited</strong> projects</li> <li><strong>20GB</strong> storage</li> </ul> <a href="index.html" class="plan-button">Start Now</a> </div> <div class="plan"> <h2 class="plan-title">Agency</h2> <p class="plan-price">$99<span>/mo</span></p> <ul class="plan-features"> <li><strong>Unlimited</strong> users</li> <li><strong>Unlimited</strong> projects</li> <li><strong>100GB</strong> storage</li> </ul> <a href="index.html" class="plan-button">Start Now</a> </div> </div> </body> </html>
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .about { margin: 70px auto 40px; padding: 8px; width: 260px; font: 10px/18px 'Lucida Grande', Arial, sans-serif; color: #666; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.25); background: #eee; background: rgba(250, 250, 250, 0.8); border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2); } .about a { color: #333; text-decoration: none; border-radius: 2px; -webkit-transition: background 0.1s; -moz-transition: background 0.1s; -o-transition: background 0.1s; transition: background 0.1s; } .about a:hover { text-decoration: none; background: #fafafa; background: rgba(255, 255, 255, 0.7); } .about-links { height: 30px; } .about-links > a { float: left; width: 50%; line-height: 30px; font-size: 12px; } .about-author { margin-top: 5px; } .about-author > a { padding: 1px 3px; margin: 0 -1px; } /* * Copyright (c) 2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ body { font: 12px/20px 'Lucida Grande', Verdana, sans-serif; color: #404040; background: #75649b; } .plans { margin: 40px auto; width: 660px; zoom: 1; } .plans:before, .plans:after { content: ''; display: table; } .plans:after { clear: both; } .plan { float: left; width: 220px; margin: 10px 0; padding: 20px; text-align: center; background: #fafafa; background-clip: padding-box; border: solid #453b5d; border-width: 2px 0 2px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .plan:first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .plan:last-child { border-width: 2px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; } .plan-title { position: relative; margin: -20px -10px 20px; padding: 20px; line-height: 1; font-size: 16px; font-weight: bold; color: #595f6b; border-bottom: 1px dashed #d2d2d2; } .plan-title:before { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background-size: 3px 1px; background-image: -webkit-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2); background-image: -moz-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2); background-image: -o-linear-gradient(left, white, white 33%, #d2d2d2 34%, #d2d2d2); background-image: linear-gradient(to right, white, white 33%, #d2d2d2 34%, #d2d2d2); } .plan-price { margin: 0 auto 20px; width: 90px; height: 90px; line-height: 90px; font-size: 19px; font-weight: bold; color: white; background: #595f6b; border-radius: 45px; } .plan-price > span { font-size: 12px; font-weight: normal; color: rgba(255, 255, 255, 0.9); } .plan-features { margin-bottom: 20px; line-height: 2; font-size: 12px; color: #999; text-align: center; } .plan-features > li > strong { font-weight: bold; color: #888; } .plan-button { display: inline-block; vertical-align: top; padding: 0 15px; line-height: 30px; font-weight: bold; color: white; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); background: #7c69a3; border: 1px solid #222; border-bottom-color: black; border-radius: 3px; background-image: -webkit-linear-gradient(top, #9780cc, #6f5e96); background-image: -moz-linear-gradient(top, #9780cc, #6f5e96); background-image: -o-linear-gradient(top, #9780cc, #6f5e96); background-image: linear-gradient(to bottom, #9780cc, #6f5e96); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 2px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 2px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.1); } .plan-button:active { color: rgba(255, 255, 255, 0.95); background: #6f5e96; border-color: black #222 #222; background-image: -webkit-linear-gradient(top, #6f5e96, #8770b9); background-image: -moz-linear-gradient(top, #6f5e96, #8770b9); background-image: -o-linear-gradient(top, #6f5e96, #8770b9); background-image: linear-gradient(to bottom, #6f5e96, #8770b9); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .plan-tall { margin: 0; background-color: white; border-width: 2px; border-radius: 7px; } .plan-tall > .plan-title { font-size: 18px; } .plan-tall > .plan-price { width: 100px; height: 100px; line-height: 100px; font-size: 21px; border-radius: 50px; } .plan-tall > .plan-features { font-size: 13px; } .plan-tall > .plan-button { padding: 0 16px; line-height: 32px; } .plan-tall + .plan { border-left: 0; }
JAVASCRIPT
Expand for more options Login