Banners

		
<!-- Single Banner Style 1 -->
<div class="sin-banner banner-style-1 col-sm-4 col-xs-12">
<a class="banner-wrap" href="#">
<img alt="" src="../img/banner/banner-1.jpg">
<div class="banner-bref banner-bref-1 text-center">
<h1>watches<br>collection</h1>
</div>
</a>
</div>
<!-- Single Banner Style 2 -->
<div class="sin-banner banner-style-2 col-sm-8 col-xs-12">
<div class="banner-wrap">
<img alt="" src="../img/banner/banner-2.jpg">
<div class="banner-bref banner-bref-2 text-left">
<h1>60% off for<br>men Collection</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Banner Style 2 -->
<div class="sin-banner banner-style-2 col-sm-8 col-xs-12">
<div class="banner-wrap">
<img alt="" src="../img/banner/banner-3.jpg">
<div class="banner-bref banner-bref-2 text-right">
<h1>30% off for<br>Glasses Collection</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Banner Style 1 -->
<div class="sin-banner banner-style-1 col-sm-4 col-xs-12">
<a class="banner-wrap" href="#">
<img alt="" src="../img/banner/banner-4.jpg">
<div class="banner-bref banner-bref-1 text-center">
<h1>Latest<br>backpack</h1>
</div>
</a>
</div>
		
	
		
/* Single Banner */
.sin-banner {
  margin-top: 30px;
}
.banner-wrap {
  display: block;
  position: relative;
}
.banner-wrap::before {
  background: #000 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}
.banner-wrap img {
  width: 100%;
}
/* Banner Bref */
.banner-bref {
  height: 80px;
  left: 0;
  margin-top: -40px;
  padding: 0 30px;
  position: absolute;
  right: 0;
  top: 50%;
}
.banner-bref h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 5px;
  margin: 0 0 0 -2px;
  text-transform: uppercase;
}
.banner-bref.text-left h1 {
  margin-left: -2px;
}
.banner-bref.text-right h1 {
  margin-right: -7px;
}
.banner-bref a {
  animation-duration: 0.6s;
  margin-top: 24px;
  font-weight: 600;
  letter-spacing: 2px;
}
.banner-wrap:hover .banner-bref a {
  animation-name: fadeInUp;
}
.banner-bref a:hover {}
.banner-bref-1{}
.banner-bref-2 {}
/* Banner Style 1, 2 Hover Effect */
.banner-style-1 .banner-wrap::before {
  transform: rotateX(70deg);
}
.banner-style-2 .banner-wrap::before {
  transform: rotateX(90deg);
}
.sin-banner:hover .banner-wrap::before {
  transform: rotateX(0);
}
		
	

Promo Banners

		
<!-- Single Promo  -->
<div class="sin-promo col-lg-3 col-sm-6 col-xs-12 fix">
<div class="promo-wrap">
<img alt="" src="../img/banner/promo-1.jpg">
<div class="promo-bref text-right">
<h1>Latest<br>backpack</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Promo  -->
<div class="sin-promo col-lg-3 col-sm-6 col-xs-12 float-right fix">
<div class="promo-wrap">
<img alt="" src="../img/banner/promo-3.jpg">
<div class="promo-bref text-left">
<h1>Latest<br>sunglass</h1>
<a class="button color white-hover animated fadeOutDown" href="#">view more</a>
</div>
</div>
</div>
<!-- Single Promo  -->
<div class="sin-promo col-lg-6 col-xs-12 fix">
<a class="promo-wrap" href="#">
<img alt="" src="../img/banner/promo-2.jpg">
<div class="promo-bref promo-bref-2 promo-bref-right text-center">
<h1>Sale upto 40%<br>New style zeiran</h1>
<div data-countdown="2017/01/01" class="promo-countdown fix"><span class="cdown day"><span class="time-count">144</span> <p>Days</p></span> <span class="cdown hour"><span class="time-count">13</span> <p>Hours</p></span> <span class="cdown minutes"><span class="time-count">08</span> <p>Minute</p></span> <span class="cdown second"><span class="time-count">44</span> <p>Second</p></span></div>
</div>
</a>
</div>
		
	
		
/* Single Promo */
.sin-promo {
  padding: 0;
}
.promo-wrap {
  display: block;
  height: 100%;
  position: relative;
}
.promo-wrap::before {
  background: #000 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotateX(90deg);
}
.sin-promo:hover .promo-wrap::before {
  transform: rotateX(0);
}
.promo-wrap img {
  width: 100%;
}
/* Promo Bref */
.promo-bref {
  display: block;
  height: 100%;
  left: 0;
  padding: 0 35px;
  position: absolute;
  right: 0;
  top: 0;
}
.promo-bref-2 {
  padding-right: 60px;
}
.promo-bref.promo-bref-right {
  left: auto;
}
.promo-bref.text-right {
  padding-left: 0;
}
.promo-bref.text-left {
  padding-right: 0;
}
.promo-bref h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 5px;
  margin-bottom: 20px;
  margin-top: 155px;
  text-transform: uppercase;
}
.promo-bref-2 h1, .sin-promo:hover .promo-bref h1 {
  margin-top: 120px;
}
.promo-bref.text-left h1 {
  margin-left: -3px;
}
.promo-bref.text-right h1 {
  margin-right: -5px;
}
.promo-bref .button {
  animation-duration: 0.6s;
  font-weight: 600;
  letter-spacing: 2px;
}
.sin-promo:hover .button {
  animation-name: fadeInUp;
}
/* Promo Countdown */
.promo-countdown {}
.promo-countdown .cdown {
  display: block;
  float: left;
  margin-right: 50px;
}
.promo-countdown .cdown:last-child {
  margin-right: 0;
}
.promo-countdown .cdown .time-count {
  border: 1px solid #fff;
  border-radius: 50px;
  color: #606060;
  display: block;
  font-size: 18px;
  height: 66px;
  line-height: 66px;
  position: relative;
  width: 66px;
  z-index: 1;
}
.promo-countdown .cdown .time-count::before {
  position: absolute;
  content: "";
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  background: #fff;
  border-radius: 50%;
  z-index: -1;
}
.promo-countdown .cdown p {
  color: #606060;
  line-height: 14px;
  text-transform: uppercase;
  margin-top: 17px;
}
.sin-promo:hover .promo-countdown .cdown p {
  color: #fff;
}
		
	

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background