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="container-fluid">
  <div class="row row-text">
    <h2>Are You Ready to Take Your Business to the Next Level?</h2>
    <p>Whether you’re a Martial Arts school, Fitness club, Yoga/Pilates studio, CrossFit® gym or Personal Trainer, our fully-integrated software gives you all the tools you need to maximize efficiency and profitability for your business.</p>
    <p><strong>Select the plan that fits your business today!</strong><span class="small">&nbsp; Don't worry we can upgrade seamlessly as your business grows.</span></p>
  </div><!-- end first row -->
  <div class="row"><!-- pricing tables-->
    <div class="col-xs-10 col-md-6 col-lg-3">
            <div class="panel panel-primary primary-1">
              <div class="panel-heading">
                <h3 class="panel-title">
                        Express</h3>
              </div>
              <div class="panel-body">
                <div class="the-price">
                  <h1>
                            $69<span class="subscript">/mo</span></h1>
                  <small>1 month FREE trial</small>
                </div>
                <table class="table">
                  <tr>
                    <td>
                      2 Users
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      No Setup Fee
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Free Training
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      Unlimited Support
                    </td>
                  </tr>
                </table>
              </div>
              <div class="panel-footer">
                <a href="#" class="btn btn-success" role="button">Buy Now</a>
              </div>
            </div>
          </div>
    <div class="col-xs-10 col-md-6 col-lg-3">
            <div class="panel panel-primary primary-2">
              <div class="cnrflash">
                <div class="cnrflash-inner">
                  <span class="cnrflash-label">BEST VALUE</span>
                </div>
              </div>
              <div class="panel-heading">
                <h3 class="panel-title">
                        Professional</h3>
              </div>
              <div class="panel-body">
                <div class="the-price">
                  <h1>
                            $89<span class="subscript">/mo</span></h1>
                  <small>1 month FREE trial</small>
                </div>
                <table class="table">
                  <tr>
                    <td>
                      3-10 Users
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      No Setup Fee
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Free Training
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      Unlimited Support
                    </td>
                  </tr>
                </table>
              </div>
              <div class="panel-footer">
                <a href="#" class="btn btn-success" role="button">Buy Now</a></div>
            </div>
          </div>
    <div class="col-xs-10 col-md-6 col-lg-3">
            <div class="panel panel-primary primary-3">
              <div class="panel-heading">
                <h3 class="panel-title">
                        Business</h3>
              </div>
              <div class="panel-body">
                <div class="the-price">
                  <h1>
                            $99<span class="subscript">/mo</span></h1>
                  <small>1 month FREE trial</small>
                </div>
                <table class="table">
                  <tr>
                    <td>
                      11-20 Users
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      No Setup Fee
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Free Training
                    </td>
                  </tr>
                  <tr class="active">
                    <td>
                      Unlimited Support
                    </td>
                  </tr>

                </table>
              </div>
              <div class="panel-footer">
                <a href="#" class="btn btn-success" role="button">Buy Now</a></div>
            </div>

          </div>
    <div class="col-xs-10 col-md-6 col-lg-3">
            <div class="panel panel-primary primary-4">
              <div class="panel-heading">
                <h3 class="panel-title">
                        Enterprise</h3>
              </div>
              <div class="panel-body">
                <div class="the-price">
                  <h1>
                            $159<span class="subscript">/mo</span></h1>
                  <small>1 month FREE trial</small>
                </div>
                <table class="table">
                  <tbody>
                    <tr>
                      <td>
                        Unlimited Users
                      </td>
                    </tr>
                    <tr class="active">
                      <td>
                        $500 Setup Fee
                      </td>
                    </tr>
                    <tr>
                      <td>
                        Free Training
                      </td>
                    </tr>
                    <tr class="active">
                      <td>
                        Unlimited Support
                      </td>
                    </tr>

                  </tbody>
                </table>
              </div>
              <div class="panel-footer">
                <a href="#" class="btn btn-success" role="button">Buy Now</a>
              </div>
            </div><!-- end of panel 4 -->  
          </div><!-- end last of the picing table columns -->
  </div><!-- end pricing row -->
  <div class="row row-text"><!-- bullet list row -->
    <p><strong>Here are just a few of the benefits that myVolo clients are raving about:</strong></p>
    <p>
      <ul class="list-inline">
        <li class="list-inline-dots">More Time to Build Your Business</li>
        <li class="list-inline-dots">Increased Revenue</li>
        <li class="list-inline-dots">Stronger Member Retention</li>
        <li class="list-inline-dots">Improved Member Satisfaction</li>
        <li class="list-inline-dots">Better Cash Flow</li>
        <li class="list-inline-dots">Decrease in Outstanding Invoices</li>
      </ul>
    </div>
  </div>
</div><!-- end container -- >

            
          
!
            
              body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Main Content row*/
.container-fluid {
  font-family: 'Droid Sans', sans-serif;
  min-height: calc(100vh - 120px);
}

.row-text {
  padding: 15px;
}

.panel
{
    text-align: center;
}
.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
.panel-body
{
    padding: 0px;
    text-align: center;
}

.the-price
{
    background-color: rgba(220,220,220,.17);
    box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
    padding: 20px;
    margin: 0;
}

.the-price h1
{
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.subscript
{
    font-size: 25px;
}

/* CSS-only ribbon styles    */
.cnrflash
{
    /*Position correctly within container*/
    position: absolute;
    top: -9px;
    right: 4px;
    z-index: 1; /*Set overflow to hidden, to mask inner square*/
    overflow: hidden; /*Set size and add subtle rounding  		to soften edges*/
    width: 100px;
    height: 100px;
    border-radius: 3px 5px 3px 0;
}
.cnrflash-inner
{
    /*Set position, make larger then 			container and rotate 45 degrees*/
    position: absolute;
    bottom: 0;
    right: 0;
    width: 145px;
    height: 145px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -o-transform: rotate(45deg); /* Opera */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin: 100% 100%; /*Purely decorative effects to add texture and stuff*/ /* Safari and Chrome */
    -ms-transform-origin: 100% 100%;  /* IE 9 */
    -o-transform-origin: 100% 100%; /* Opera */
    -moz-transform-origin: 100% 100%; /* Firefox */
    background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1,1,1,.2) 50%);
    background-size: 4px,auto, auto,auto;
    background-color: #aa0101;
    box-shadow: 0 3px 3px 0 rgba(1,1,1,.5), 0 1px 0 0 rgba(1,1,1,.5), inset 0 -1px 8px 0 rgba(255,255,255,.3), inset 0 -1px 0 0 rgba(255,255,255,.2);
}
.cnrflash-inner:before, .cnrflash-inner:after
{
    /*Use the border triangle trick to make  				it look like the ribbon wraps round it's 				container*/
    content: " ";
    display: block;
    position: absolute;
    bottom: -16px;
    width: 0;
    height: 0;
    border: 8px solid #800000;
}
.cnrflash-inner:before
{
    left: 1px;
    border-bottom-color: transparent;
    border-right-color: transparent;
}
.cnrflash-inner:after
{
    right: 0;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.cnrflash-label
{
    /*Make the label look nice*/
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    padding-bottom: 5px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(1,1,1,.8);
    font-size: 0.95em;
    font-weight: bold;
    text-align: center;
}


.list-inline-dots:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
}

.primary-3>.panel-heading {
    color: #fff;
    background-color: #00a3e6;
    border-color: #ACE1F7;
}

.primary-4>.panel-heading {
    color: #fff;
    background-color: #1bb3ad;
    border-color: #ACE1F7;
}
.primary-1>.panel-heading {
    color: #fff;
    background-color: #00807b;
    border-color: #ACE1F7;
}
.primary-2>.panel-heading {
    color: #fff;
    background-color: #b37000;
    border-color: #ACE1F7;
}

.btn-success {
    color: #fff;
    background-color: #e64300;
    border-color: #4cae4c;
}

.send-button-success {
  font-weight: normal;
}
            
          
!
999px
Loading ..................

Console