<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 product-detail-online"> <div class="row" style="margin-top:20px"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1" class="active"></li> <li data-target="#myCarousel" data-slide-to="2" class="active"></li> <li data-target="#myCarousel" data-slide-to="3" class="active"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://kudo.co.id/wp-pictures/product/example/woven_che_white.jpg" alt="First slide"> </div> <div class="item"> <img src="http://kudo.co.id/wp-pictures/product/example/woven_che_white_belakang.jpg" alt="First slide"> </div> <div class="item"> <img src="http://kudo.co.id/wp-pictures/product/example/woven_che_white_depan.jpg" alt="First slide"> </div> <div class="item"> <img src="http://kudo.co.id/wp-pictures/product/example/woven_che_white_samping.jpg" alt="First slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <div class="info info-red">Diskon Terbatas <span class="fa fa-clock-o"></span> Tinggal 1 hari lagi</div> </div> </div> <div class="row" style="margin-top:20px"> <div class="col-xs-12 col-sm-12 col-md-6"> <h1>ARJUNA WEDDING A123KKKS</h1> <h2>OLLO MAN</h2> </div> <div class="col-xs-12 col-sm-12 col-md-3"> <div class="original-price">Rp 516. 600</div> <div class="price">Rp 129.000</div> </div> <div class="col-xs-12 col-sm-12 col-md-2"> <button type="button" class="btn btn-lg btn-success btn-lg">Find Agen</button> </div> </div> <div class="row" style="margin-top:20px"> <div class="col-xs-12 col-sm-12 col-md-8"> <p> <ul> <li>Kemeja Pria</li> <li>Warna Biru</li> <li>Motif kotak</li> <li>Material cotton</li> <li>Aksen kerah</li> <li>Kancing depan</li> <li>Lengan pendek</li> </ul> </p> </div> <div class="col-xs-12 col-sm-12 col-md-4"> Pilih Ukuran <select name="choose"><option>S</option><option>M</option></select> <br/> Powered by <img src="http://kudo.co.id/wp-pictures/product/example/vendor/vipplaza.png"> </div> </div> </div>

.product-detail-online h2 { color: #9F9F9F; font-style: italic; font-size: 24px; } .product-detail-online .price { color: #179647; font-size: 32px; font-weight: bold; } .product-detail-online button { background: #9ACD01; border: none; padding: 10px 50px; } .product-detail-online .info.info-red { background: red; color: #fff; opacity: 0.45; padding: 10px; position: relative; text-align: center; z-index: 1; }