<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">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>edit-fancy tabs responsive - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<style type="text/css">
/*initial of testimoni script*/
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
position: absolute;
left: 0px;
top: 0;
opacity: 0;
width: 30px;
height: 30px;
padding: 5px;
background-color: #e03e3e;
border-radius: 15px;
color: #fff;
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 3px #e03e3e; }
.nav.nav-justified > li > a > img {
max-width: 100%;
opacity: .1;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img {
opacity: 1;
-webkit-transform: none;
transform: none;
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 20px 0 20px; }
@media (min-width: 768px) {
.nav.nav-justified > li > a > .quote {
left: auto;
top: auto;
right: 20px;
bottom: 0px;
}
}
</style>
</head>
<div class="[ container text-center ]">
<div class="[ row ]">
<div class="[ col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 ]" role="tabpanel">
<div class="[ col-xs-4 col-sm-12 ]">
<!-- Nav tabs -->
<ul class="[ nav nav-justified ]" id="nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#jeki" aria-controls="jeki" role="tab" data-toggle="tab">
<img class="img-circle" src="http://rumart.weebly.com/files/theme/jeki.jpg" />
<span class="quote"><i class="fa fa-quote-left"></i></span>
</a>
</li>
<li role="presentation" class="">
<a href="#erdi" aria-controls="erdi" role="tab" data-toggle="tab">
<img class="img-circle" src="http://rumart.weebly.com/files/theme/erdi.jpg" />
<span class="quote"><i class="fa fa-quote-left"></i></span>
</a>
</li>
<li role="presentation" class="">
<a href="#hasfim" aria-controls="hasfim" role="tab" data-toggle="tab">
<img class="img-circle" src="http://rumart.weebly.com/files/theme/hasfim.jpg" />
<span class="quote"><i class="fa fa-quote-left"></i></span>
</a>
</li>
</ul>
</div>
<div class="[ col-xs-8 col-sm-12 ]">
<!-- Tab panes -->
<div class="tab-content" id="tabs-collapse">
<div role="tabpanel" class="tab-pane fade in active" id="jeki">
<div class="tab-inner">
<pg style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 16px;">Mereka cukup komunikatif, sesi konsultasinya bagi kami cukup solutif terhadap proyek yg sedang dikerjakan.</pg>
<hr style = 'background-color:#e03e3e; border-width:0; color:#ffffff; height:1px; display: inline-block; text-align: left; width:100%;' />
<pl style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 14px;"><strong class="text-uppercase">Moch. Zacky</strong></pl><br>
<pd style="font-family: 'Roboto', sans-serif; color:#8b909d; font-size: 14px;"><em class="text-capitalize"> Site Engineering Manager, Hutama Karya</em></p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="erdi">
<div class="tab-inner">
<pg style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 16px;">Yang membedakan, diantaranya adalah hasil desainnya yang unik.</p>
<hr style = 'background-color:#e03e3e; border-width:0; color:#ffffff; height:1px; display: inline-block; text-align: left; width:100%;' />
<pl style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 14px;"><strong class="text-uppercase">Erdhi BP</strong></pl><br>
<pd style="font-family: 'Roboto', sans-serif; color:#8b909d; font-size: 14px;"><em class="text-capitalize"> PIC, BSB</em></p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="hasfim">
<div class="tab-inner">
<pg style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 16px;">Hasil 3D nya bagus & sesuai dengan harapan.</pg>
<hr style = 'background-color:#e03e3e; border-width:0; color:#ffffff; height:1px; display: inline-block; text-align: left; width:100%;' />
<pl style="font-family: 'Roboto', sans-serif; color:#262b38; font-size: 14px;"><strong class="text-uppercase">Hasfim Nur Rusli</strong></pl><br>
<pd style="font-family: 'Roboto', sans-serif; color:#8b909d; font-size: 14px;"><em class="text-capitalize"> Site Manager, Bangun Cipta Kontraktor</em></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
