<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 transparent">
<div class="col-md-6">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span> </button>
</div>
</div>
<div class="col-md-6">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
<div class="col-md-12">
<div class="tuyin first">
<span class="title">Lorem Ipsum</span>
<div class="plan-name">Neque porro quisquam est qui dolorem</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mi arcu, finibus ac imperdiet a, ullamcorper sed mauris. Donec aliquam ex ultrices nulla bibendum, vel mattis massa ullamcorper. Cras eget elit luctus, rutrum sem nec, placerat libero. Integer eu pharetra orci. Nam eros ex, tempor vitae accumsan sed, hendrerit a nibh. </p>
</div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span> </button>
</div>
</div>
</div>
</div>
body {
background: rgba(59,183,120,1);background: -moz-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -webkit-gradient(left top, right top, color-stop(47%, rgba(59,183,120,1)), color-stop(100%, rgba(71,196,218,1)));background: -webkit-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -o-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -ms-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );
}
.transparent .tuyin
{
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.37);
border: 1px solid #F7F7F7;
border-radius: 5px;
box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
padding: 4%;
text-align: center;
width: 97%;
min-height: 315px;
position: relative;
margin-bottom: 25px;
}
.transparent .tuyin .title
{
text-align: center;
color: #FFF;
font-size: 49px;
}
.transparent .tuyin .plan-name
{
font-size: 20px;
font-weight: 400;
border-bottom: 1px solid #FFF;
padding-bottom: 15px;
padding: 10px
}
.transparent .tuyin .text
{
margin-top: 20px;
color: #474747;
font-weight: 300;
margin-bottom: 13px;
font-size: 16px;
text-align: justify;
}
