<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-content">
<div class="card-header-blue">
<h1 class="card-heading">Card Header Blue</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-content">
<div class="card-header-blue">
<h1 class="card-heading">Card Header Blue</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-content">
<div class="card-header-blue">
<h1 class="card-heading">Card Header Orange</h1>
</div>
<div class="card-body">
<p class="card-p">
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of text.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
.card {
background:#FFF;
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border:1px solid #AAA;
border-bottom:3px solid #BBB;
padding:0px;
margin-top:5em;
overflow:hidden;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-body{
margin:1em;
}
.pull-left {
float: left;
}
.pull-none {
float: none !important;
}
.pull-right {
float: right;
}
.card-header {
width:100%;
color:#2196F3;
border-bottom:3px solid #BBB;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding:0px;
margin-top:0px;
overflow:hidden;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-header-blue{
background-color:#2196F3;
color:#FFFFFF;
padding:0px;
margin-top:0px;
overflow:hidden;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-header-red{
background-color:#F44336;
color:#FFFFFF;
padding:0px;
margin-top:0px;
overflow:hidden;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-heading {
display: block;
text-align: center;
font-size: 24px;
line-height: 28px;
margin-bottom: 24px;
margin-left:1em;
border-bottom: 1px #2196F3;
color:#fff;
}
.card-p {
text-align:center;
}
