<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">
<title>Testimoni pengguna jasa Rumart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Hasil testimoni dari para customer yang pernah menggunakan jasa desain Rumart" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400" rel="stylesheet">
<style type="text/css">
hc {
font-family: 'Roboto Condensed', sans-serif;
font-size: 2.25em; /* 36 / 16 */
line-height: 1.333333333333333em; /* 48 / 36 */
margin-bottom:0.6667em; /* 24 / 36 */
font-weight: 300;
color: #2a2a2a;
display: block;
text-align: center;
letter-spacing: -.5px;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.25em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
py {
font-family: 'Roboto', sans-serif;
font-size: 1.125em; /* 18 / 16 */
line-height: 1.333333333333333em; /* 24 / 18 */
margin-bottom: 1.333333333333333em; /* 24 / 18 */
padding: 0 6%;
font-weight: 300;
color: #666;
display: block;
text-align: center;
-webkit-margin-before: 1em;
-webkit-margin-after: 3em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
}
hr.style2 {
border-top: 1px solid #db4437;
text-align: center;
width: 150px;
display: block;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
}
hr.style2:after {
font-family: 'Material Icons';
content: '\e0bc';
float: center;
position: relative;
top: -5px;
left: -2px;
background: #fff;
color: #db4437;
font-size: 16px;
}
/*initial of testimoni script*/
pg {
font-family: 'Roboto', sans-serif;
color:#2a2a2a;
font-size: 1em;
line-height: 1.5em; /* 24 / 16 */
margin-bottom: 0.5em; /* 24 / 16 */
font-weight: 300;
display: block;
}
hr1 {
color:#db4437;
border-style: solid;
border-width: 1px;
display: inline-block;
text-align: left;
width:50%;
margin: 0.5em 0;
}
pl {
font-family: 'Roboto', sans-serif;
color:#2a2a2a;
font-weight: 500;
font-size: 1em;
line-height: 1.5em; /* 24 / 16 */
margin-bottom: 1em; /* 24 / 16 */
text-transform: uppercase;
display: block;
}
pd {
font-family: 'Roboto', sans-serif;
color: #666;
font-weight: 300;
font-size: 1em;
line-height: 1.5em; /* 24 / 16 */
margin-bottom: 1.5em; /* 24 / 16 */
font-style: italic;
}
.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>
<body>
<hc>
Apa Kata Mereka ?
</hc>
<hr class="style2">
<py>Testimonial dari para customer yang puas dengan service kami</py>
<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>Mereka cukup komunikatif, sesi konsultasinya bagi kami cukup solutif terhadap proyek yg sedang dikerjakan.</pg>
<hr1></hr1>
<pl>Moch. Zacky</pl>
<pd >Site Engineering Manager, Hutama Karya</pd>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="erdi">
<div class="tab-inner">
<pg>Yang membedakan, diantaranya adalah hasil desainnya yang unik.</pg>
<hr1></hr1>
<pl>Erdhi BP</pl>
<pd>PIC, BSB</pd>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="hasfim">
<div class="tab-inner">
<pg>Hasil 3D nya bagus & sesuai dengan harapan.</pg>
<hr1></hr1>
<pl>Hasfim Nur Rusli</pl>
<pd> Site Manager, Bangun Cipta Kontraktor </pd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
