573 lines
27 KiB
PHP
573 lines
27 KiB
PHP
|
<div class="row">
|
||
|
<div class="col-md-12">
|
||
|
<div class="panel panel-success">
|
||
|
<div class="panel-heading">
|
||
|
<h3 class="panel-title">Best Selling Item</h3>
|
||
|
</div>
|
||
|
<div class="panel-body">
|
||
|
|
||
|
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
|
||
|
<!-- Wrapper for slides -->
|
||
|
<div class="carousel-inner">
|
||
|
<div class="item active">
|
||
|
<div class="row">
|
||
|
<div class="col-sm-3 col-sm-offset-1" style="margin-left:120px">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product A</h5>
|
||
|
<h5 class="price-text-color">$7.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product B</h5>
|
||
|
<h5 class="price-text-color">$9.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_002.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product C</h5>
|
||
|
<h5 class="price-text-color">$7.58</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_003.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="item">
|
||
|
<div class="row">
|
||
|
<div class="col-sm-3 col-sm-offset-1" style="margin-left:120px">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Another product</h5>
|
||
|
<h5 class="price-text-color">$3.75</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product</h5>
|
||
|
<h5 class="price-text-color">$7.17</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product</h5>
|
||
|
<h5 class="price-text-color">$19.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_002.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<!-- Controls -->
|
||
|
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev" style="background-image:none;color:#337ab7">
|
||
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||
|
<span class="sr-only">Previous</span>
|
||
|
</a>
|
||
|
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next" style="background-image:none;color:#337ab7">
|
||
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||
|
<span class="sr-only">Next</span>
|
||
|
</a>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="row">
|
||
|
<div class="col-md-12">
|
||
|
<div class="panel panel-success">
|
||
|
<div class="panel-heading">
|
||
|
<h3 class="panel-title">New Item</h3>
|
||
|
</div>
|
||
|
<div class="panel-body">
|
||
|
|
||
|
<div id="carousel-example2" class="carousel slide hidden-xs" data-ride="carousel">
|
||
|
<!-- Wrapper for slides -->
|
||
|
<div class="carousel-inner">
|
||
|
<div class="item active">
|
||
|
<div class="row">
|
||
|
<div class="col-sm-3 col-sm-offset-1" style="margin-left:120px">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product A</h5>
|
||
|
<h5 class="price-text-color">$7.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product B</h5>
|
||
|
<h5 class="price-text-color">$9.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_002.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product C</h5>
|
||
|
<h5 class="price-text-color">$7.58</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_003.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="item">
|
||
|
<div class="row">
|
||
|
<div class="col-sm-3 col-sm-offset-1" style="margin-left:120px">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Another product</h5>
|
||
|
<h5 class="price-text-color">$3.75</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product</h5>
|
||
|
<h5 class="price-text-color">$7.17</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_001.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-sm-3">
|
||
|
<div class="col-item">
|
||
|
<div class="info">
|
||
|
<div class="row">
|
||
|
<div class="price col-md-6">
|
||
|
<h5>Product</h5>
|
||
|
<h5 class="price-text-color">$19.99</h5>
|
||
|
</div>
|
||
|
<div class="rating hidden-sm col-md-6">
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
<i class="price-text-color fa fa-star"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="photo">
|
||
|
<img src="http://www.prepbootstrap.com/Content/images/template/productslider/product_002.jpg" class="img-responsive" alt="a" />
|
||
|
</div>
|
||
|
<div class="info">
|
||
|
<div class="separator clear-left">
|
||
|
<p class="btn-add">
|
||
|
<i class="fa fa-shopping-cart"></i><a href="#" class="hidden-sm">Add to cart</a>
|
||
|
</p>
|
||
|
<p class="btn-details">
|
||
|
<i class="fa fa-list"></i><a href="#" class="hidden-sm">More details</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="clearfix">
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<!-- Controls -->
|
||
|
<a class="left carousel-control" href="#carousel-example2" role="button" data-slide="prev" style="background-image:none;color:#337ab7">
|
||
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
||
|
<span class="sr-only">Previous</span>
|
||
|
</a>
|
||
|
<a class="right carousel-control" href="#carousel-example2" role="button" data-slide="next" style="background-image:none;color:#337ab7">
|
||
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
||
|
<span class="sr-only">Next</span>
|
||
|
</a>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>asset/font-awesome/css/font-awesome.min.css" />
|
||
|
<style>
|
||
|
.col-item
|
||
|
{
|
||
|
border: 2px solid #2323A1;
|
||
|
border-radius: 5px;
|
||
|
background: #FFF;
|
||
|
}
|
||
|
.col-item .photo img
|
||
|
{
|
||
|
margin: 0 auto;
|
||
|
width: 100%;
|
||
|
}
|
||
|
|
||
|
.col-item .info
|
||
|
{
|
||
|
padding: 10px;
|
||
|
border-radius: 0 0 5px 5px;
|
||
|
margin-top: 1px;
|
||
|
}
|
||
|
.col-item:hover .info {
|
||
|
background-color: rgba(215, 215, 244, 0.5);
|
||
|
}
|
||
|
.col-item .price
|
||
|
{
|
||
|
/*width: 50%;*/
|
||
|
float: left;
|
||
|
margin-top: 5px;
|
||
|
}
|
||
|
|
||
|
.col-item .price h5
|
||
|
{
|
||
|
line-height: 20px;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
.price-text-color
|
||
|
{
|
||
|
color: #00990E;
|
||
|
}
|
||
|
|
||
|
.col-item .info .rating
|
||
|
{
|
||
|
color: #003399;
|
||
|
}
|
||
|
|
||
|
.col-item .rating
|
||
|
{
|
||
|
/*width: 50%;*/
|
||
|
float: left;
|
||
|
font-size: 17px;
|
||
|
text-align: right;
|
||
|
line-height: 52px;
|
||
|
margin-bottom: 10px;
|
||
|
height: 52px;
|
||
|
}
|
||
|
|
||
|
.col-item .separator
|
||
|
{
|
||
|
border-top: 1px solid #FFCCCC;
|
||
|
}
|
||
|
|
||
|
.clear-left
|
||
|
{
|
||
|
clear: left;
|
||
|
}
|
||
|
|
||
|
.col-item .separator p
|
||
|
{
|
||
|
line-height: 20px;
|
||
|
margin-bottom: 0;
|
||
|
margin-top: 10px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.col-item .separator p i
|
||
|
{
|
||
|
margin-right: 5px;
|
||
|
}
|
||
|
.col-item .btn-add
|
||
|
{
|
||
|
width: 50%;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.col-item .btn-add
|
||
|
{
|
||
|
border-right: 1px solid #CC9999;
|
||
|
}
|
||
|
|
||
|
.col-item .btn-details
|
||
|
{
|
||
|
width: 50%;
|
||
|
float: left;
|
||
|
padding-left: 10px;
|
||
|
}
|
||
|
.controls
|
||
|
{
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
[data-slide="prev"]
|
||
|
{
|
||
|
margin-right: 10px;
|
||
|
}
|
||
|
</style>
|
||
|
</body>
|
||
|
</html>
|