Newsletter & Top Sale Shortcodes


Top Sale

On Sale

										
<section class="newletter-area">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 col-md-offset-3 col-xs-12">
<div class="newsletter-form">
<h3>NEWSLETTER</h3>
<p>Subscribe for latest stories and promotions</p>
<div class="search-input">
<form action="#">
<input type="text" placeholder="enter your email">
<button value="Submit" type="submit" class="search-button">Subcribe</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>	
/*Top Sale Area*/
<section class="top-sale-area">
<div class="container">
<div class="row">
<!-- TOP SALE AREA START -->
<div class="col-md-3 col-sm-6 mrbtm-bstsell sm-mr">
<div class="top-sale-single">
<div class="top-sale-heading">
<h3>Top Sale</h3>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/1.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Gril’s Cloths</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/2.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Boys’s Cloths</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/3.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Gril’s Cloths</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- TOP SALE AREA END -->

<!-- ON SALE AREA START -->
<div class="col-md-3 col-sm-6 mrbtm-bstsell">
<div class="top-sale-single">
<div class="top-sale-heading">
<h3>On Sale</h3>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/4.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Foraq dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/5.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Shirt dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/6.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Shirt dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- ON SALE AREA END -->

<!-- MOST VIEW AREA START -->
<div class="col-md-3 col-sm-6 hidden-xs">
<div class="top-sale-single">
<div class="top-sale-heading">
<h3>Most View</h3>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/7.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Foraq dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/8.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Foraq dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/1.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Sock dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- MOST VIEW AREA END -->

<!-- PRODUCT VIEW AREA START -->
<div class="col-md-3 col-sm-6 hidden-xs">
<div class="top-sale-single">
<div class="top-sale-heading">
<h3>Product View</h3>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/4.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">T-shirt dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/3.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">T-shirt dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
<div class="top-sale-details">
<a href="#"><img src="img/product/5.jpg" alt="" /></a>
<div class="top-sale-featured-content">
<h4><a href="#">Foraq dress</a></h4>
<h4>$ 50.00</h4>
<div class="rating">
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="clr zmdi zmdi-star"></i>
<i class="zmdi zmdi-star"></i>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCT VIEW AREA END -->
</div>
</div>
</section>							
										
									
										
.newletter-area {
background: rgba(0, 0, 0, 0) url("img/section-bg/newsletter-bg.jpg") repeat scroll center center / cover ;
}
.newletter-area .search-input {
padding: 0;
}
.newletter-area .newsletter-form {
padding: 81px 0 85px;
}
.newletter-area .search-input {
position: relative;
}
.newletter-area .search-input input {
background: #fff none repeat scroll 0 0;
border: 1px solid #fff;
border-radius: 2px;
color: #787878;
padding: 10px;
position: relative;
width: 432px;
}
.newletter-area .search-input .search-button {
background: #00cccc none repeat scroll 0 0;
border: 1px solid #00cccc;
border-radius: 3px;
color: #fff;
font-size: 14px;
font-weight: 700;
margin-left: 4px;
padding: 10px 40px;
text-transform: uppercase;
}
.newsletter-form > h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin: 0 0 5px;
}
.newsletter-form > p {
color: #fff;
font-size: 16px;
margin: 0 0 21px;
}
/*Top Sale Area*/
.top-sale-area {
padding: 80px 0;
}
.top-sale-single {
border: 1px solid #ddd;
padding: 28px 0 0 28px;
}
.top-sale-heading {
margin-bottom: 35px;
}
.top-sale-heading > h3 {
font-size: 18px;
font-weight: 700;
margin: 0;
position: relative;
color: #444444;
}
.top-sale-heading > h3::before {
border: 1px solid #444444;
bottom: -10px;
content: "";
height: 0;
left: 0;
position: absolute;
width: 20%;
}
.top-sale-details {
display: block;
margin-bottom: 25px;
overflow: hidden;
}
.top-sale-details > a img {
float: left;
}
.top-sale-featured-content {
display: block;
overflow: hidden;
padding: 14px;
text-align: center;
}
.top-sale-featured-content > h4 {
font-size: 14px;
font-weight: 700;
margin: 5px 0 3px;
}
.top-sale-featured-content > h4 a {
color: #444444;
font-size: 14px;
font-weight: 700;
margin: 0 0 5px;
}
.home-two .top-sale-details .top-sale-featured-content > .rating{float:none}
.top-sale-featured-content > h4 a:hover{
color:#24CCD7;
}