"Pricing Table - Equal Height"
Bootstrap 3.3.0 Snippet by michaeldaughtry

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title></title> </head> <body> <!-- Page Content --> <div class="container"> <!-- Page Heading/Breadcrumbs --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">About Us <small></small> </h1> <ol class="breadcrumb"> <li><a href="index.html"></a> </li> </ol> </div> </div> <!-- .row --> <!-- Intro Content --> <div class="row"> <div class="col-md-6"> <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/mendalytics/ResearchTriangle.jpg" alt=""> </div> <div class="col-md-6"> <h2></h2> <p>The idea for Mendalytics occurred to me when Tracy and I were at our daughters therapist to evaluate how she was progressing. She had been suffering from sever depression, suicidal thoughts, and sudden fits of anger. She had been seen by several therapists who had prescribed different medications and were not certain exactly what to diagnose her with. At this appointment, the therapist asked our daughter how she was feeling over the past few weeks and if she thought the medication helped.</p> <blockquote class="left-pull"> <p>...There was nothing tangible to review.</p> </blockquote> <p>Not surprisingly, our teenage daughter responded with a simple shrug and "I dunno". The appointment lasted for a few more minutes with seemingly little progress as there was nothing tangible to review, and the entire content of the appointment rested on our ability to remember how she "felt" over the past several weeks. We then discussed increasing the dosage of medication because of the lack of improvement.</p> <p>The therapist explained to us how there was little understanding about how these drugs work, but emphasized the serious side-effects. I asked how medication is typically prescribed, and she said that different medications can react differently from person-to-person, and little is known about why this is. ...From that frustration and concern, the Mendalytics concept was born... </p> </div> </div> <!-- /.row --> <!-- Team Members --> <div class="row"> <div class="col-lg-12"> <h2 class="page-header"></h2> </div> <div class="col-md-4 text-center"> <div class="thumbnail"> <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/mendalytics/josh.jpg" alt=""> <div class="caption"> <h3>Josh and Tracy<br> <small></small> </h3> <p></p> </div> </div> </div> <p>Tracy and I are high school sweethearts and have been married for 17 years with 2 beautiful daughters. Tracy is an office manager at a local small business and I am a consultant for data analytics related to IT Finance. This is a very personal cause for us and we have been directly impacted not only with our daughter, but also Tracy's brother who is bi-polar and schitzophrenic. The several year struggle he endured before his doctors found the right medication and dosage is heartbreaking. It is a helpless feeling for family members to stand by and watch someone you care for fall apart! As I thought about what I could do to help, I began to realize how many others are affected by this same issue. </p> </div> <div class="col-md-4 text-center"> <div class="thumbnail"> <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/mendalytics/mike.jpg" alt=""> <div class="caption"> <h3>Michael and Diane<br> <small></small> </h3> <p></p> </div> </div> </div> <p>Diane and I met late in life and have a blended family of four girls and two boys. Diane is a project manager and I am also a consultant for data analytics. One of our daughters is dealing with some trauma from a few years ago and we have also been experiencing the same sort of issues as Josh and Tracy with our doctor. The up and down experimentation with different drugs trying to find the right one has been difficult to say the least. The lack of appropriate information has been a major cause and we feel strongly that Mendalytics can make a positive difference in the success of not only our daughters cases but anyone who might have to deal with this issue. </p> <!-- /.row --> <!-- Our Customers --> <div class="row"> <div class="col-lg-12"> <h2 class="page-header"></h2> </div> </div> <!-- /.row --> <!-- Footer --> <footer> <div class="row"> <div class="col-lg-12"> <p></p> </div> </div> </footer> </div> <!-- /.container --> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> </body> </html>
@import "bootstrap-sprockets"; @import "bootstrap"; /* mixins, variables, etc. */ $gray-medium-light: #eaeaea; @mixin box_sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* miscellaneous */ .debug_dump { clear: both; float: left; width: 100%; margin-top: 45px; @include box_sizing; } /* universal */ body { padding-top: 60px; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; } .center h1 { margin-bottom: 10px; } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.2em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: #777; } p { font-size: 1.1em; line-height: 1.7em; } /* header */ #logo { float: left; margin-right: 10px; font-size: 1.7em; color: #fff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; } #logo:hover { color: #fff; text-decoration: none; } /* footer */ footer { margin-top: 45px; padding-top: 5px; border-top: 1px solid #eaeaea; color: #777; a { color: #555; &:hover{ color:#222; } } } footer small { float: left; } footer ul { float: right; list-style: none; } footer ul li { float: left; margin-left: 15px; } /* sidebar */ aside { section.user_info { margin-top: 20px; } section { padding: 10px 0; margin-top: 20px; &:first-child { border: 0; padding-top: 0; } span { display: block; margin-bottom: 3px; line-height: 1; } h1 { font-size: 1.4em; text-align: left; letter-spacing: -1px; margin-bottom: 3px; margin-top: 0; } } } .gravatar { float: left; margin-right: 10px; } .gravatar_edit { margin-top: 15px; } /* forms */ input, textarea, select, .uneditable-input { border: 1px solid #bbb; width: 100%; margin-bottom: 15px; @include box_sizing; } input { height: auto !important; } #error_explanation { color: red; ul { color: red; margin: 0 0 30px 0; } } .field_with_errors { @extend .has-error; .form-control { color: $state-danger-text; } } .checkbox { margin-top: -10px; margin-bottom: 10px; span { margin-left: 20px; font-weight: normal; } } #session_remember_me { width: auto; margin-left: 0; } /* Users index */ .users { list-style: none; margin: 0; li { overflow: auto; padding: 10px 0; border-bottom: 1px solid $gray-lighter; } } .box2 { display: inline-block; width: 600px; height: 100px; margin: 1em; } /** pull-quote styles **/ .left-pull { display: block; padding: 7px 11px; margin-left: 5px; width: 170px; float: left; margin-right: 10px; background: #555; color: #bcbcbc; font-weight: bold; line-height: 17px; font-size: 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .left-pull p { font-style: italic; color: #d5d5d5; } .left-pull .ref { font-size: 11px; } /** feature panel with collapse --- testing testing testing **/ .pricing-table .plan { border-radius: 5px; text-align: center; background-color: #f3f3f3; -moz-box-shadow: 0 0 6px 2px #b0b2ab; -webkit-box-shadow: 0 0 6px 2px #b0b2ab; box-shadow: 0 0 6px 2px #b0b2ab; } .plan:hover { background-color: #fff; -moz-box-shadow: 0 0 12px 3px #b0b2ab; -webkit-box-shadow: 0 0 12px 3px #b0b2ab; box-shadow: 0 0 12px 3px #b0b2ab; } .plan { padding: 20px; color: #000000; background-color: #5e5f59; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-bronze { padding: 20px; color: #fff; background-color: #665D1E; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-silver { padding: 20px; color: #fff; background-color: #C0C0C0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-gold { padding: 20px; color: #fff; background-color: #FFD700; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .pricing-table .plan .plan-name span { font-size: 20px; } .pricing-table .plan ul { list-style: none; margin: 0; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .pricing-table .plan ul li.plan-feature { padding: 15px 10px; border-top: 1px solid #c5c8c0; } .pricing-three-column { margin: 0 auto; width: 45%; } .pricing-variable-height .plan { float: none; margin-left: 2%; vertical-align: bottom; display: inline-block; zoom:1; *display:inline; } .plan-mouseover .plan-name { background-color: #4e9a06 !important; } .btn-plan-select { padding: 8px 25px; font-size: 18px; } /** KPI's on privacy policy page --- testing testing testing **/ @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900|Oswald); .status { font-family: 'Source Sans Pro', sans-serif; } .status .panel-title { font-family: 'Oswald', sans-serif; font-size: 72px; font-weight: bold; color: #fff; line-height: 45px; padding-top: 20px; letter-spacing: -0.8px; } /** tabbed PROFILE PAGE --- testing testing testing **/ /* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; margin-left: 0px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #000000; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #000000; background-image: #000000; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #000000; } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } /* Timeline in APPROACH page*/ .timeline { position: relative; padding:4px 0 0 0; margin-top:22px; list-style: none; } .timeline>li:nth-child(even) { position: relative; margin-bottom: 50px; height: 180px; right:-100px; } .timeline>li:nth-child(odd) { position: relative; margin-bottom: 50px; height: 180px; left:-100px; } .timeline>li:before, .timeline>li:after { content: " "; display: table; } .timeline>li:after { clear: both; min-height: 170px; } .timeline > li .timeline-panel { position: relative; float: left; width: 41%; padding: 0 20px 20px 30px; text-align: right; } .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li .timeline-image { z-index: 100; position: absolute; left: 50%; border: 7px solid #3b5998; border-radius: 100%; background-color: #3b5998; box-shadow: 0 0 5px #4582ec; width: 200px; height: 200px; margin-left: -100px; } .timeline>li .timeline-image h4 { margin-top: 12px; font-size: 10px; line-height: 14px; } .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 30px 20px 20px; text-align: left; } .timeline>li.timeline-inverted>.timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li.timeline-inverted>.timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li:last-child { margin-bottom: 0; } .timeline .timeline-heading h4 { margin-top:22px; margin-bottom: 4px; padding:0; color: #b3b3b3; } .timeline .timeline-heading h4.subheading { margin:0; padding:0; text-transform: none; font-size:18px; color:#777; } .timeline .timeline-body>p, .timeline .timeline-body>ul { margin-bottom: 0; color:#777; } /*Style for even div.line*/ .timeline>li:nth-child(odd) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 690px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(-44deg); /* IE 9 */ -webkit-transform: rotate(-44deg); /* Safari */ transform: rotate(-44deg); box-shadow: 0 0 5px #4582ec; } /*Style for odd div.line*/ .timeline>li:nth-child(even) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 450px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(44deg); /* IE 9 */ -webkit-transform: rotate(44deg); /* Safari */ transform: rotate(44deg); box-shadow: 0 0 5px #4582ec; } /* Medium Devices, .visible-md-* */ @media (min-width: 992px) and (max-width: 1199px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 690px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 76%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Small Devices, Tablets */ @media (min-width: 768px) and (max-width: 991px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 520px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Custom, iPhone Retina */ @media only screen and (max-width: 767px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline > li .timeline-image { position: static; width: 150px; height: 150px; margin-bottom: 0px; } .timeline > li:nth-child(even) .timeline-image { left: 0; margin-left: 0; } .timeline > li:nth-child(odd) .timeline-image { float: right; left: 0px; margin-left: 0; } .timeline > li:nth-child(even) .timeline-panel { width: 100%; padding: 0 0 20px 14px; } .timeline > li:nth-child(odd) .timeline-panel { width: 100%; padding: 0 14px 20px 0px; } .timeline > li .line { display: none; } } /* END OF ORIGINAL Timeline in APPROACH page*/ /* BEGINNING OF NEW Timeline in APPROACH page*/ img { vertical-align: middle; } .img-responsive { display: block; height: auto; max-width: 100%; } .img-rounded { border-radius: 3px; } .img-thumbnail { background-color: #fff; border: 1px solid #ededf0; border-radius: 3px; display: inline-block; height: auto; line-height: 1.428571429; max-width: 100%; moz-transition: all .2s ease-in-out; o-transition: all .2s ease-in-out; padding: 2px; transition: all .2s ease-in-out; webkit-transition: all .2s ease-in-out; } .img-circle { border-radius: 50%; } .timeline-centered { position: relative; margin-bottom: 30px; } .timeline-centered:before, .timeline-centered:after { content: " "; display: table; } .timeline-centered:after { clear: both; } .timeline-centered:before, .timeline-centered:after { content: " "; display: table; } .timeline-centered:after { clear: both; } .timeline-centered:before { content: ''; position: absolute; display: block; width: 4px; background: #f5f5f6; /*left: 50%;*/ top: 20px; bottom: 20px; margin-left: 30px; } .timeline-centered .timeline-entry { position: relative; /*width: 50%; float: right;*/ margin-top: 5px; margin-left: 30px; margin-bottom: 10px; clear: both; } .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after { content: " "; display: table; } .timeline-centered .timeline-entry:after { clear: both; } .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after { content: " "; display: table; } .timeline-centered .timeline-entry:after { clear: both; } .timeline-centered .timeline-entry.begin { margin-bottom: 0; } .timeline-centered .timeline-entry.left-aligned { float: left; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner { margin-left: 0; margin-right: -18px; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time { left: auto; right: -100px; text-align: left; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon { float: right; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label { margin-left: 0; margin-right: 70px; } .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after { left: auto; right: 0; margin-left: 0; margin-right: -9px; -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .timeline-centered .timeline-entry .timeline-entry-inner { position: relative; margin-left: -20px; } .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; } .timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; } .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; } .timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time { position: absolute; left: -100px; text-align: right; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span { display: block; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child { font-size: 15px; font-weight: bold; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child { font-size: 12px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon { background: #fff; color: #737881; display: block; width: 40px; height: 40px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-align: center; -moz-box-shadow: 0 0 0 5px #f5f5f6; -webkit-box-shadow: 0 0 0 5px #f5f5f6; box-shadow: 0 0 0 5px #f5f5f6; line-height: 40px; font-size: 15px; float: left; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary { background-color: #303641; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary { background-color: #ee4749; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success { background-color: #00a651; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info { background-color: #21a9e1; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning { background-color: #fad839; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger { background-color: #cc2424; color: #fff; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position: relative; background: #f5f5f6; padding: 1em; margin-left: 60px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after { content: ''; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-width: 9px 9px 9px 0; border-color: transparent #f5f5f6 transparent transparent; left: 0; top: 10px; margin-left: -9px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p { color: #737881; font-family: "Noto Sans",sans-serif; font-size: 12px; margin: 0; line-height: 1.428571429; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p + p { margin-top: 15px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 { font-size: 16px; margin-bottom: 10px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a { color: #303641; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span { -webkit-opacity: .6; -moz-opacity: .6; opacity: .6; -ms-filter: alpha(opacity=60); filter: alpha(opacity=60); } /* END OF NEW Timeline in APPROACH page*/ <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/modern-business.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Related: See More


Questions / Comments: