cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="row">
  <div class="col-md-3 col-xsm-6">
    <section class="pricing-table pricing-table-primary">
      <header>
        <h2>Free</h2>
      </header>
      <p class="pricing-price">
        <span class="pricing-sign">$</span>
        0.00
        <span class="pricing-sub">/mo</span>
      </p>
      <div class="pricing-plan-details">
        <p class="pricing-lead">Including</p>
        <ul>
          <li>No Support</li>
          <li>1 Website</li>
          <li>10GB Disk Space</li>
          <li>3 Database</li>
          <li>1 Email Address</li>
        </ul>                            
      </div>
      <footer>
        <a ui-wave="" href="#" class="btn btn-raised btn-primary ui-wave">Buy now</a
      </footer>
  </section>
</div>

        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table pricing-table-success">
                <header><h2>Basic</h2></header>
                <p class="pricing-price"><span class="pricing-sign">$</span>29.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>24/7 Support</li>
                        <li>1 Website</li>
                        <li>100GB Disk Space</li>
                        <li>10 Database</li>
                        <li>10 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-success ui-wave">Get it now</a></footer>
            </section>
        </div>

        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table pricing-table-warning">
                <header> <h2>Standard</h2> </header>
                <p class="pricing-price"><span class="pricing-sign">$</span>39.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>24/7 Support</li>
                        <li>Unlimited Website</li>
                        <li>500GB Disk Space</li>
                        <li>25 Database</li>
                        <li>50 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-warning ui-wave">Get it now</a></footer>
            </section>
        </div>

        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table pricing-table-danger">
                <header> <h2>Ultimate</h2> </header>
                <p class="pricing-price"><span class="pricing-sign">$</span>99.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>24/7 Support</li>
                        <li>Unlimited Website</li>
                        <li>Unlimited Disk Space</li>
                        <li>Unlimited Database</li>
                        <li>100 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-danger ui-wave">Get it now</a></footer>
            </section>
        </div>
    </div>
    
    <!-- 3 column -->
    <div class="row">
        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table pricing-table-info">
                <header><h2>Basic</h2></header>
                <p class="pricing-price"><span class="pricing-sign">$</span>29.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>24/7 Support</li>
                        <li>1 Website</li>
                        <li>100GB Disk Space</li>
                        <li>10 Database</li>
                        <li>10 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-info ui-wave">Get it now</a></footer>
            </section>
        </div>

        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table">
                <header> <h2>Standard</h2> </header>
                <p class="pricing-price"><span class="pricing-sign">$</span>39.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>24/7 Support</li>
                        <li>Unlimited Website</li>
                        <li>500GB Disk Space</li>
                        <li>25 Database</li>
                        <li>50 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-default ui-wave">Get it now</a></footer>
            </section>
        </div>  

        <div class="col-md-3 col-xsm-6">
            <section class="pricing-table pricing-table-primary featured">
                <header><h2>Featured</h2></header>
                <p class="pricing-price"><span class="pricing-sign">$</span>0.00<span class="pricing-sub">/mo</span></p>
                <div class="pricing-plan-details">
                    <p class="pricing-lead">Including</p>
                    <ul>
                        <li>No Support</li>
                        <li>1 Website</li>
                        <li>10GB Disk Space</li>
                        <li>3 Database</li>
                        <li>1 Email Address</li>
                    </ul>                            
                </div>
                <footer><a ui-wave="" href="javascript:;" class="btn btn-raised btn-primary ui-wave">Buy now</a></footer>
            </section>
        </div>

    </div>
            
          
!
            
              body {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  font-family: "Roboto","Helvetica Neue",Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #3D4051;
    background-color: #f3f3f3
}

::selection {
    background: #009688;
    color: #fff
}

::-moz-selection {
    background: #009688;
    color: #fff
}

:focus {
    outline: none
}

a {
    text-decoration: none
}

a:active,a:focus {
    text-decoration: none;
    outline: none
}

p {
    margin: 0 0 10px;
}

.pricing-table {
    position: relative;
    margin-bottom: 20px;
    background-color: #fcfcfc;
    color: #999;
    border-radius: 2px;
    box-shadow: none;
    text-align: center;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    transition: 0.25s ease-out
}

.pricing-table header {
    text-align: center;
    padding: 12px 8px;
    border-radius: 2px 2px 0 0
}

.pricing-table header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase
}

.pricing-table .pricing-price {
    border-bottom: 1px solid #e7edf6;
    padding: 45px 15px;
    background-color: #A0A2AA;
    font-size: 56px;
    line-height: 1;
    color: #fff;
    font-weight: 300
}

.pricing-table .pricing-price .pricing-sign {
    margin-right: 5px;
    font-size: 24px;
    font-weight: normal
}

.pricing-table .pricing-price .pricing-sub {
    margin-left: 5px;
    font-size: 22px;
    line-height: 1
}

.pricing-table .pricing-lead {
    margin-bottom: 1.5em;
    font-size: 18px;
    text-transform: uppercase
}

.pricing-table .pricing-lead:after {
    margin: 0 auto;
    content: "";
    height: 0px;
    width: 80px;
    padding-top: .6em;
    border-bottom: solid 3px #eff0f3;
    display: block
}

.pricing-table .pricing-plan-details {
    padding: 1em
}

.pricing-table .pricing-plan-details>ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 2em
}

.pricing-table>footer {
    padding: 2em;
    text-align: center
}

.pricing-table>footer>a {
    display: block;
    margin: 0 auto;
    padding: 12px;
    font-size: 14px;
    line-height: 1;
    width: 100%;
    max-width: 200px
}

.pricing-table.pricing-table-primary .pricing-price {
    background-color: #009688
}

.pricing-table.pricing-table-primary:after {
    border-top: 6px solid #009688;
    border-left: 6px solid #009688
}

.pricing-table.pricing-table-secondary .pricing-price,.pricing-table.pricing-table-info .pricing-price {
    background-color: #00BCD4
}

.pricing-table.pricing-table-secondary:after,.pricing-table.pricing-table-info:after {
    border-top: 6px solid #00BCD4;
    border-left: 6px solid #00BCD4
}

.pricing-table.pricing-table-success .pricing-price {
    background-color: #8BC34A
}

.pricing-table.pricing-table-success:after {
    border-top: 6px solid #8BC34A;
    border-left: 6px solid #8BC34A
}

.pricing-table.pricing-table-warning .pricing-price {
    background-color: #FFCA28
}

.pricing-table.pricing-table-warning:after {
    border-top: 6px solid #FFCA28;
    border-left: 6px solid #FFCA28
}

.pricing-table.pricing-table-danger .pricing-price {
    background-color: #F44336
}

.pricing-table.pricing-table-danger:after {
    border-top: 6px solid #F44336;
    border-left: 6px solid #F44336
}

/* Button */
.btn.btn-raised,.btn-group.btn-raised {
    text-transform: uppercase;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    transition: 0.25s ease-out
}

.z-depth-1,.btn.btn-raised,.btn-group.btn-raised,.btn.btn-floating,.btn-group.btn-floating {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.ui-wave {
    position: relative;
    overflow: hidden;
    z-index: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
}

.btn-primary {
    color: #fff;
    background-color: #009688;
    border-color: #009688
}

.btn-primary:focus,.btn-primary.focus {
    color: #fff;
    background-color: #00635a;
    border-color: #001714
}

.btn-primary:hover {
    color: #fff;
    background-color: #00635a;
    border-color: #005951
}

.btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #00635a;
    border-color: #005951
}

.btn-primary:active:hover,.btn-primary:active:focus,.btn-primary:active.focus,.btn-primary.active:hover,.btn-primary.active:focus,.btn-primary.active.focus,.open>.btn-primary.dropdown-toggle:hover,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle.focus {
    color: #fff;
    background-color: #003f39;
    border-color: #001714
}

.btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle {
    background-image: none
}

.btn-primary.disabled,.btn-primary.disabled:hover,.btn-primary.disabled:focus,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled.active,.btn-primary[disabled],.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary.active {
    background-color: #009688;
    border-color: #009688
}

.btn-primary .badge {
    color: #009688;
    background-color: #fff
}

.btn-success {
    color: #fff;
    background-color: #8BC34A;
    border-color: #8BC34A
}

.btn-success:focus,.btn-success.focus {
    color: #fff;
    background-color: #71a436;
    border-color: #496a23
}

.btn-success:hover {
    color: #fff;
    background-color: #71a436;
    border-color: #6c9c34
}

.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: #71a436;
    border-color: #6c9c34
}

.btn-success:active:hover,.btn-success:active:focus,.btn-success:active.focus,.btn-success.active:hover,.btn-success.active:focus,.btn-success.active.focus,.open>.btn-success.dropdown-toggle:hover,.open>.btn-success.dropdown-toggle:focus,.open>.btn-success.dropdown-toggle.focus {
    color: #fff;
    background-color: #5f892d;
    border-color: #496a23
}

.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle {
    background-image: none
}

.btn-success.disabled,.btn-success.disabled:hover,.btn-success.disabled:focus,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled.active,.btn-success[disabled],.btn-success[disabled]:hover,.btn-success[disabled]:focus,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled].active,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success:hover,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success.active {
    background-color: #8BC34A;
    border-color: #8BC34A
}

.btn-success .badge {
    color: #8BC34A;
    background-color: #fff
}

.btn-info {
    color: #fff;
    background-color: #00BCD4;
    border-color: #00BCD4
}

.btn-info:focus,.btn-info.focus {
    color: #fff;
    background-color: #008fa1;
    border-color: #004b55
}

.btn-info:hover {
    color: #fff;
    background-color: #008fa1;
    border-color: #008697
}

.btn-info:active,.btn-info.active,.open>.btn-info.dropdown-toggle {
    color: #fff;
    background-color: #008fa1;
    border-color: #008697
}

.btn-info:active:hover,.btn-info:active:focus,.btn-info:active.focus,.btn-info.active:hover,.btn-info.active:focus,.btn-info.active.focus,.open>.btn-info.dropdown-toggle:hover,.open>.btn-info.dropdown-toggle:focus,.open>.btn-info.dropdown-toggle.focus {
    color: #fff;
    background-color: #006f7d;
    border-color: #004b55
}

.btn-info:active,.btn-info.active,.open>.btn-info.dropdown-toggle {
    background-image: none
}

.btn-info.disabled,.btn-info.disabled:hover,.btn-info.disabled:focus,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled.active,.btn-info[disabled],.btn-info[disabled]:hover,.btn-info[disabled]:focus,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled].active,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info:hover,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info.active {
    background-color: #00BCD4;
    border-color: #00BCD4
}

.btn-info .badge {
    color: #00BCD4;
    background-color: #fff
}

.btn-warning {
    color: #fff;
    background-color: #FFCA28;
    border-color: #FFCA28
}

.btn-warning:focus,.btn-warning.focus {
    color: #fff;
    background-color: #f4b800;
    border-color: #a77e00
}

.btn-warning:hover {
    color: #fff;
    background-color: #f4b800;
    border-color: #eab000
}

.btn-warning:active,.btn-warning.active,.open>.btn-warning.dropdown-toggle {
    color: #fff;
    background-color: #f4b800;
    border-color: #eab000
}

.btn-warning:active:hover,.btn-warning:active:focus,.btn-warning:active.focus,.btn-warning.active:hover,.btn-warning.active:focus,.btn-warning.active.focus,.open>.btn-warning.dropdown-toggle:hover,.open>.btn-warning.dropdown-toggle:focus,.open>.btn-warning.dropdown-toggle.focus {
    color: #fff;
    background-color: #d09d00;
    border-color: #a77e00
}

.btn-warning:active,.btn-warning.active,.open>.btn-warning.dropdown-toggle {
    background-image: none
}

.btn-warning.disabled,.btn-warning.disabled:hover,.btn-warning.disabled:focus,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled.active,.btn-warning[disabled],.btn-warning[disabled]:hover,.btn-warning[disabled]:focus,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning:hover,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning.active {
    background-color: #FFCA28;
    border-color: #FFCA28
}

.btn-warning .badge {
    color: #FFCA28;
    background-color: #fff
}

.btn-danger {
    color: #fff;
    background-color: #F44336;
    border-color: #F44336
}

.btn-danger:focus,.btn-danger.focus {
    color: #fff;
    background-color: #ea1c0d;
    border-color: #a21309
}

.btn-danger:hover {
    color: #fff;
    background-color: #ea1c0d;
    border-color: #e11b0c
}

.btn-danger:active,.btn-danger.active,.open>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #ea1c0d;
    border-color: #e11b0c
}

.btn-danger:active:hover,.btn-danger:active:focus,.btn-danger:active.focus,.btn-danger.active:hover,.btn-danger.active:focus,.btn-danger.active.focus,.open>.btn-danger.dropdown-toggle:hover,.open>.btn-danger.dropdown-toggle:focus,.open>.btn-danger.dropdown-toggle.focus {
    color: #fff;
    background-color: #c8180b;
    border-color: #a21309
}

.btn-danger:active,.btn-danger.active,.open>.btn-danger.dropdown-toggle {
    background-image: none
}

.btn-danger.disabled,.btn-danger.disabled:hover,.btn-danger.disabled:focus,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled.active,.btn-danger[disabled],.btn-danger[disabled]:hover,.btn-danger[disabled]:focus,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger:hover,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger.active {
    background-color: #F44336;
    border-color: #F44336
}

.btn-danger .badge {
    color: #F44336;
    background-color: #fff
}

.btn-link {
    color: #009688;
    font-weight: normal;
    border-radius: 0
}

.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active {
    border-color: transparent
}

.btn-link:hover,.btn-link:focus {
    color: #004a43;
    text-decoration: underline;
    background-color: transparent
}

.btn-link[disabled]:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:hover,fieldset[disabled] .btn-link:focus {
    color: #777;
    text-decoration: none
}

.btn-lg,.btn-group-lg>.btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 2px
}

.btn-sm,.btn-group-sm>.btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px
}

.btn-xs,.btn-group-xs>.btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px
}

.btn-block {
    display: block;
    width: 100%
}

.btn-block+.btn-block {
    margin-top: 5px
}

input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block {
    width: 100%
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear
}

.fade.in {
    opacity: 1
}

.btn.btn-raised.btn-primary:hover,.btn.btn-raised.btn-primary:focus,.btn.btn-raised.btn-primary.focus,.btn.btn-raised.btn-primary:active,.btn.btn-raised.btn-primary.active,.open>.btn.btn-raised.btn-primary.dropdown-toggle,.btn.btn-floating.btn-primary:hover,.btn.btn-floating.btn-primary:focus,.btn.btn-floating.btn-primary.focus,.btn.btn-floating.btn-primary:active,.btn.btn-floating.btn-primary.active,.open>.btn.btn-floating.btn-primary.dropdown-toggle,.btn-group.btn-raised.btn-primary:hover,.btn-group.btn-raised.btn-primary:focus,.btn-group.btn-raised.btn-primary.focus,.btn-group.btn-raised.btn-primary:active,.btn-group.btn-raised.btn-primary.active,.open>.btn-group.btn-raised.btn-primary.dropdown-toggle,.btn-group.btn-floating.btn-primary:hover,.btn-group.btn-floating.btn-primary:focus,.btn-group.btn-floating.btn-primary.focus,.btn-group.btn-floating.btn-primary:active,.btn-group.btn-floating.btn-primary.active,.open>.btn-group.btn-floating.btn-primary.dropdown-toggle {
    background-color: #007d71;
    border-color: #007d71;
}

.btn.btn-raised,.btn-group.btn-raised {
    text-transform: uppercase;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    transition: 0.25s ease-out
}

.btn.btn-raised:hover,.btn.btn-raised:focus,.btn.btn-raised:active,.btn-group.btn-raised:hover,.btn-group.btn-raised:focus,.btn-group.btn-raised:active {
    outline: none
}

.btn.btn-raised:disabled,.btn.btn-raised.disabled,.btn-group.btn-raised:disabled,.btn-group.btn-raised.disabled {
    box-shadow: none
}
            
          
!
999px
Loading ..................

Console