Skip to content

Instantly share code, notes, and snippets.

@daimagine
Created July 4, 2015 06:47
Show Gist options
  • Save daimagine/bf67d2352fe5e3bb4068 to your computer and use it in GitHub Desktop.
Save daimagine/bf67d2352fe5e3bb4068 to your computer and use it in GitHub Desktop.
<body class="error-body no-top breakpoint-480 pace-done">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="-webkit-transform: translate3d(100%, 0px, 0px); transform: translate3d(100%, 0px, 0px);">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<header class="product-header">
<div class="pull-left logo-container">
<!-- BEGIN LOGO-->
<a href="javascript:;"><img src="images/logo.png" alt="" data-src="images/logo.png" width="86" height="38" class="logo">
</a>
<!-- END LOGO-->
</div>
<div class="pull-right button-container"><a href="javascript:;" class="btn btn-primary btn-normal">Mulai Jualan</a>
</div>
</header>
<div class="container">
<!-- BEGIN CONTENT-->
<div class="product-content">
<div class="row">
<div class="col-xs-12 col-sm-7">
<div id="product-carousel" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer owl-height" style="padding-left: 0px; padding-right: 0px; height: 523px;">
<div class="owl-stage" style="width: 2615px; transform: translate3d(-1046px, 0px, 0px); transition: 0.25s; -webkit-transition: 0.25s;">
<div class="owl-item cloned" style="width: 523px; margin-right: 0px;">
<div class="item"><img src="images/loader.gif" data-src="images/ex-product-photo-02.png" class="lazy img-responsive">
</div>
</div>
<div class="owl-item" style="width: 523px; margin-right: 0px;">
<div class="item"><img src="images/loader.gif" data-src="images/ex-product-photo-00.png" class="lazy img-responsive">
</div>
</div>
<div class="owl-item active" style="width: 523px; margin-right: 0px;">
<div class="item"><img src="images/loader.gif" data-src="images/ex-product-photo-01.png" class="lazy img-responsive">
</div>
</div>
<div class="owl-item" style="width: 523px; margin-right: 0px;">
<div class="item"><img src="images/loader.gif" data-src="images/ex-product-photo-02.png" class="lazy img-responsive">
</div>
</div>
<div class="owl-item cloned" style="width: 523px; margin-right: 0px;">
<div class="item"><img src="images/loader.gif" data-src="images/ex-product-photo-00.png" class="lazy img-responsive">
</div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style=""><span class="fa fa-chevron-left"></span>
</div>
<div class="owl-next" style=""><span class="fa fa-chevron-right"></span>
</div>
</div>
<div class="owl-dots" style="display: none;"></div>
</div>
</div>
<div class="grid simple no-margin-bottom">
<div class="grid-title">
<h3>Quota</h3>
</div>
<div class="grid-body">
<div class="progress progress-striped active progress-large no-margin">
<div data-percentage="0%" style="width: 40%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-primary"></div>
</div>
</div>
</div>
<div id="previewVideo" class="pretty-embed"><img src="//img.youtube.com/vi/Cbti19KM3wk/maxresdefault.jpg" width="100%" alt="YouTube Video Preview">
</div>
<div id="audioPlayer" class="m-t-20 clearfix">
<div class="sm2-bar-ui flat compact full-width">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd"><a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
</div>
</div>
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
<ul class="sm2-playlist-bd">
<li><b>Fluxcup</b>- Ya</li>
</ul>
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball">
<div class="icon-overlay"></div>
</div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd"><span class="sm2-inline-button sm2-volume-control volume-shade"></span><a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
</div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<!-- playlist content is mirrored here-->
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li class="selected"><a href="./sounds/ya.mp3"><b>Fluxcup</b>- Ya</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="m-b-20">
<p>&nbsp;</p>
</div>
<ul id="tab-01" class="nav nav-tabs">
<li class="active"><a href="#product-tab-00" aria-controls="product-tab-00" role="tab" data-toggle="tab">Description</a>
</li>
<li><a href="#product-tab-01" aria-controls="product-tab-01" role="tab" data-toggle="tab">About Seller</a>
</li>
<li><a href="#product-tab-02" aria-controls="product-tab-02" role="tab" data-toggle="tab">Testimonial</a>
</li>
</ul>
<div class="tab-content">
<div id="product-tab-00" class="tab-pane active">
<div class="row">
<div class="col-md-12">
<h4>About Product Name</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur blanditiis reiciendis magnam ut doloribus eum omnis nisi vitae soluta at repellendus maxime iste sint voluptatum voluptas veniam laudantium maiores explicabo temporibus, ipsum. Ullam optio obcaecati sit minus velit ipsum doloremque non? Esse nam repellendus perferendis unde facilis pariatur inventore ullam, vero ad accusamus illo laboriosam molestias iure, voluptates repudiandae aliquid eaque alias qui consequatur voluptatibus? Soluta et, consectetur maxime expedita vero fugiat explicabo voluptas maiores repellendus! Repellat tenetur aliquid praesentium minus deleniti ipsam non dicta, quaerat. Dolorum fugit, veritatis eos, nemo quo labore corporis, molestias fuga nobis praesentium unde recusandae illo sapiente reprehenderit consequatur odio sint accusamus iste minus voluptas placeat voluptatum? Excepturi, dolorum voluptatibus sint minus, magnam accusamus corporis tempora praesentium. Qui maiores enim, corporis perspiciatis repudiandae laudantium voluptas nostrum iusto vitae id assumenda aut ipsum voluptatum inventore reprehenderit magnam culpa impedit eum amet, doloribus labore. Corporis mollitia necessitatibus at minima perspiciatis excepturi reprehenderit eligendi delectus ex minus quaerat consequuntur optio architecto et ullam eum aliquid doloremque itaque quasi sunt quas, autem possimus ipsa ducimus laudantium. Aliquid incidunt quam quo qui soluta, modi earum quisquam.</p>
</div>
</div>
</div>
<div id="product-tab-01" class="tab-pane">
<div class="row">
<div class="col-md-12">
<h4>About Seller</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorum fuga, distinctio ea aut quis nobis quas totam incidunt sit tempora asperiores, suscipit atque necessitatibus earum blanditiis iure quasi omnis?</p>
</div>
</div>
</div>
<div id="product-tab-02" class="tab-pane">
<div class="row">
<div class="col-md-12">
<h4>Testimonial</h4>
<hr>
<div class="row">
<div class="col-md-12 post testimonial">
<div class="info-wrapper one-block">
<div class="username"><span class="dark-text">Bravocado</span>
</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam repellendus quae, excepturi veritatis suscipit doloribus voluptatibus eos accusantium, ex eligendi dolores animi libero mollitia? Assumenda pariatur praesentium, officiis quasi similique?</div>
<div class="more-details">
<ul class="post-links">
<li><span class="muted">2 Minutes ago</span>
</li>
<li><span class="muted">99 people agree</span>
</li>
<li class="last-child"><a href="javascript:;" class="text-warning"><i class="fa fa-star">&nbsp;&nbsp;</i>Agree</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 post testimonial">
<div class="info-wrapper one-block">
<div class="username"><span class="dark-text">Bravocado Lagi</span>
</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam repellendus quae, excepturi veritatis suscipit doloribus voluptatibus eos accusantium, ex eligendi dolores animi libero mollitia? Assumenda pariatur praesentium, officiis quasi similique?</div>
<div class="more-details">
<ul class="post-links">
<li><span class="muted">10 Days ago</span>
</li>
<li><span class="muted">10 people agree</span>
</li>
<li class="last-child"><a href="javascript:;" class="text-warning"><i class="fa fa-star">&nbsp;&nbsp;</i>Agree</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 post testimonial">
<div class="info-wrapper one-block">
<div class="username"><span class="dark-text">Bravocado Dong</span>
</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam repellendus quae, excepturi veritatis suscipit doloribus voluptatibus eos accusantium, ex eligendi dolores animi libero mollitia? Assumenda pariatur praesentium, officiis quasi similique?</div>
<div class="more-details">
<ul class="post-links">
<li><span class="muted">2 Months ago</span>
</li>
<li><span class="muted">11 people agree</span>
</li>
<li class="last-child"><a href="javascript:;" class="text-warning"><i class="fa fa-star">&nbsp;&nbsp;</i>Agree</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 post testimonial">
<h3>Write Your Own</h3>
<form action="javascript:;">
<div class="form-group">
<label for="testiName" class="form-label">Your Name :</label>
<input id="testiName" type="text" class="form-control">
</div>
<div class="form-group">
<label for="testiContent" class="form-label">Testimonal :</label>
<textarea id="testiContent" rows="5" class="form-control"></textarea>
</div>
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-normal">Submit</button>
</div>
</form>
<hr>
<div class="col-md-12 text-right">
<div class="btn-group">
<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
</button>
<button class="btn btn-white">1</button>
<button class="btn btn-white active">2</button>
<button class="btn btn-white">3</button>
<button class="btn btn-white">4</button>
<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div class="grid simple">
<div class="grid-title">
<h4>Product Name</h4>
</div>
<div class="grid-body">
<div class="entitites">
<div class="icon"><span class="fa fa-tag"></span>
</div>
<div class="entity-content">
<p>Rp. 50.000,00</p>
</div>
</div>
<div class="entitites">
<div class="icon"><span class="fa fa-location-arrow"></span>
</div>
<div class="entity-content">
<p>DKI Jakarta, Indonesia</p>
</div>
</div><a href="payment.html" data-toggle="tooltip" data-placement="top" title="" class="btn btn-primary btn-block btn-large tip" data-original-title="Penjual hanya akan mendapatkan uang jika barang sudah ada di tangan Anda.">Buy</a>
</div>
</div>
<div class="grid simple">
<div class="grid-title">
<h4>Payment Method</h4>
</div>
<div class="grid-body">
<ul class="list-inline with-margin payment-method">
<li><img src="images/logo-visa.png">
</li>
<li><img src="images/logo-atmbersama.png">
</li>
<li><img src="images/logo-prima.png">
</li>
<li><img src="images/logo-mastercard.png">
</li>
</ul>
</div>
</div>
<div class="grid simple">
<div class="grid-title">
<h4>Social Media</h4>
</div>
<div class="grid-body">
<ul class="list-inline with-margin">
<li><a href="javascript:;" class="btn btn-facebook btn normal"><span class="fa fa-facebook"></span></a>
</li>
<li><a href="javascript:;" class="btn btn-twitter btn normal"><span class="fa fa-twitter"></span></a>
</li>
<li><a href="javascript:;" class="btn btn-instagram btn normal"><span class="fa fa-instagram"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end contents-->
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment