"Cleaning Service Pricing Table"
Bootstrap 3.0.0 Snippet by Anita26

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="price-head"> <h3> House Cleaning</h3> </div> <div class="price-block"> <div class="price-content"> <h4>Kitchen & Bedrooms</h4> <div class="price-text"> <p>$28/<small style="font-size: 10px;"> hour</small></p> </div> <ul> <li>Wipe Cabinets</li> <li>Wipes Tops</li> <li>Dust Tops of Cabinets</li> </ul> </div> <div class="price-content"> <h4>Bathroom</h4> <div class="price-text"> <p>$29/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>Dust Counters</li> <li>Dust Light</li> <li>Wipe Countertops</li> </ul> </div> <div class="price-content"> <h4>Living Room</h4> <div class="price-text"> <p>$29/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>Make Beds</li> <li>Dust Furniture</li> <li>Dust Mini-blinds</li> </ul> </div> <div class="text-center mt30"><a href="https://goo.gl/LveDBS "target="_blank" class="btn btn-primary btn-sm">book your order now</a></div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <div class="price-head"> <h3>Office Cleaning</h3> </div> <div class="price-block"> <div class="price-content"> <h4>Once a Week</h4> <div class="price-text"> <p>$270/<small style="font-size: 10px;"> hour</small></p> </div> <ul> <li>( 4 Sessions - 3 hrs per Session )</li> </ul> </div> <div class="price-content"> <h4>Twice a Week</h4> <div class="price-text"> <p>$574/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>( 8 Sessions - 3 hrs per Session )</li> </ul> </div> <div class="price-content"> <h4>Thrice a Week</h4> <div class="price-text"> <p>$670/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>( 12 Sessions - 3 hrs per Session )</li> </ul> </div> <div class="price-content"> <h4>Mon - Fri Daily</h4> <div class="price-text"> <p>$990/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>( 20 Sessions - 2 hrs per Session )</li> </ul> </div> <div class="text-center mt30"><a href="https://goo.gl/LveDBS" target="_blank" class="btn btn-primary btn-sm">book your order now</a></div> </div> </div> <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"> <div class="price-head"> <h3>Commercial Cleaning</h3> </div> <div class="price-block"> <div class="price-content"> <h4>Kitchen & Bedrooms</h4> <div class="price-text"> <p>$28/<small style="font-size: 10px;"> hour</small></p> </div> <ul> <li>Wipe Cabinets</li> <li>Wipes Tops</li> <li>Dust Tops of Cabinets</li> </ul> </div> <div class="price-content"> <h4>Bathroom</h4> <div class="price-text"> <p>$29/ <small style="font-size: 10px;">hour</small></p> </div> <ul> <li>Dust Counters</li> <li>Dust Light</li> <li>Wipe Countertops</li> </ul> </div> <div class="price-content"> <h4>Living Room</h4> <div class="price-text"> <p>$29/ <small style="font-size: 10px;">hour</small></p> </div> <ul><li>Make Beds</li> <li>Dust Furniture</li> <li>Dust Mini-blinds</li> </ul> </div> <div class="text-center mt30"><a href="https://goo.gl/LveDBS"target="_blank" class="btn btn-primary btn-sm">book your order now</a></div> </div> </div> </div> created by <a href="https://goo.gl/LveDBS" target="_blank">easetemplate</a> </div>
.price-block { border: 1px solid #e5eae8; background-color: #fff; padding: 40px; margin-bottom: 30px; border-radius: 0px 0px 5px 5px; margin-top: -1px; } .price-head { background-color: #f0f4f2; padding: 4px 0px 15px 30px; border-radius: 5px 5px 0px 0px; border: 1px solid #e5eae8; } .price-block ul {padding:0; list-style:none; border-bottom: 1px #d7dcda dashed; margin-bottom: 16px; margin-top: 15px; padding-bottom: 16px; } .price-block ul li { color: #676462; line-height: 24px; font-size: 13px; font-weight: 500; } .price-content { position: relative; } .price-text { color: #272625; position: absolute; font-weight: 500; top: -2px; right: 0px; } .btn { font-family: 'Poppins', sans-serif; font-size: 13px; text-transform: uppercase; font-weight: 700; padding: 14px 24px; margin-bottom: 4px; letter-spacing: 1.4px; border-radius: 50px; line-height: 1.6; border: transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-primary { background-color: #fb6a30; color: #fff; } .btn-primary:hover { background-color: #ea5c24; color: #fff; } .btn-primary.focus, .btn-primary:focus { background-color: #ea5c24; color: #fff; } .btn-default { background-color: #32c083; color: #fff; } .btn-default:hover { background-color: #1c9e66; color: #fff; } .btn-default.focus, .btn-default:focus { background-color: #1c9e66; color: #fff; }

Related: See More


Questions / Comments: