olshop/application/views/front/Home.php

573 lines
27 KiB
PHP
Raw Permalink Normal View History

2020-01-02 23:12:35 +07:00
<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>